EE2dev/index.html

## readme-world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              readme-world-110m.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.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country {
  fill: green;
  stroke: darkgrey;
  stroke-width: .5px;
  stroke-linejoin: round;
}

.background {
    fill: lightblue;
}

.graticule {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: .5px;
}

.graticule-outline {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}

.cityPoint {
  fill: yellow;
  stroke: black;
  opacity:.6;
}

.labels {
    font: 12px sans-serif;
    fill: black;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
	height = 500;

var rotate = [.001, 0],
	velocity = [.013, 0],
	time = Date.now();

var centroid = d3.geo.path()
	.projection(function(d) { return d; })
	.centroid;

var projection = d3.geo.orthographic()
    .scale(125)
    .clipAngle(90);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var ocean = svg.append("path")
    .datum({type: "Sphere"})
    .attr("class", "background")
    .attr("d", path);

var graticuleLine = svg.append("path")
    .attr("class", "graticule")
    .attr("d", path);

svg.append("circle")
    .attr("class", "graticule-outline")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", projection.scale())

d3.json("readme-world-110m.json", function(error, world) {
  var countries = topojson.object(world, world.objects.countries).geometries,
      i = -1,
      n = countries.length;

  var country = svg.selectAll(".country")
      .data(countries)
      .enter()
      .insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path)

  var cities = createCities();
  var cityPoints = svg.append("g").attr("class", "points")
       .selectAll("path").data(cities)
       .enter().append("path")
       .attr("class", "cityPoint")
       .attr("d", path);

    svg.append("g")
        .attr("class", "label_background")
        .selectAll("rect").data(cities)
        .enter().append("rect")
        .attr("class", "label")
        .attr({x: 0, y: -11, height: 12})
        .attr("width", function(d,i) { return i === 0 ? 40 : 69;})
        .style("fill", "yellow")
        .style("opacity", 0.5);

    svg.append("g").attr("class","labels")
        .selectAll("text").data(cities)
      .enter().append("text")
      .attr("class", "label")
      .attr("text-anchor", "start")
      .text(function(d) { return d.properties.name })

    position_labels();
     debugger;
    rotateGlobe();
    // shrinkGlobe();

  function createCities() {
      var cities =  [
            { "type": "Feature", "properties": { "name": "Munich"  },
                "geometry": { "type": "Point", "coordinates": [ 11.581981, 48.135125 ] } },
            { "type": "Feature", "properties": { "name": "San Antonio"  },
                "geometry": { "type": "Point", "coordinates": [ -98.5, 29.4167 ] } },
            { "type": "Feature", "properties": { "name": "Melbourne"  },
            "geometry": { "type": "Point", "coordinates": [ 144.963056, -37.813611,  ] } }
            ];
	   return cities;
  }

  function position_labels() {
      var centerPos = projection.invert([width/2,height/2]);
      var arc = d3.geo.greatArc();

      svg.selectAll(".label")
        .attr("transform", function(d) {
          var loc = projection(d.geometry.coordinates),
            x = loc[0],
            y = loc[1];
          var offset = 5;
          return "translate(" + (x+offset) + "," + (y-2) + ")"
        })
        .style("display",function(d) {
          var d = arc.distance({source: d.geometry.coordinates, target: centerPos});
          return (d > 1.57) ? 'none' : 'inline';
        });
    }

  function rotateGlobe() {
     d3.timer(function() {
        var dt = Date.now() - time;
        projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
        redraw();
    });
  }

  function shrinkGlobe() {
    redrawTransition(2500);
	// projection.scale(200);
    // redrawTransition(2500);
  }

  function redraw() {
		country.attr("d", path);
        graticuleLine.attr("d", path);
        cityPoints.attr("d", path);
        position_labels();
  }

  function redrawTransition(mSeconds) {
		projection.scale(50);

		ocean.transition().duration(mSeconds).attr("d", path);
        country.transition().duration(mSeconds).attr("d", path);
        graticuleLine.transition().duration(mSeconds).attr("d", path);
        cityPoints.attr("d", path);
        position_labels();
  }
});
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.country {
	fill: green;
	stroke: darkgrey;
	stroke-width: .5px;
	stroke-linejoin: round;
	}

	.background {
	fill: lightblue;
	}

	.graticule {
	fill: none;
	stroke: #000;
	stroke-opacity: .3;
	stroke-width: .5px;
	}

	.graticule-outline {
	fill: none;
	stroke: #333;
	stroke-width: 1.5px;
	}

	.cityPoint {
	fill: yellow;
	stroke: black;
	opacity:.6;
	}

	.labels {
	font: 12px sans-serif;
	fill: black;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script>
	var width = 960,
	height = 500;

	var rotate = [.001, 0],
	velocity = [.013, 0],
	time = Date.now();

	var centroid = d3.geo.path()
	.projection(function(d) { return d; })
	.centroid;

	var projection = d3.geo.orthographic()
	.scale(125)
	.clipAngle(90);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule()
	.extent([[-180, -90], [180 - .1, 90 - .1]]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var ocean = svg.append("path")
	.datum({type: "Sphere"})
	.attr("class", "background")
	.attr("d", path);

	var graticuleLine = svg.append("path")
	.attr("class", "graticule")
	.attr("d", path);

	svg.append("circle")
	.attr("class", "graticule-outline")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("r", projection.scale())

	d3.json("readme-world-110m.json", function(error, world) {
	var countries = topojson.object(world, world.objects.countries).geometries,
	i = -1,
	n = countries.length;

	var country = svg.selectAll(".country")
	.data(countries)
	.enter()
	.insert("path", ".graticule")
	.attr("class", "country")
	.attr("d", path)

	var cities = createCities();
	var cityPoints = svg.append("g").attr("class", "points")
	.selectAll("path").data(cities)
	.enter().append("path")
	.attr("class", "cityPoint")
	.attr("d", path);

	svg.append("g")
	.attr("class", "label_background")
	.selectAll("rect").data(cities)
	.enter().append("rect")
	.attr("class", "label")
	.attr({x: 0, y: -11, height: 12})
	.attr("width", function(d,i) { return i === 0 ? 40 : 69;})
	.style("fill", "yellow")
	.style("opacity", 0.5);

	svg.append("g").attr("class","labels")
	.selectAll("text").data(cities)
	.enter().append("text")
	.attr("class", "label")
	.attr("text-anchor", "start")
	.text(function(d) { return d.properties.name })

	position_labels();
	debugger;
	rotateGlobe();
	// shrinkGlobe();

	function createCities() {
	var cities = [
	{ "type": "Feature", "properties": { "name": "Munich" },
	"geometry": { "type": "Point", "coordinates": [ 11.581981, 48.135125 ] } },
	{ "type": "Feature", "properties": { "name": "San Antonio" },
	"geometry": { "type": "Point", "coordinates": [ -98.5, 29.4167 ] } },
	{ "type": "Feature", "properties": { "name": "Melbourne" },
	"geometry": { "type": "Point", "coordinates": [ 144.963056, -37.813611, ] } }
	];
	return cities;
	}

	function position_labels() {
	var centerPos = projection.invert([width/2,height/2]);
	var arc = d3.geo.greatArc();

	svg.selectAll(".label")
	.attr("transform", function(d) {
	var loc = projection(d.geometry.coordinates),
	x = loc[0],
	y = loc[1];
	var offset = 5;
	return "translate(" + (x+offset) + "," + (y-2) + ")"
	})
	.style("display",function(d) {
	var d = arc.distance({source: d.geometry.coordinates, target: centerPos});
	return (d > 1.57) ? 'none' : 'inline';
	});
	}

	function rotateGlobe() {
	d3.timer(function() {
	var dt = Date.now() - time;
	projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
	redraw();
	});
	}

	function shrinkGlobe() {
	redrawTransition(2500);
	// projection.scale(200);
	// redrawTransition(2500);
	}

	function redraw() {
	country.attr("d", path);
	graticuleLine.attr("d", path);
	cityPoints.attr("d", path);
	position_labels();
	}

	function redrawTransition(mSeconds) {
	projection.scale(50);

	ocean.transition().duration(mSeconds).attr("d", path);
	country.transition().duration(mSeconds).attr("d", path);
	graticuleLine.transition().duration(mSeconds).attr("d", path);
	cityPoints.attr("d", path);
	position_labels();
	}
	});
	</script>