1

I'm trying to adapt Mike Bostock's "Let's Make a Map" tutorial (https://bost.ocks.org/mike/map/) to my own dataset of real estate parcels, but when I try to render it I get this: Imgur

I started with a Shapefile, and turned it into .json by adapating the code in the tutorial:

ogr2ogr \
  -f GeoJSON \
  parcels.json \
  Parcels_Clipped.shp

Then I converted it with this:

topojson \
    -o parcels2.json \
    -- \
parcels.json

In my d3.js script, I imported it with:

queue()
        .defer(d3.json, 'parcel2s.json')
        .await(drawMap);

And here's my drawMap() function:

function drawMap( error, parcels ) {

    var width = 600,
        height = 600;

    var projection = d3.geo.albers()
        .center([0, 40.0092216])
        .rotate([-105.2047471, 0])
        .parallels([39.71666666666667, 40.78333333333333])
        .scale(6000)
     //   .fitSize([600,600]);
        .translate([width / 2, height / 2]);

    var path = d3.geo.path()
        .projection(projection)
        .pointRadius(2);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

  svg.append("path")
        .datum(topojson.feature(parcels, parcels.objects.parcels))
        .attr("d", d3.geo.path().projection(d3.geo.mercator()))
        .attr("class", "parcel");
}

I'm not getting any errors, and at least I'm getting something as output, but as you can see from the posted image the polygons are all over the place. They should show real estate parcels.

David Rea
  • 246
  • 2
  • 12
  • I can't see your shape file - but it is projected (it is not comprised of unprojected, 3D lat long points but rather Cartesian x,y values). D3 geoprojections project unprojected data (they don't re-project already projected data). The prj file should be able to show that the data is projected but can also be used to unproject the data as well. See [this](https://stackoverflow.com/a/42430876/7106086) answer for some potential solutions. – Andrew Reid Sep 18 '19 at 15:41
  • That worked! Thanks a ton. – David Rea Sep 18 '19 at 16:39
  • The only thing that's not working is that my map is upside down, and .reflectY(true) makes it disappear completely. By inspecting elements I can see that the first coordinate value goes from 135 (without inversion) to -280000 (with inversion). UPDATE: Nevermind, I just had to specify the inversion *before* the fitSize. – David Rea Sep 18 '19 at 16:51

0 Answers0