2

I've been trying to draw maps using the d3.js library in a manner similar to that below.

<script>
        //Width and height
        var w = 500;
        var h = 300;

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

        //Create SVG element
        var svg = d3.select("body").append("svg").attr({width:w, height: h});

        //Load in GeoJSON data
        d3.json("us.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path)
               .attr("fill","#666666");

        });

    </script>

All this stuff works absolutely FINE for the tutorial's US maps, the geojson he uses is spot on for this d3 library.

The steps I took to get my own dataset as I wanted UK's regional maps.

  1. Download shape files from Ordnance Survey website
  2. Attempt at converting files to geojson using sites such as mapshaper.org (worked, displays on their site
  3. Using my own geojson files to draw the map.

Something draws, my file is in the right format but the whole map is drawn based on my fill colour. It's almost as if the coordinates are not correct. Naturally they won't be in the correct format.

Here is my shapefile open in mapshaper : http://i.imgur.com/lz40BDn.png

The GeoJson that works : filedropper.com/us The GeoJson that doesn't work : filedropper.com/regionsgeo

I've attempted at using json parsers to compare the structures of both and they do seem very similar. With the exception that there are many more extra features on the regions json file but that seems to be something that mapshaper generates.

Does anyone have an idea why map isn't rendering as it should? Could it be something to do with the coordinates system my json is using compared to that required by d3.js? Have I missed some steps that I should have undertaken to convert the shapefiles?

  • Can you post a link to the sample of the geoJSON that works and the one that doesn't? – R.K. Dec 5 '14 at 11:15
  • Edited question to reflect your request – Euphoria Dec 5 '14 at 11:20
  • GeoJSON is totally standardized, but flexible at the same time, that is it's beauty. Check out geojsonlint.com to test if you geojson is valid. – John Powell Dec 5 '14 at 11:22
  • 1
    With the level of downvoting on your question I recommend that it be revised to focus on a particular issue rather than criticism of the GeoJSON format. – PolyGeo Dec 5 '14 at 11:27
  • 1
    All I'm trying to ask is the correct process to get a shapefile from a particular source to then be able to use it in d3's cartography function. All I've done is talked about the process I've been through to get there, besides it's already downvoted now. Changing it at this point won't help me get these points back anyway. – Euphoria Dec 5 '14 at 11:29
5

UPDATE:

Your problem seems to be with your data. Here is a snippet of your file:

      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              585951.8,
              181704.9
            ],
            [
              576293.9,
              181299.8
            ],

If I'm not mistaken, those coordinates use the Ordnance Survey National Grid reference system. By default, geoJSON expects the coordinates to be WGS84(longitude, latitude). You can try converting the shape files again and making sure that the output reference system is WGS84. You can do this in QGIS by saving the file as geoJSON and selecting WGS84 as the output coordinate reference system.

The resulting geoJSON should work fine. So to answer your question, the format is correct. It's the coordinates that aren't right.

Here is the geoJSON spec for your reference next time.


I think the problem is that your code expects some attributes to be present in the geoJSON. The code has some specific assumptions about the contents of the geoJSON file. You can't just expect to replace the geoJSON in the exercise with your own file and expect it to work. It is highly unlikely that the attributes in your files would be the same, especially when they're from different sources. You wouldn't expect code written for visualizing data from one CSV to automatically work with a different CSV file without some tweaks, would you? The data has changed and so must the code. You can start by comparing the contents of the geoJSON files and checking the differences. You can do this by loading them in a text editor and comparing the contents. See what the code expects in the file and tweak it accordingly. You can also load them into QGIS and see what attributes are different. The geoJSON format only specifies how you can encode geographic data structures. The contents of the file are up to you. In much the same way that CSVs only tell you how to encode tabular data. What the column names and other content are up to the data producer.
  • So I have to manually go through a 10mb json file to make sure they match the working json files structure? (which is also not small). – Euphoria Dec 5 '14 at 11:27
  • Alright thanks for your help. I'll try get hold of QGIS. I did install it but it seemed to have installed a bunch of other stuff which quite frankly didn't seem relevant to opening shape files. So I uninstalled it, I'll have another go. – Euphoria Dec 5 '14 at 11:30
  • @Jurg Wait, now I'm confused. Were you able to convert the shapefile to geoJSON already? Only that it doesn't work with Bostock's code? – R.K. Dec 5 '14 at 11:41
  • That's right, I used mapshaper to convert it to geoJSON but for Bostock's code, I used the topojson. Since he uses the topojson file. I didn't simple place a geojson file in his code if that's what you think. It looks fine in mapshaper. I also tried other websites such as converter.mygeodata.eu. ogre.adc4gis.com doesn't work for me, it produces an error on my shapefiles. – Euphoria Dec 5 '14 at 11:46
  • Also the structure of Bostock's topojson file is hard to compare against my own. For that reason I reverted to not using his code but the code I had been following in the d3 tutorial set as in my question. I did try compare the .json files, stuff does draw but I think it's something to do with the format of the coordinates or maybe some weird encoding. I've read through other questions and I think it may be something to do with a format (can't remember the correct word). – Euphoria Dec 5 '14 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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