NewPoliticsOfCare_map/cartogram.html at master · CenterForSpatialResearch/NewPoliticsOfCare_map · 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
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="js/d3.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<div id="cartogram"></div>

<script>


    var carto= d3.json("cartogram.geojson")
  Promise.all([carto])
    .then(function(data){
      cartogram(data[0])
    })
// Load external data and boot

function cartogram(data){
  // Draw the map
// The svg
  var width =300
  var height = 200
  var svg = d3.select("#cartogram").append("svg").attr("width",width).attr("height",height)
  // Map and projection
  var projection = d3.geoMercator().scale(220).translate([550, 300]);

  // Path generator
  var path = d3.geoPath()
        .projection(projection)
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
            .attr("fill", "#69a2a2")
            .attr("d", path)
            .attr("stroke", "white")

  // Add the labels
  svg.append("g")
      .selectAll("labels")
      .data(data.features)
      .enter()
      .append("text")
        .attr("x", function(d){return path.centroid(d)[0]})
        .attr("y", function(d){return path.centroid(d)[1]})
        .text(function(d){ return d.properties.iso3166_2})
        .attr("text-anchor", "middle")
        .attr("alignment-baseline", "central")
        .style("font-size", 10)
        .style("font-family", "helvetica")
        .style("fill", "white")
}

</script>