¿Cómo crear un GeoJSON que funciona con D3?

Simplemente estoy tratando de convertir un archivo .shp a un formato geoJSON usando:

ogr2ogr -f geoJSON output.json input.shp

Después de ejecutar el comando, nada parece estar mal. Aquí hay un extracto de la salida.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 ], 
...

Pero cuando intento usar el archivo de JSON en d3 (http://d3js.org/) para dibujar polígonos SVG, el resultado es simplemente incorrecto. Dado que los archivos shp se muestran correctamente en QGIS, creo que tiene que haber algo mal con la forma en que lo uso ogr2ogr. El SVG que obtengo no está completamente equivocado, pero parece que hay un detalle que no puedo encontrar. Parece que se ha invertido y de alguna manera distorsionado en dos partes separadas.

Aquí está el javaScript que utilicé para generar el 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);

¿Alguien tiene una idea de lo que salió mal aquí? También intenté convertir el archivo shp usando Qgis y myGeodata (http://converter.mygeodata.eu/vector). Pero ninguno de los dos trabaja como debería.

Soy muy nuevo en todo esto de la cartografía. Así que estaría muy feliz de recibir algunos consejos.

¡Muchas gracias!

OK, jugar con diferentes proyecciones, escalas y traducciones en d3 resolvió mi problema. Dado que la proyección predeterminada cuando se usa d3.geo.path () es albersUsa, había buenas razones para probar otras proyecciones. Supongo que el problema podría haberse resuelto más fácilmente utilizando la especificación EPSG correcta al convertir el archivo de forma, pero estos números oscuros excedieron mi conocimiento.

Entonces, lo que hice al final fue simplemente usar una proyección de mercator y llevarla al 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);
    });

Aquí hay un enlace a los archivos de formas que utilicé y el geoJSON resultante. Para simplificar los shapefiles, que obtuve de GADM , utilicé mapshaper .

Todavía estaría interesado en una solución menos laboriosa y más flexible. Entonces, si alguien tiene una idea, ¡gracias de antemano! ¡Pero por el momento estoy feliz de poder reconocer a los 16 Bundesländer de Alemania!

¿Has intentado especificar el código EPSG correcto para tu archivo shape y salida GeoJSON? P.ej:

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

Tiene razón, para un mapa de Alemania necesita cambiar la proyección predeterminada ya que se ajusta a los datos de EE. UU. Está centrado en algún lugar de Kansas y para un mapa de tamaño 960x algo.

Los parámetros correctos, por supuesto, también dependen de las dimensiones de su mapa.

Si desea utilizar la proyección d3.geo.albers (la mejor para mapas coropleth ) aquí están mis parámetros:

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);