Skip to content

Instantly share code, notes, and snippets.

@jthomassie

jthomassie/index.html

Last active August 29, 2015 13:56
Show Gist options
  • Save jthomassie/9229878 to your computer and use it in GitHub Desktop.
Save jthomassie/9229878 to your computer and use it in GitHub Desktop.
Download ZIP
d3 World map I
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #444;
stroke-width: 0.6;
stroke-opacity: 0.4;
}
.edge {
fill: none;
stroke: #444;
stroke-width: 0.8;
stroke-opacity: 0.5;
}
.land {
fill: #444;
fill-opacity: 0.6;
stroke: #444;
stroke-opacity: 0.7;
stroke-width: 1.5;
}
.countries path {
fill: #ddd;
fill-opacity: 0.4;
stroke: #444;
stroke-linejoin: round;
stroke-width: 0.4;
stroke-opacity: 0.2;
}
.countries path:hover {
fill-opacity: 0.6;
stroke-width: 1.1;
stroke-opacity: 0.5;
}
.labels {
font: 12px sans-serif;
fill: #444;
}
.point{
fill: #eee;
stroke: #444;
stroke-width: 1;
stroke-opacity: 1;
}
.noclick {
pointer-events:none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 958,
height = 498;
var projection = d3.geo.orthographic()
.scale(245)
.translate([width/2, height/2])
.precision(0.1)
.rotate([52.8, -49.6])
.clipAngle(90)
.clipExtent([[1, 1], [width - 1, height - 1]])
// scales for fading/sizing labels/points
var opacityScale = d3.scale.linear()
.domain([200, 150])
.range([1,0]);
var ptSizeScale = d3.scale.linear()
.domain([500, 150])
.range([12,7]);
var path = d3.geo.path().projection(projection).pointRadius(2);
var graticule = d3.geo.graticule();
d3.select(window)
.on("mousemove", mouseMove)
.on("mouseup", mouseUp);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.on("mousedown", mouseDown)
.call(d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([50,500])
.on("zoom", function() {
reZoom();
})
);
// queue for loading topojson and places data
queue()
.defer(d3.json, "world-110m.json")
.defer(d3.json, "world-places.json")
.await(ready);
function ready(error, world, places) {
// graticule
svg.append("path")
.datum(graticule)
.attr("class", "graticule noclick")
.attr("d", path);
// land shape
svg.append("path")
.datum(topojson.object(world, world.objects.land))
.attr("class", "land noclick")
.attr("d", path);
// country shapes
svg.append("g").attr("class", "countries")
.selectAll("path")
.data(topojson.object(world, world.objects.countries).geometries)
.enter().append("path")
.attr("class", "countries")
.attr("d", path)
.on("mouseover", function(d) {
console.log("country id: " + d.id);
});
// edge sphere
svg.append("path")
.datum({type: "Sphere"})
.attr("class", "edge noclick")
.attr("d", path);
// place points
svg.append("g").attr("class","points noclick")
.selectAll("text")
.data(places.features)
.enter().append("path")
.attr("class", "point")
.attr("d", path);
// place labels
svg.append("g").attr("class","labels noclick")
.selectAll("text")
.data(places.features)
.enter().append("text")
.attr("class", "label")
.text(function(d) {
return d.properties.name;
});
reDraw();
}
function positionLabels() {
var centerPos = projection.invert([width/2,height/2]);
var arc = d3.geo.greatArc();
var s = projection.scale();
// labels
svg.selectAll(".label")
.attr("text-anchor",function(d) {
var x = projection(d.geometry.coordinates)[0];
if (x < (width/2) - 20) {
return "end";
} else if (x < (width/2) + 20) {
return "middle";
} else {
return "start";
}
})
.attr("transform", function(d) {
var loc = projection(d.geometry.coordinates),
x = loc[0],
y = loc[1],
xoffset = 6,
yoffset = -3;
if (x < (width/2)) {
xoffset = -6;
}
if (x < (width/2) - 20) {
yoffset = -1;
} else if (x < (width/2) + 20) {
yoffset = -6;
} else {
yoffset = -1;
}
return "translate(" + (x + xoffset) + "," + (y + yoffset) + ")";
})
.style("opacity", function() {
return opacityScale(s);
})
.style("font-size", function() {
return ptSizeScale(s);
})
.style("display",function(d) {
var dist = arc.distance({source: d.geometry.coordinates, target: centerPos});
if (dist > 1.57) {
return 'none';
} else {
return 'inline';
}
});
// points
svg.selectAll(".point")
.style("opacity", function() {
return opacityScale(s);
});
}
function reDraw() {
svg.selectAll("path").attr("d", path);
positionLabels();
}
function reZoom() {
if (d3.event) { projection.scale(d3.event.scale); }
svg.selectAll("*").attr("d", path);
positionLabels();
}
// window mousemove
function mouseMove() {
if (m0) {
// limit vertical rotation between 55 & -55
var m1 = [d3.event.pageX, d3.event.pageY],
o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
if (o1[1] > 55) {
o1[1] = 55;
}
if (o1[1] < -55) {
o1[1] = -55;
}
projection.rotate(o1);
reDraw();
}
}
// window mouseup
function mouseUp() {
if (m0) {
mouseMove();
m0 = null;
}
}
// svg mousedown
var m0, o0;
function mouseDown() {
m0 = [d3.event.pageX, d3.event.pageY];
o0 = projection.rotate();
d3.event.preventDefault();
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
world-110m.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
world-places.json
{"type": "FeatureCollection","features": [
{ "type": "Feature", "properties": { "labelrank": 1, "name": "San Francisco", "pop_max": 3450000, "geonameid": 5391959.0 }, "geometry": { "type": "Point", "coordinates": [ -122.417168773552248, 37.769195629687431 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Denver", "pop_max": 2313000, "geonameid": 5419384.0 }, "geometry": { "type": "Point", "coordinates": [ -104.985961810968206, 39.741133906965501 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Houston", "pop_max": 4459000, "geonameid": 4699066.0 }, "geometry": { "type": "Point", "coordinates": [ -95.341925149145993, 29.821920243188856 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Miami", "pop_max": 5585000, "geonameid": 4164138.0 }, "geometry": { "type": "Point", "coordinates": [ -80.226051939450031, 25.789556555021534 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Atlanta", "pop_max": 4506000, "geonameid": 4180439.0 }, "geometry": { "type": "Point", "coordinates": [ -84.40189524187565, 33.831959712605851 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Chicago", "pop_max": 8990000, "geonameid": 4887398.0 }, "geometry": { "type": "Point", "coordinates": [ -87.752000832709314, 41.831936519278429 ] } },
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Caracas", "pop_max": 2985000, "geonameid": 3646738.0 }, "geometry": { "type": "Point", "coordinates": [ -66.918983051050418, 10.502944413033333 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Kiev", "pop_max": 2709000, "geonameid": 703448.0 }, "geometry": { "type": "Point", "coordinates": [ 30.514682110472165, 50.435313187607221 ] } },
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Dubai", "pop_max": 1379000, "geonameid": 292223.0 }, "geometry": { "type": "Point", "coordinates": [ 55.278028464737872, 25.231942012376066 ] } },
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Tashkent", "pop_max": 2184000, "geonameid": 1512569.0 }, "geometry": { "type": "Point", "coordinates": [ 69.292986960887788, 41.313647741607213 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Madrid", "pop_max": 5567000, "geonameid": 3675707.0 }, "geometry": { "type": "Point", "coordinates": [ -3.685297544612524, 40.401972123113808 ] } },
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Geneva", "pop_max": 1240000, "geonameid": 2660646.0 }, "geometry": { "type": "Point", "coordinates": [ 6.140028034091699, 46.210007547076259 ] } },
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Stockholm", "pop_max": 1264000, "geonameid": 2673730.0 }, "geometry": { "type": "Point", "coordinates": [ 18.095388874180912, 59.35270581286585 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Bangkok", "pop_max": 6704000, "geonameid": 1609350.0 }, "geometry": { "type": "Point", "coordinates": [ 100.51469879369489, 13.751945064087977 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Lima", "pop_max": 8012000, "geonameid": 3936456.0 }, "geometry": { "type": "Point", "coordinates": [ -77.052007953434725, -12.046066817525571 ] } },
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Dakar", "pop_max": 2604000, "geonameid": 2253354.0 }, "geometry": { "type": "Point", "coordinates": [ -17.475075987050559, 14.717777583623274 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Johannesburg", "pop_max": 3435000, "geonameid": 993800.0 }, "geometry": { "type": "Point", "coordinates": [ 28.028063865019476, -26.16809888138414 ] } },
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Amsterdam", "pop_max": 1031000, "geonameid": 2759794.0 }, "geometry": { "type": "Point", "coordinates": [ 4.914694317400972, 52.351914546664432 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Casablanca", "pop_max": 3181000, "geonameid": 2553604.0 }, "geometry": { "type": "Point", "coordinates": [ -7.618313291698712, 33.601922074258482 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Seoul", "pop_max": 9796000, "geonameid": 1835848.0 }, "geometry": { "type": "Point", "coordinates": [ 126.997785138201948, 37.568294958388947 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Manila", "pop_max": 11100000, "geonameid": 1701668.0 }, "geometry": { "type": "Point", "coordinates": [ 120.980271303542395, 14.606104813440538 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Monterrey", "pop_max": 3712000, "geonameid": 3995465.0 }, "geometry": { "type": "Point", "coordinates": [ -100.331930642329951, 25.671940995125283 ] } },
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Auckland", "pop_max": 1245000, "geonameid": 2193733.0 }, "geometry": { "type": "Point", "coordinates": [ 174.763034975632536, -36.84806714314567 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Berlin", "pop_max": 3406000, "geonameid": 2950159.0 }, "geometry": { "type": "Point", "coordinates": [ 13.399602764700546, 52.523764522251156 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Urumqi", "pop_max": 2151000, "geonameid": 1529102.0 }, "geometry": { "type": "Point", "coordinates": [ 87.573059796247264, 43.806958085041799 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Chengdu", "pop_max": 4123000, "geonameid": 1815286.0 }, "geometry": { "type": "Point", "coordinates": [ 104.068073630948732, 30.671945877957796 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Osaka", "pop_max": 11294000, "geonameid": 1853909.0 }, "geometry": { "type": "Point", "coordinates": [ 135.458198956595197, 34.75198107491417 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Kinshasa", "pop_max": 7843000, "geonameid": 2314302.0 }, "geometry": { "type": "Point", "coordinates": [ 15.313026023171744, -4.327778243275986 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "New Delhi", "pop_max": 317797, "geonameid": 1261481.0 }, "geometry": { "type": "Point", "coordinates": [ 77.199980020053033, 28.600023009245433 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Bangalore", "pop_max": 6787000, "geonameid": 1277333.0 }, "geometry": { "type": "Point", "coordinates": [ 77.558063865217548, 12.971940995074419 ] } },
{ "type": "Feature", "properties": { "labelrank": 6, "name": "Athens", "pop_max": 3242000, "geonameid": 264371.0 }, "geometry": { "type": "Point", "coordinates": [ 23.731375225679358, 37.985272090552257 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Baghdad", "pop_max": 5054000, "geonameid": 98182.0 }, "geometry": { "type": "Point", "coordinates": [ 44.391922914564134, 33.340594356158647 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Addis Ababa", "pop_max": 3100000, "geonameid": 344979.0 }, "geometry": { "type": "Point", "coordinates": [ 38.698058575348682, 9.035256221295754 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Tehran", "pop_max": 7873000, "geonameid": 112931.0 }, "geometry": { "type": "Point", "coordinates": [ 51.422398175008993, 35.673888627001304 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Vancouver", "pop_max": 2313328, "geonameid": 6173331.0 }, "geometry": { "type": "Point", "coordinates": [ -123.123590076394294, 49.275362442711753 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Toronto", "pop_max": 5213000, "geonameid": 6167865.0 }, "geometry": { "type": "Point", "coordinates": [ -79.421966652988431, 43.701925736408441 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Buenos Aires", "pop_max": 12795000, "geonameid": 3435910.0 }, "geometry": { "type": "Point", "coordinates": [ -58.399477232331435, -34.600555749907414 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Kabul", "pop_max": 3277000, "geonameid": 1138958.0 }, "geometry": { "type": "Point", "coordinates": [ 69.181314190705052, 34.518636144900313 ] } },
{ "type": "Feature", "properties": { "labelrank": 7, "name": "Vienna", "pop_max": 2400000, "geonameid": 2761369.0 }, "geometry": { "type": "Point", "coordinates": [ 16.364693096743736, 48.201961136816863 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Melbourne", "pop_max": 4170000, "geonameid": 2158177.0 }, "geometry": { "type": "Point", "coordinates": [ 144.973070375904058, -37.818085453696312 ] } },
{ "type": "Feature", "properties": { "labelrank": 8, "name": "Taipei", "pop_max": 6900273, "geonameid": 1668341.0 }, "geometry": { "type": "Point", "coordinates": [ 121.568333333333001, 25.035833333333301 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Los Angeles", "pop_max": 12500000, "geonameid": 5368361.0 }, "geometry": { "type": "Point", "coordinates": [ -118.181926369940413, 33.991924108765431 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Washington, D.C.", "pop_max": 4338000, "geonameid": 4140963.0 }, "geometry": { "type": "Point", "coordinates": [ -77.011364439437159, 38.901495235087054 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "New York", "pop_max": 19040000, "geonameid": 5128581.0 }, "geometry": { "type": "Point", "coordinates": [ -73.981962787406815, 40.75192492259464 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "London", "pop_max": 8567000, "geonameid": 2643743.0 }, "geometry": { "type": "Point", "coordinates": [ -0.118667702475932, 51.5019405883275 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Istanbul", "pop_max": 10061000, "geonameid": 745044.0 }, "geometry": { "type": "Point", "coordinates": [ 29.008055727002613, 41.106942012439788 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Riyadh", "pop_max": 4465000, "geonameid": 108410.0 }, "geometry": { "type": "Point", "coordinates": [ 46.770795798688255, 24.642779007816443 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Cape Town", "pop_max": 3215000, "geonameid": 3369157.0 }, "geometry": { "type": "Point", "coordinates": [ 18.433042299226031, -33.918065108628753 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Moscow", "pop_max": 10452000, "geonameid": 524901.0 }, "geometry": { "type": "Point", "coordinates": [ 37.613576967271399, 55.754109981248178 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Mexico City", "pop_max": 19028000, "geonameid": 3530597.0 }, "geometry": { "type": "Point", "coordinates": [ -99.132934060293906, 19.444388301415472 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Lagos", "pop_max": 9466000, "geonameid": 735497.0 }, "geometry": { "type": "Point", "coordinates": [ 3.389585212598433, 6.445207512093191 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Rome", "pop_max": 3339000, "geonameid": 4219762.0 }, "geometry": { "type": "Point", "coordinates": [ 12.481312562873995, 41.897901485098942 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Beijing", "pop_max": 11106000, "geonameid": 1816670.0 }, "geometry": { "type": "Point", "coordinates": [ 116.386339825659434, 39.930838089909059 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Nairobi", "pop_max": 3010000, "geonameid": 184745.0 }, "geometry": { "type": "Point", "coordinates": [ 36.814711000471448, -1.281400883237779 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Jakarta", "pop_max": 9125000, "geonameid": 1642911.0 }, "geometry": { "type": "Point", "coordinates": [ 106.827491762470117, -6.172471846798885 ] } },
{ "type": "Feature", "properties": { "labelrank": 5, "name": "Bogota", "pop_max": 7772000, "geonameid": 3688689.0 }, "geometry": { "type": "Point", "coordinates": [ -74.085289813774409, 4.598369421147822 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Cairo", "pop_max": 11893000, "geonameid": 360630.0 }, "geometry": { "type": "Point", "coordinates": [ 31.248022361126118, 30.051906205103705 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Shanghai", "pop_max": 14987000, "geonameid": 1796236.0 }, "geometry": { "type": "Point", "coordinates": [ 121.434558819820154, 31.218398311228327 ] } },
{ "type": "Feature", "properties": { "labelrank": 2, "name": "Tokyo", "pop_max": 35676000, "geonameid": 1850147.0 }, "geometry": { "type": "Point", "coordinates": [ 139.749461570544668, 35.686962764371174 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Mumbai", "pop_max": 18978000, "geonameid": 1275339.0 }, "geometry": { "type": "Point", "coordinates": [ 72.855043438766472, 19.018936234356602 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Paris", "pop_max": 9904000, "geonameid": 6942553.0 }, "geometry": { "type": "Point", "coordinates": [ 2.33138946713035, 48.868638789814611 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Santiago", "pop_max": 5720000, "geonameid": 3449741.0 }, "geometry": { "type": "Point", "coordinates": [ -70.668986713174831, -33.448067956934096 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Kolkata", "pop_max": 14787000, "geonameid": 1275004.0 }, "geometry": { "type": "Point", "coordinates": [ 88.32272979950551, 22.496915156896421 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Rio de Janeiro", "pop_max": 11748000, "geonameid": 3451190.0 }, "geometry": { "type": "Point", "coordinates": [ -43.226966652843657, -22.923077315615956 ] } },
{ "type": "Feature", "properties": { "labelrank": 1, "name": "Sao Paulo", "pop_max": 18845000, "geonameid": 3448439.0 }, "geometry": { "type": "Point", "coordinates": [ -46.626965839055231, -23.556733728378958 ] } },
{ "type": "Feature", "properties": { "labelrank": 3, "name": "Sydney", "pop_max": 4630000, "geonameid": 2147714.0 }, "geometry": { "type": "Point", "coordinates": [ 151.183233950147496, -33.918065108628753 ] } },
{ "type": "Feature", "properties": { "labelrank": 0, "name": "Singapore", "pop_max": 5183700, "geonameid": 1880252.0 }, "geometry": { "type": "Point", "coordinates": [ 103.853874819099019, 1.294979325105942 ] } },
{ "type": "Feature", "properties": { "labelrank": 0, "name": "Hong Kong", "pop_max": 7206000, "geonameid": 1819729.0 }, "geometry": { "type": "Point", "coordinates": [ 114.183063458463039, 22.30692675357551 ] } }
]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment