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.geojson")     
              .defer(d3.csv, "cities.csv")
            .await(ready);

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

//function createMap(topoCountries) {
            var countries =
                topojson.feature(tcountries, 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");

var neighbors =
                topojson.neighbors(topoCountries.objects.countries.geometries);

d3.selectAll("path.countries")
                .on("mouseover", findNeighbors)
                .on("mouseout", clearNeighbors);

function findNeighbors(d, i) {
                d3.select(this).style("fill", "#FE9922");
                d3.selectAll("path.countries")
                    .filter((p, q) => neighbors[i].indexOf(q) > -1).style("fill",
                                                                           "#41A368");
            }

function clearNeighbors() {
                d3.selectAll("path.countries").style("fill", "#C4B9AC");
            }
        }

</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