s.matthew.english s.matthew.english - 2 months ago 23
JSON Question

render NUTS data to a map in a browser with d3.js

I'm using the Nomenclature of Units for Territorial Statistics (NUTS) data of national subregions (i.e. states/departments, administrative regions smaller than nations but bigger than cities). I've taken them from the official website as Shapefiles.

Next, I converted them to GeoJSON using the following command:

ogr2ogr -f GeoJSON europe_admin_sub_units.json NUTS_RG_01M_2013.shp


Now what I want to do is simple render this in the browser to get a sense of what it looks like.

I've tried this simple script but it didn't work:

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

/* CSS goes here. */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
height = 1160;

var projection = d3.geo.mercator()
.scale(500)
.translate([width / 2, height / 2]);

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

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

d3.json("data.json", function(error, uk) {
svg.append("path")
.attr("d", path);
});

</script>


However, I don't understand why it didn't work.

There were no errors in the console of my browser. I'm using Chrome.

Here is the data I'm using, in essence though it just looks like this:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NUTS_ID": "AT", "STAT_LEVL_": 0, "SHAPE_AREA": 10.0385472864, "SHAPE_LEN": 27.774664036600001 }, "geometry": { "type": "Polygon", "coordinates":

Answer

A few things:

First, your GeoJSON file is HUGE. Rendering this in a browser is going to be very slow. That may not be an issue if you just want to take a look at the resulting shapes, but otherwise you'll need to simplify it. This is easy enough with ogr2ogr -simplify.

Second, path is a function, so you'll need to call it with some geographical features to see anything.

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md

d3.json("data.json", function(error, uk) {
  svg.append("path")
      .attr("d", path(uk));
});

... will get you something, but I'm not sure if it is what you are looking for.

Also, if you just want to see the shapes, you could use QGIS (http://www.qgis.org/en/site/), which is free and great for previewing and manipulating shape files.