Airports-Data-Visualisation/example.html at main · Nam-H-Pham/Airports-Data-Visualisation · 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
<!DOCTYPE html>
<html>
<head>
  <!-- Include Vega-Lite and Vega-Lite-Embed libraries -->
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>


</head>
<body>
  <!-- Create a div element to hold the Vega-Lite map -->
  <div id="world-map" style="width: 800px; height: 800px;"></div>

    <script>
    map = vl
            .markGeoshape({ stroke: 'white' })
            .data(choroplethData)
            .encode(
              vl
                .color({
                  // here we may specify a color for missing data
                  condition: {
                    test: `!datum['properties.${year}']`,
                    value: "lightgrey"
                  }
                })
                .fieldQ(`properties.${year}`)
                // In the scale propery we may define an alternative color scheme (see
                // https://vega.github.io/vega/docs/schemes/ for possible options)
                // or a fixed domain for our variable
                .scale({
                  scheme: 'spectral',
                  domain: [30, 90]
                })
                // we hide the legend in this example,
                // as we produce it externally using the @d3/color-legend
                // plugin in the cell above this map
                .legend(null),
              vl.tooltip([
                {
                  field: 'properties["Country Name"]',
                  type: 'nominal',
                  title: 'Country'
                },
                {
                  field: `properties.${year}`,
                  type: 'quantitative',
                  title: 'Life expectancy'
                }
              ])
            )
            .project(
              vl
                .projection("naturalEarth1")
                .translate([450, 300])
                .rotate(0)
                .scale(200)
            )
            .width(width - 50)
            .height(500)
            .config({
              view: { stroke: null }
            })
            .render()

            choroplethData = {

  const [worldTopo, lifeExpectancies, countryCodes] = await Promise.all([
    // we load a topojson file of the world
    d3.json('https://unpkg.com/world-atlas@1/world/110m.json'),
    // and a file containing the life expectancies of all countries
    d3.csv(
      "https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/e5dd92dad888a75045fcab80d0077e824d38b178/world-life-expectancy.csv"
    ),
    // as well as a file containing the countries ISO 3166 and alpha-3 codes.
    // We need this last file in order to match the life expectancy data obtained from
    // the World Bank (using Alpha-3 country codes) with the ISO 3166 country codes
    // found in the world topojson country polygons.
    d3.csv(
      "https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv"
    )
  ]);
  // we convert the topojson file to geojson
  const worldGeoJSON = topojson.feature(worldTopo, "countries");

  return worldGeoJSON.features.map(countryFeature => {
    const iso3166Code = countryFeature.id;
    // we try to look up the alpha3 code for the current country
    // in the countryCodes array, if it's not found, we simply ignore it
    const alpha3 = countryCodes.find(
      codes => codes['country-code'] == iso3166Code
    )?.['alpha-3'];
    // Each object in our 'lifeExpectancies' array contains the life expectancies for the different
    // years as properties. Also, it contains a property called 'Country Code', which represents
    // an Alpha-3 country code that we can use to match our GeoJSON country polygons
    // to the life expectancy data in the vega-lite map
    // In our world GeoJSON feature, the countries may only be referenced by their 3-letter
    // country code (this is not the Alpha-3 code!).
    const countryLifeExpData = lifeExpectancies.find(
      country => country['Country Code'] == alpha3
    );
    countryFeature.properties = countryLifeExpData;
    return countryFeature;
  });
}
    </script>

</body>
</html>