soedomoto · February 23, 2016 07:20
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <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(
        'http://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 http://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>
	<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(
	'http://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 http://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>
No results found