Fork of E. Meeks' work. An example of how to project coordinates of geodata features and then use those for d3.svg.line to take advantage of built-in line interpolators.
Improvements: minors, for code readability, dataviz display.
See also :
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>Interpolating Geodata</title> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <style> | |
| html,body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| } | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| } | |
| svg { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript"></script> | |
| <script src="../js/jquery-2.0.1.min.js"></script> | |
| <script src="../js/d3.v3.min.js"></script> | |
| <script src="../js/d3.geo.projection.v0.min.js"></script> | |
| <script src="../js/topojson.v1.min.js"></script> | |
| <script> | |
| function inter() { | |
| d3.json("./world.geojson", | |
| function(data) { createMap(data) } | |
| ); | |
| function createMap(countries) { | |
| // Settings | |
| width = 800; | |
| height = 500; | |
| projection = d3.geo.mercator() | |
| .scale(200) | |
| .translate([width / 2, height / 2]) | |
| geoPath = d3.geo.path().projection(projection); | |
| // Rounding ? | |
| roundedCountries = []; | |
| for (x in countries.features) { | |
| for (y in countries.features[x].geometry.coordinates) { | |
| if (countries.features[x].geometry.coordinates[y].length > 1) { | |
| roundedCountries.push( | |
| countries.features[x] | |
| .geometry.coordinates[y] | |
| .map(function(d) {return projection(d)} ) | |
| ) | |
| } | |
| else { | |
| roundedCountries.push( | |
| countries.features[x] | |
| .geometry.coordinates[y][0] | |
| .map(function(d) {return projection(d)}) | |
| ) | |
| } | |
| } | |
| } | |
| // Curving type: | |
| interpolateMethods = ["linear", "cardinal", "basis", "monotone", "step-before"] | |
| var n = 1; | |
| // Legend: | |
| d3.select("svg") | |
| .append("text") | |
| .attr("id", "inter") | |
| .attr("x", 40) | |
| .attr("y", 40) | |
| .style("font-size", "1.8em") | |
| .text(interpolateMethods[n]) | |
| // Map drawing | |
| d3.select("svg").selectAll("path") | |
| .data(roundedCountries) | |
| .enter() | |
| .append("path") | |
| .style("stroke-width", 1) | |
| .style("stroke", "black") | |
| .style("fill-opacity", .5) | |
| reinterpolate(); | |
| function reinterpolate() { | |
| colorScale = ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"]; | |
| if (n == 5) { | |
| n = 0; | |
| } | |
| // Legend update | |
| d3.select("#inter") | |
| .text(interpolateMethods[n]) | |
| // map update | |
| d3.select("svg").selectAll("path") | |
| .style("fill", colorScale[n]) | |
| .attr("d", d3.svg.line() | |
| .x(function(d){ return d[0]}) | |
| .y(function(d){ return d[1]}) | |
| .interpolate(interpolateMethods[n]) ); | |
| setTimeout(reinterpolate,2000); | |
| n++; | |
| } | |
| } | |
| } | |
| </script> | |
| <body onload="inter()"> | |
| <div id="map"><svg></svg></div> | |
| <footer> | |
| </footer> | |
| </body> | |
| </html> |
