D3.js 세계지도

1 개요[ | ]

D3.js 세계지도

<svg class="map" style="width:100%; height:300px"></svg>

<script src="//unpkg.com/d3@4/build/d3.min.js"></script>
<script src="//unpkg.com/topojson-client@3"></script>
<script src="//unpkg.com/d3-queue@1/build/queue.min.js"></script>
<script>
  queue()
    .defer(d3.json, "//unpkg.com/world-atlas@1/world/110m.json" )
    .await(ready);

  function ready(error, data){
    d3.select(".map")
      .selectAll("path")
      .data(topojson.feature(data, data.objects.countries).features)
      .enter()
      .append("path")
      .attr("d", d3.geoPath().projection(d3.geoMercator()))
      .attr("fill", "#b8b8b8");
  }
</script>

2 같이 보기[ | ]