infographicstw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    for http://blog.infographics.tw/2015/04/d3js-with-global-sphere-map/

  
## index.css
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

## index.html
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"></head><body><svg id="svg" width="800px" height="600px" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid"></svg><script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script><script type="text/javascript" src="index.js"></script></body></html>

## index.js
d3.json("world.json", function(world) {

var projection = d3.geo.orthographic().scale(245).translate([400,300]).clipAngle(90);
var path = d3.geo.path().projection(projection);
var countries = topojson.feature(world, world.objects.countries).features;
var color = d3.scale.category20();
console.log(countries);

var polygon = d3.select("#svg").selectAll("path").data(countries)
  .enter().append("path").attr({"d":path,"fill":function(d){return color(d.id);}});

d3.select("#svg").call(d3.behavior.drag()
    .origin(function() {
      r = projection.rotate();
      return {x: r[0], y: -r[1]};
    })
    .on("drag", function() {
    rotate = projection.rotate();
    projection.rotate([d3.event.x, -d3.event.y, rotate[2]]);
    d3.select("#svg").selectAll("path").attr("d", path);
  }));

});


## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	d3.json("world.json", function(world) {

	var projection = d3.geo.orthographic().scale(245).translate([400,300]).clipAngle(90);
	var path = d3.geo.path().projection(projection);
	var countries = topojson.feature(world, world.objects.countries).features;
	var color = d3.scale.category20();
	console.log(countries);

	var polygon = d3.select("#svg").selectAll("path").data(countries)
	.enter().append("path").attr({"d":path,"fill":function(d){return color(d.id);}});

	d3.select("#svg").call(d3.behavior.drag()
	.origin(function() {
	r = projection.rotate();
	return {x: r[0], y: -r[1]};
	})
	.on("drag", function() {
	rotate = projection.rotate();
	projection.rotate([d3.event.x, -d3.event.y, rotate[2]]);
	d3.select("#svg").selectAll("path").attr("d", path);
	}));

	});