Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Trying to take GIS data of the zip codes of the Bronx and turn it into a map using d3.js. But I am having trouble rendering. Could you show me proper use of d3.geo.path() ?

[ [ -73.84463693999993, 40.90475939500004 ], [ -73.84443733899991, 40.90423928800004 ], [ -73.84443555299993, 40.904234630000076 ], [ -73.84332154899994, 40.90397722300008 ],...]

These numbesr are taken from NYC zip codes map:

In fact, this question goes for any list of GIS coordinates. How do I turn it into a path? I could not convert the documentation this into code.

share|improve this question

I assume these coordinates trace out a polygon boundary? The easiest thing to do is to turn the coordinate list into GeoJSON

var geoJSON = {
    "type": "FeatureCollection",
                "coordinates":[Your list of coordinates]
                Any associated attributes

Now you create a path generator and use that create your svg for d3.

var path = d3.geo.path();
//Defaults to albersUsa Projection. You might want to set a different one
var width = 960, height = 600;
//Create the svg to render the polygon inside of
var svg ="body").append("svg")
    .attr("width", width)
    .attr("height", height);
//Bind the geoJSON the path elements in the svg
//Use the enter selection (new elements) and draw the paths using the geo path generator
//Note that when you bind new data, you will be changing existing path elements
//So you would also need to do a exit and modify existing paths
share|improve this answer

You can draw lines using decimal degrees as follow:

.datum({type: "LineString", coordinates: 
        [[-5, 40], [-5, 50], [10, 50], [10, 40], [-5, 40]] // points in decimal degrees
.attr("d", path)
.style({'fill': '#B10000', 'fill-opacity': 0.3})
.style({'stroke-width': 1, 'stroke': '#B10000', 'stroke-linejoin': 'round'});

enter image description here

share|improve this answer
See also : D3.geo : Sperical arcs rather than Line?, a bit harder, but gives a better result ! – Hugolpz Aug 21 '14 at 0:13

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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