World Map

asdf

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

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

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/topojson.v1.min.js