D3 Examples - World Map

xxxxxxxxxx
 
<html>
  <head>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <style>
      .pan-canvas .background {
        stroke: #333333;
        fill: #FAFAFF;
      }
      .filter-canvas .background {
        stroke: #333333;
        fill: #FAFAFF;
      }
        .water {
        fill: #B0D6FD;
                stroke: #000;
            }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var width             =   944,
          height            =   480;
      
      var projection    =   d3.geo.orthographic()
                                        .translate([height / 2, height / 2])
                                        .clipAngle(85), 
          path              =   d3.geo.path().projection(projection), 
          color             = d3.scale.category10();
      
      var container     = d3.select("body").append("div")
                                        .style("width", width)
                                        .style("height", height)
                                        .style("position", "relative");;
      
      var svg               = container.append("svg")
                                        .attr("width", height)
                                        .attr("height", height);
      
      // Map Container (Left Side)
      var mapCont           =   svg.append("g")
                                        .attr("class", "pan-canvas"), 
            panBg           = mapCont.append("rect")
                                        .attr("width", height)
                                        .attr("height", height)
                                        .attr("class", "background"), 
          water             = mapCont.append("path")
                                        .datum({type: "Sphere"})
                                        .attr("class", "water")
                                        .attr("transform", "translate(0,0)scale(1)")
                                        .attr("d", path), 
          map               = mapCont.append("g");
      
      // Filter Container (Right Side)
      var filterCont    = container.append("div")
                                        .style("width", 200)
                                        .style("height", height)
                                        .style("position", "absolute")
                                        .style("left", 500)
                                        .style("top", 0)
                                        .style("border", "1px solid rgba(51,51,51,0.5)");
      
      d3.json(
        'https://www.billdwhite.com/wordpress/wp-content/data/world.json', 
      function(data) {
        var countries = topojson.feature(data, data.objects.countries).features, 
                neighbors = topojson.neighbors(data.objects.countries.geometries);
        
        var world       = map.selectAll(".country")
                        .data(countries).enter()
                        .append("path")
                          .attr("id", function(d, i) {
                            return "country" + d.id
                          })
                          .attr("class", "country")
                          .attr("d", path)
                          .style("fill", function(d, i) { 
                            return color(
                              d.color = d3.max(neighbors[i], function(n) { 
                                return countries[n].color; 
                              }) + 1 | 0
                            )
                          })
                          .style("fill-opacity", 1)
                          .style("stroke", "#000");
        
        var i = 0;
        setInterval(function() {
          i = i+0.5;
          projection.rotate([i,0,0]);
          world.attr('d', path);
        }, 20);
      });
      
      d3.json("https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.json", function(data) {
        // Add Region Drop-down
        var regionSel   =   filterCont.append("select")
        // Add Country Drop-down
        var countrySel  =   filterCont.append("select")
        
        // Group by "region"(="benua")
        var countriesByRegion = d3.nest()
                .key(function(d) { return d["region"]; })
                .entries(data);
        
        // Drop-down : Adapted from https://stackoverflow.com/questions/11903709/adding-drop-down-menu-using-d3-js
        // Add Options to Region Select
        regionSel.selectAll('option')
          .data(countriesByRegion).enter()
          .append("option")
          .text(function(d) { 
            return d.key; 
          });
        // Add event-handler on region selected
        regionSel.on("change", function() {
          // Reset opacity to 1
          map.selectAll(".country").style("fill-opacity", 1)
​
          var options   =   regionSel.selectAll('option');
          var selIdx    = regionSel.property('selectedIndex'), 
              selOpt    = options.filter(function (d, i) { 
                return i === selIdx 
              }), 
              data      = selOpt.datum();
​
          // Use data from selected region as an country drop down input
          countrySel.selectAll("*").remove();
          countrySel.selectAll('option')
            .data(data.values).enter()
            .append("option")
            .text(function(d) {
            return d.name; 
          });
          
          // Add event-handler on country selected
          countrySel.on("change", function() {
            var options =   countrySel.selectAll('option');
            var selIdx  = countrySel.property('selectedIndex'), 
                selOpt  = options.filter(function (d, i) { 
                  return i === selIdx 
                }), 
                data        = selOpt.datum();
                    country = parseInt(data["country-code"])
                
                // Set opacity of others country to 0.1
                map.selectAll(".country").style("fill-opacity", 0.1)
                // Set opacity of selected country to 1
                map.select("#country" + country).style("fill-opacity", 1)
          });
        })
      })
    </script>
  </body>
</html>
    