Just a little background to complement the question. GeoJSON files contain the description of the geometry of places on Earth, usually as polygons or collection of polygons, where each vertex is a pair of (longitude, latitude)
. To create a map in the screen, we need to compute a correspondence between (longitude, latitude)
pairs and points in the screen (column n⁰x, line n⁰y)
. This correspondence is a projection. D3 includes several projections.
In (1), the projection-on-earth is computed using ogr2ogr
, but you still need to set the width and height with topojson to adjust the viewport (see http://bl.ocks.org/mbostock/5557726) for an example.
In (2), you want to use topojson
to generate a TopoJSON file that has the projection already computed, using the original shapefile directly. To do this, you need to set which projection you want to use, as well as some parameters (width and height):
topojson --width 960 --height 800 \
--projection 'd3.geo.orthographic' \
-o output.json -- input.shp
If you do this, the TopoJSON file (output.json
) will have the projection already computed, so you don't need to compute it again when setting the geographic path generator:
var path = d3.geo.path()
.projection(null);
In option (3), you compute the projection when rendering via D3.js. To do this, you need a GeoJSON or TopoJSON files, and configure the projection.
// Assuming GeoJSON
d3.json('output.json', function(error, geodata) {
// Create the SVG, etc...
// Create the projection, configure the scale, translation and rotation
var projection = d3.geo.mercator()
.translate([width / 2, height / 2]);
// Create the path generator
var path = d3.geo.path()
.projection(projection);
// Generate the shapes
svg.selectAll('path.feature').data(geodata.features)
.enter().append('path')
.attr('class', 'feature')
.attr('d', path);
});
Regards,