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

16

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 del 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 ], 
...

Pero cuando intento usar el archivo JSON en d3 (http://d3js.org/) para dibujar polígonos SVG, el resultado es incorrecto. Dado que los archivos shp se muestran correctamente en QGIS, creo que tiene que haber algún problema con la forma en que uso ogr2ogr . El SVG que recibí no está completamente equivocado, pero parece haber un detalle que no puedo encontrar. Parece que se ha volcado y se ha distorsionado de alguna manera 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 traté de convertir el archivo shp usando Qgis y myGeodata (http://converter.mygeodata.eu/vector). Pero ninguno de ellos funciona como debería.

Soy muy nuevo en todo este asunto de la cartografía. Así que me encantaría recibir un consejo.

¡Muchas gracias!

    
pregunta Flavio 04.11.2012 - 21:54

3 respuestas

7

De acuerdo, jugar con diferentes proyecciones, escalas y traducciones en d3 resolvió mi problema. Dado que la proyección predeterminada al usar d3.geo.path () es albersUsa, hubo una buena razón para probar otras proyecciones. Supongo que el problema podría haberse resuelto más fácilmente utilizando la especificación correcta de EPSG al convertir el archivo de formas, pero estos números oscuros superaron mi conocimiento.

Entonces, lo que hice al final es simplemente usar una proyección de mercator y llevarla a la 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 , usé mapshaper .

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

    
respondido por el Flavio 05.11.2012 - 17:21
4

¿ha intentado especificar el código EPSG correcto para su shapefile y salida GeoJSON? Por ejemplo:

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

    
respondido por el dmci 05.11.2012 - 14:53
3

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 960xsomething.

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

Si desea usar la proyección d3.geo.albers (mejor para mapas de 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);
    
respondido por el ahinrichs 06.11.2012 - 00:52

Lea otras preguntas en las etiquetas