Come creare un GeoJSON che funziona con D3?

Sto semplicemente cercando di convertire un file .shp in un formato geoJSON usando:

ogr2ogr -f geoJSON output.json input.shp

Dopo aver eseguito il comando nulla sembra essere sbagliato. Ecco un estratto da output.json

    {
    "type": "FeatureCollection",

    "features": [
    { "type": "Feature", 
    "properties": { "ID_0": 86, "ISO": "DEU", "NAME_0": "Germany", "ID_1": 1, "NAME_1": "Baden-Württemberg", "NL_NAME_1": null, "VARNAME_1": null, "TYPE_1": "Land", "ENGTYPE_1": "State" }, 
    "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.708400940398242, 47.715581894910606 ], [ 8.713716147005524, 47.701734382960055 ], 
...

Ma quando provo ad usare il file de JSON in d3 (http://d3js.org/) per disegnare poligoni SVG, l'output è semplicemente sbagliato. Dato che i file shp sono visualizzati correttamente in QGIS, penso che ci debba essere qualcosa di sbagliato nel modo in cui uso ogr2ogr. L'SVG che ottengo non è completamente sbagliato ma sembra che ci sia un dettaglio che non riesco a trovare. Sembra che sia stato capovolto e in qualche modo distorto in due parti separate.

Ecco il javaScript che ho usato per generare lo svg:

//dimensions
var w = 2000;
var h = 2000;

var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    var path = d3.geo.path();

    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

Qualcuno ha un'idea di cosa è andato storto qui? Ho anche provato a convertire il file shp usando Qgis e myGeodata (http://converter.mygeodata.eu/vector). Ma nessuno dei due funziona come dovrebbe.

Sono molto nuovo di tutto questo materiale cartografico. Quindi sarei molto felice di ricevere qualche consiglio.

Grazie mille!

OK, giocare con diverse proiezioni, scale e traduzioni in d3 ha risolto il mio problema. Poiché la proiezione predefinita quando si utilizza d3.geo.path () è albersUsa, c'erano buone ragioni per provare altre proiezioni. Suppongo che il problema avrebbe potuto essere risolto più facilmente usando le giuste specifiche EPSG durante la conversione del file di forma, ma questi numeri oscuri hanno superato le mie conoscenze.

Quindi quello che ho fatto alla fine è stato semplicemente usare una proiezione di mercatore e portarla nel svg-viewport con translate ().

   d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    //dimensions
    var w = 2000;
    var h = 2000;

    var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    //create geo.path object, set the projection to merator bring it to the svg-viewport
    var path = d3.geo.path()
        .projection(d3.geo.mercator()
        .scale(20000)
        .translate([0, 3800]));

    //draw svg lines of the boundries
    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);
    });

Ecco un link ai file di forma che ho usato e al geoJSON risultante. Per semplificare gli shapefile, che ho ottenuto da GADM , ho usato mapshaper .

Sarei comunque interessato a una soluzione meno laboriosa e più flessibile. Quindi, se qualcuno ha un'idea, grazie in anticipo! Ma per il momento sono felice di poter riconoscere i 16 Bundesländer della Germania!

hai provato a specificare il codice EPSG corretto per il tuo shapefile e l'output di GeoJSON? Per esempio:

ogr2ogr -f GeoJSON -s_srs EPSG:.... -t_srs EPSG:.... output.json input.shp

Hai ragione, per una mappa della Germania è necessario modificare la proiezione predefinita in base ai dati USA. È centrato da qualche parte nel Kansas e per una mappa di dimensioni 960xsomething.

I parametri corretti ovviamente dipendono anche dalle dimensioni della mappa.

Se vuoi usare la proiezione d3.geo.albers (migliore per le mappe coropleth ) ecco i miei parametri:

var w = 415;
var h = 555;

var albers = d3.geo.albers()
    .origin([11, 51])
    .parallels([49, 53])
    .translate([230, 290])
    .scale(4000);

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