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="//d3js.org/d3.v3.js"></script>
<script src="//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();
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);
}
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>