2

I'm trying to convert a shapefile to GeoJSON and then to TopoJSON as described in Let's Make a Map. Somewhere along the chain, something gets corrupted and my resulting image looks like below: Corrupt VT map

My workflow is as follows:

  1. Download shapefile from: http://vcgi.vermont.gov/warehouse/search_tools - I am working with the Master Town Boundary data, specifically, the "Boundary_BNDHASH_region_towns.shp" file.

  2. Convert shapefile to GeoJSON

    ogr2ogr -f GeoJSON vt_towns.json Boundary_BNDHASH_region_towns.shp

  3. Convert GeoJSON to TopoJSON

    topojson -p TOWNNAME -p CNTY -o vt.json vt_towns.json

  4. Plug into basic template with some minor modifications to Mike Bostock's example

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

    var width = 960,
        height = 1160;

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

    var projection = d3.geo.transverseMercator()
            .rotate([72.57, -44.20])
            .translate([175,185])
            .scale([100]);

    // Define path generator
    var path = d3.geo.path()
        .projection(projection);

    d3.json("vt.json", function(error, vt) {

        var vermont = topojson.feature(vt, vt.objects.vt_towns);

        svg.append("path")
            .datum(vermont)
            .attr("d", path);

    });

</script>

This is not my first d3 map (it's my second!) but I am very much at a loss as to what is going wrong. My best guess is that it has something to do with the unzipped dataset containing many shapefiles and their accompanying files.

Matt Parrilla
  • 3,171
  • 6
  • 35
  • 54
  • 2
    For starters, add `.attr("fill", "none").attr("stroke", "#000")` to the path you're creating. That'll either fix the problem or at least give you a better sense of what's wrong. – meetamit Jun 04 '13 at 18:50
  • 1
    first, I would say, for good measure, place the shapefile and associated supporting files (prj, dbf, etc..) in their own directory. Second, could you link to the example you are referencing. My best guess is that it has to do with the projection and the way you are re-projecting using d3. – rysloan Jun 04 '13 at 19:07
  • Here's the link to the example http://bost.ocks.org/mike/map/#converting-data – Matt Parrilla Jun 04 '13 at 21:32
  • Moving the files into their own directory changed the resulting image a bit but it's still a large black box. My previously successful d3 map was also a map of Vermont, though from a different source. – Matt Parrilla Jun 04 '13 at 21:35

1 Answers1

5

It seems that your file uses the gridded coordinate system, use the option -t_srs EPSG:4326 to get latitude and longitude:

ogr2ogr -f GeoJSON -t_srs EPSG:4326 vt_towns.json Boundary_BNDHASH_region_towns.shp

And then continue with your workflow.

Pablo Navarro
  • 8,244
  • 2
  • 43
  • 52
  • Thank you Pablo! Where can I learn about that stuff? Where, for instance, did you look for that information and how can I know that it's something I should be looking for? I'd welcome any good resources you've got. – Matt Parrilla Jun 05 '13 at 13:28
  • I had the same problem two weeks ago. I saw that the GeoJSON file had numbers that didn't correspond to latitude and longitude. The tutorial Let's Make a Map mention the command line option. I imagine that you can learn more in the GDAL site: http://www.gdal.org/ – Pablo Navarro Jun 05 '13 at 15:22
  • 1
    @Pablo: so you saw in the json that the coordinates values wheres not such `-180 < x < +180`. Nice trick. – Hugolpz Jul 01 '13 at 18:23
  • @PabloNavarro + @Matt_Parrilla: Where do you find `EPSG:4326` ? – Hugolpz Jul 01 '13 at 18:24
  • 1
    Basically, you take the file back to the standard ([`EPSG:4326` aka `WGS 84`](http://spatialreference.org/ref/epsg/4329/)) in which D3js expects its input. = nice. – Hugolpz Jul 01 '13 at 18:32