globalmigration/index.html at master · unipa/globalmigration · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
	<title>Flussi</title>
	<meta name=description content="Flussi">
	<meta name=viewport content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.png" type="image/png">
	<link href="dist/app-v1.css" rel="stylesheet" media="all">

	<!--[if lt IE 9]><script src=javascripts/html5shiv-printshiv.js></script><![endif]-->
  <script src="dist/app-v1.js"></script>
</head>
<body>
  <div id=container class="container">

  	<div class="wrap">
  		<main role="main">
        <nav role=navigation>
          <div id="timeline"></div>
        </nav>
        <div id="diagram"></div>
  		</main>
  	</div>


    <div id=help-wrapper class=help-wrapper>
      <div class="help" id="help">
        <div class="tab">How to read the plot</div>
        <div class="help-content">
          <h3>How to read the plot</h3>
          <img src="images/help.png" class="left">
          <p>
            Origins and destinations are represented by the circle’s segments.
            Each region/country is assigned a colour.
            Flows have the same colour as their origin and the width indicates their size.
            The direction of the flow is also shown by the gap between flow and country/region: small gap indicates origin; large gap indicates destination.
            <b>Click on a segment to switch between country and region view.</b>
          </p>
          <div class="clear"></div>
          <p>
            Switch between time periods using Ctrl and number keys (1,2,3,4);
            reset the plot using Ctrl and r; zoom in/out with Ctrl and +/-
          </p>

        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>

  <script>
    // help
    (function() {
      var help = d3.select('#help');

      help.on('click', function() {
        var isActive = help.classed('active');

        help
          .classed('active', !isActive)
          .transition()
          .style('width', isActive ? '30px' : '572px');
      });

      function helpOffset() {
        var offset = Math.max((document.body.clientWidth - document.getElementById('container').clientWidth) / 2, 0);

        help.style('right', offset + 'px');
      }
      d3.select(window).on('resize.help-resize', helpOffset);
      helpOffset();
    })();
  </script>


  <script>
    (function() {

      var datafile = 'json/migrations.json';
      var aLittleBit = Math.PI / 100000;

      d3.json(datafile, function(data) {
        var years = Object.keys(data.matrix).map(function(y) { return parseInt(y, 10); });
        var now = years[0]; // the year shown at startup
        var chart = Globalmigration.chart(data, {
          element: '#diagram',
          now: now,
          animationDuration: 500,
          margin: 125,
          arcPadding: 0.04,
          layout: {
            // threshold: 50000,
            threshold: -100000, // dafi
            labelThreshold: 50,
            colors: 'cd3d08 ec8f00 6dae29 683f92 b60275 2058a5 00a592 009d3c 378974 ffca00'.split(' ').map(function(c) { return '#' + c; })
          }
        });

        Globalmigration.timeline(chart, {
          now: now,
          element: '#timeline',
          yearSpan: 0
        });

        chart.draw(now);
      });
    })();

  </script>

</body>
</html>