Designed to be viewed from bl.ocks.org - http://bl.ocks.org/ashyisme/5282701
I've added random points to this map that animate through, enter(), update() and exit() data binding from d3js. This shows how to display points on a map directly from an array of latitude/longitude points: [[137, 80], [-80, 80] ...].
This map shows the Natural Earth Admin 0 - Countries shapefile at 50m resolution. Converted to TopoJSON, only 140K gzipped. Each country is identified by its ISO 3166-1 numeric code.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #fcfcfa; | |
| } | |
| .stroke { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 3px; | |
| } | |
| .fill { | |
| fill: #fff; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| stroke-width: .5px; | |
| stroke-opacity: .5; | |
| } | |
| .land { | |
| fill: #222; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| } | |
| .enter { | |
| fill: green; | |
| } | |
| .update { | |
| fill: #333; | |
| } | |
| .exit { | |
| fill: red; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script> | |
| function randomRange(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| var numberOfPoints = 50; | |
| var width = 960, | |
| height = 580; | |
| var color = d3.scale.category10(); | |
| var projection = d3.geo.kavrayskiy7() | |
| .scale(170) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .pointRadius(1); | |
| var graticule = d3.geo.graticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("defs").append("path") | |
| .datum({type: "Sphere"}) | |
| .attr("id", "sphere") | |
| .attr("d", path); | |
| svg.append("use") | |
| .attr("class", "stroke") | |
| .attr("xlink:href", "#sphere"); | |
| svg.append("use") | |
| .attr("class", "fill") | |
| .attr("xlink:href", "#sphere"); | |
| svg.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| var randPoints = []; | |
| for ( var i = 0; i < numberOfPoints; i++) { | |
| //randPoints[i] = {0: randomRange(-90,90).toString(), 1: randomRange(-90,90).toString() }; | |
| randPoints[i] = {type: "Point", coordinates: [randomRange(-90,90).toString(), randomRange(-90,90).toString() ]}; | |
| } | |
| // world-50m.json comse from mbostock's example: http://bl.ocks.org/mbostock/4180634 | |
| // http://bl.ocks.org/mbostock/raw/4090846/world-50m.json | |
| d3.json("/d/5282701/world-50m.json", function(error, world) { | |
| var countries = topojson.object(world, world.objects.countries).geometries, | |
| neighbors = topojson.neighbors(world.objects.countries.geometries); | |
| svg.selectAll(".country") | |
| .data(countries) | |
| .enter().insert("path", ".graticule") | |
| .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); }); | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| /* | |
| svg.selectAll(".point") | |
| .data(randPoints) | |
| .enter().append("circle") | |
| .attr("d", path) | |
| .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")";}) | |
| .attr("r", 1) | |
| .attr("class", "point"); | |
| */ | |
| update(randPoints); | |
| setInterval(function() { | |
| //randPoints = shuffle(randPoints); | |
| update(shuffle(randPoints)); | |
| }, 1500); | |
| }); | |
| function update(data) { | |
| var points = svg.selectAll("circle") | |
| .data(data, function(p) { return p.coordinates[0] + p.coordinates[1]; }); | |
| points.attr("class", "point"); | |
| points.enter().append("circle") | |
| .attr("d", path) | |
| .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")";}) | |
| .attr("r", 1) | |
| .attr("class", "point enter") | |
| .transition() | |
| .duration(1000) | |
| .attr("r", 3); | |
| //points.points(function(d) { return d; }); | |
| //points.exit().remove(); | |
| points.exit() | |
| .attr("class", "exit") | |
| .transition() | |
| .duration(750) | |
| .attr("r", 0.1) | |
| .style("fill-opacity", 1e-6) | |
| .remove(); | |
| } | |
| function shuffle(pointsArray) { | |
| /* | |
| var min = Math.floor(randomRange(0, 50)); | |
| var max = min + 50; | |
| */ | |
| var min = Math.floor(randomRange(0, Math.floor(pointsArray.length / 2))); | |
| var max = min + Math.floor(pointsArray.length / 2); | |
| for ( var i = min; i < max; i++) { | |
| pointsArray[i] = {type: "Point", coordinates: [randomRange(-180,180).toString(), randomRange(-90,90).toString() ]}; | |
| } | |
| return pointsArray; | |
| } | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
