I am attempting to render SVG and attach it to a div with id="map". I can do this successfully with GeoJson which I acquired from this tutorial: http://maptimeboston.github.io/d3-maptime/#/1


var neighborhoods_json = {
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "properties": { "Name": "Roslindale", "density": 5.5800 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.1259, 42.2720 ], [ -71.1257, 42.2723 ], [ -71.1256, 42.2724 ] etc...

I am rendering this using the following code:

var width = 960, height = 720;
var colors = d3.scale.category20();

var svg = d3.select('#map').append('svg')
  .attr('width', width).attr('height', height);

var albersProjection = d3.geo.albers()
  .scale(190000).rotate([71.057,0]).center([0, 42.313])
  .translate([width/2, height/2]);

var geoPath = d3.geo.path().projection(albersProjection);

  .attr('fill', function(d, i) {
  return colors(i);})
  .attr('d', geoPath);

This works great, as Boston is in the USA and Albers is an appropriate choice of projection.

The data which I need to render, however, is a simple movie theater traced over a location in Montreal, Canada using QGIS ( http://imgur.com/Dddkci2 ). I saved the layer as GeoJson using a setting of EPSG:4326, WGS 84. This results in the following file being added to my project:

var theater_json = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":     "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "id": 1, "d3Css": "l0r0" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.433681281940878, 45.445198056579976 ], [ -73.433681281940878, 45.445201593863992 ], [ -73.433916566065932, 45.445339547768 ], etc...

I am unable to render this in my project. The svg is appended, but regardless of whether I choose to append it as 'path' or 'polygon', the segments are all 0x0 and no visualization is created. I am confused whether or not a projection should be used, as I have seen suggestions of utilizing a projection of "null" in case the data was already outputted with a projection from QGIS. I have also seen suggestions that Canadian locations should use the mercator projection. In any case, here is how the code currently stands:

var svg2 = d3.select('#map').append('svg')
  .attr('width', width).attr('height', height);

var mercProjection = d3.geo.mercator();
var theaterPath = d3.geo.path().projection(mercProjection);

  .attr('fill', function(d, i) {
    return colors(i);})
  .attr('d', theaterPath);

Regardless of whether I use mercator, null, or any other variety of projection (stereographic, azimuthal equidistant, azimuthal equal area), I am never able to render any visualization. The paths/polygons, however, are still being created with segments of 0x0 in every case. Such an observation seems to suggest that the wrong projection is being chosen, as I observe the same behaviour when I choose the wrong projection for the Boston data.


2 Answers 2


Adjust the projection's scale since you're trying to show a small area.

Here's a polygon around Montreal: https://gist.github.com/anonymous/302378c7c02cff2450231a77068c5870

Here's code to draw it with d3: https://bl.ocks.org/swingley/9441b02dd565b6caa3b9f388cbd077bb

The relevant JS for defining the projection:

var mercator = d3.geo.mercator()
  .center([ -73.6, 45.5 ])
  .translate([ w * 0.5, h * 0.6 ])
  .scale([ w * 128 ]);
  • You, sir, have gifted me with a golden egg. I can't thank you enough. Commented May 13, 2016 at 20:08

In case anyone is curious about what projection I ended up using for the data I was working with, it's this:

var mercator = d3.geo.mercator()
  .center([ -73.438, 45.447 ])
  .translate([ width * 0.1, height * 0.2 ])
  .scale([ 8000000 ]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.