Map with d3.js and TopoJSON, Albers Siberia projection -
i'm trying make choropleth d3.js got stucked @ beginning. found shapefile , generated geojson , topojson files here. map uses albers-siberia projection. found projection:
projection: albers equal-area conic
- units: meters
- spheroid: krasovsky
- central meridian: 105
- standard parallel 1: 52
- standard parallel 2: 64
- reference latitude: 0
- false easting: 18500000
- false northing: 0
proj.4: +proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs
mapinfo: "albers-siberia", 9, 1001, 7, 105, 0, 64, 52, 18500000, 0.
so got code , make nothing (and freez up), what's wrong?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>choropleth</title> <script type="text/javascript" src="d3/d3.v3.js"></script> <script type="text/javascript" src="d3/queue.v1.min.js"></script> <script type="text/javascript" src="d3/topojson.v0.min.js"></script> </head> <body> <h1>my choropleth</h1> <script type="text/javascript"> var width = 960, height = 500; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var pr = d3.geo.albers() .center([105,0]) .parallels([52, 64]) .scale(1000); var path = d3.geo.path().projection(pr); d3.json("map_rus_topo.json", function(error, map) { svg.append("path") .datum(topojson.object(map, map.objects.map_rus)) .attr("d", path); }); </script> </body>
can find json files here.
, 1 more question: how can reference value of region field in my topojson file.
the first problem geojson file isn’t in degrees [longitude°, latitude°], otherwise known epsg:4326 or wgs 84. convert geojson file wgs 84, first need create projection file, albers.prj
can tell ogr source projection is.
+proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs
then, “unproject” geojson file converting wgs 84:
ogr2ogr -f geojson -s_srs albers.prj -t_srs epsg:4326 map_rus_wgs84_geo.json map_rus_geo.json
now can convert topojson in wgs 84, rather projected coordinates. i’ve taken liberty of doing simplification:
topojson -o map_rus_wgs84_topo.json -s 1e-7 -- russia=map_rus_wgs84_geo.json
the second problem projection definition in d3 incorrect. d3.geo.albers projection has default rotate , center that’s designed u.s.-centered map, in addition defining center you’ll need override default rotation. in fact, +lon_0 (central meridian) projection parameter maps projection’s rotation, not projection’s center. giving:
var projection = d3.geo.albers() .rotate([-105, 0]) .center([-10, 65]) .parallels([52, 64]) .scale(700) .translate([width / 2, height / 2]);
(i fudged center parameter put russia @ center of viewport. can compute automatically if prefer.) should see this:
it’s possible work projected (cartesian) coordinates in topojson, , define d3.geo.path null (identity) projection, i’ll leave separate question.
Comments
Post a Comment