Zoomable World Map

forked from jrzief's block: World Map &Neighbor Countries

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
  <script src="colorbrewer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
     path.countries {
            stroke-width: 1;
            stroke: #75739F;
            fill: #5EAFC6;
        }

circle.cities {
            stroke-width: 1;
            stroke: #4F442B;
            fill: #FCBC34;
        }

circle.centroid {
            fill: #75739F;
            pointer-events: none;
        }

rect.bbox {
            fill: none;
            stroke-dasharray: 5 5;
            stroke: #75739F;
            stroke-width: 2;
            pointer-events: none;
        }

path.graticule {
            fill: none;
            stroke-width: 1;
            stroke: #9A8B7A;
        }

path.graticule.outline {
            stroke: #9A8B7A;
        }

path.merged {
            fill: #9A8B7A;
            stroke: #4F442B;
            stroke-width: 2px;
        }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    var margin = {
                top: 20,
                left: 50,
                right: 50,
                bottom: 100
            },
            width = 1000 - margin.left - margin.right;
        height = 500 - margin.top - margin.bottom;

svg 
           .attr("height", height + margin.top + margin.bottom)
            .attr("width", width + margin.left + margin.right)
            .append("g")
            .attr("transform", "translate( 100, -50)");

d3
            .queue()
              .defer(d3.json, "world.topojson") //       "https://d3js.org/us-10m.v1.json")
              .defer(d3.csv, "cities.csv")
            .await(ready);

function ready(error, topoCountries, cities) {
            console.log(topoCountries);

//function createMap(topoCountries) {
            var countries =
                topojson.feature(topoCountries, topoCountries.objects.countries);

var projection = d3.geoMollweide()
                .scale(120);
            // .translate([250, 250])
            // .center([120, 120]);

var geoPath = d3.geoPath().projection(projection);
            var featureSize =
                d3.extent(countries.features, d => geoPath.area(d));
            var countryColor = d3.scaleQuantize()
                .domain(featureSize).range(colorbrewer.Reds[7]);

var graticule = d3.geoGraticule();

// d3.select("svg")
            svg
                .append("path")
                .datum(graticule)
                .attr("class", "graticule line")
                .attr("d", geoPath);

// d3.select("svg").append("path")
            svg
                .append("path")
                .datum(graticule.outline)
                .attr("class", "graticule outline")
                .attr("d", geoPath);

// d3.select("svg").selectAll("path.countries")
            svg
                .selectAll("path.countries")
                .data(countries.features)
                .enter()
                .append("path")
                .attr("d", geoPath)
                .attr("class", "countries")
                .style("fill", d => countryColor(geoPath.area(d)))
                .style("stroke", "none");
          
            // d3.select("svg").selectAll("circle").data(cities)
             svg
                .selectAll("circle")
                .data(cities)
                .enter()
                .append("circle")
                .attr("class", "cities")
                .attr("r", 3)
                .attr("cx", d => projection([d.x, d.y])[0])
                .attr("cy", d => projection([d.x, d.y])[1]);

var mapZoom = d3.zoom()
              .on("zoom", zoomed);

var zoomSettings = d3.zoomIdentity
              .translate(250, 250)
              .scale(120);

d3.select("svg")
              .call(mapZoom)
              .call(mapZoom.transform, zoomSettings);

function zoomed() {
              var e = d3.event;
              projection.translate([e.transform.x, e.transform.y])
                .scale(e.transform.k);
              d3.selectAll("path.graticule").attr("d", geoPath);
              d3.selectAll("path.countries").attr("d", geoPath);
              d3.selectAll("circle.cities")
                .attr("cx", d => projection([d.x, d.y])[0])
                .attr("cy", d => projection([d.x, d.y])[1]);
            }

}

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js