Comment créer un GeoJSON qui fonctionne avec D3?

J'essaie simplement de convertir un fichier .shp au format geoJSON en utilisant:

ogr2ogr -f geoJSON output.json input.shp

Après avoir exécuté la commande, rien ne semble aller mal. Voici un extrait du fichier 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 ], 
...

Mais lorsque j'essaie d'utiliser le fichier de JSON dans d3 (http://d3js.org/) pour dessiner des polygones SVG, la sortie est tout simplement fausse. Étant donné que les fichiers shp s'affichent correctement dans QGIS, je pense qu'il doit y avoir un problème avec la façon dont j'utilise ogr2ogr. Le SVG que j'obtiens n'est pas complètement faux, mais il semble y avoir un détail que je ne trouve pas. Il semble qu'il ait été renversé et déformé d'une manière ou d'une autre en deux parties séparées.

Voici le javaScript que j'ai utilisé pour générer le 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);

Quelqu'un at-il une idée de ce qui s'est mal passé ici? J'ai également essayé de convertir le fichier shp en utilisant Qgis et myGeodata (http://converter.mygeodata.eu/vector). Mais ni l'un ni l'autre ne fonctionnent comme ils le devraient.

Je suis très nouveau dans ce domaine de la cartographie. Je serais donc très heureux d'obtenir des conseils.

Merci beaucoup!

OK, jouer avec différentes projections, échelles et traductions en d3 a résolu mon problème. Étant donné que la projection par défaut lors de l'utilisation de d3.geo.path () est albersUsa, il y avait de bonnes raisons d'essayer d'autres projections. Je suppose que le problème aurait pu être résolu plus facilement en utilisant la bonne spécification EPSG lors de la conversion du fichier de forme, mais ces nombres obscurs ont dépassé mes connaissances.

Donc, ce que j'ai fait à la fin, c'est simplement d'utiliser une projection de mercator et de l'introduire dans la fenêtre svg avec 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);
    });

Voici un lien vers les fichiers de forme que j'ai utilisés et le geoJSON résultant. Pour simplifier les fichiers de formes, que j'ai obtenus de GADM , j'ai utilisé mapshaper .

Je serais toujours intéressé par une solution moins laborieuse et plus flexible. Donc, si quelqu'un a une idée, merci d'avance! Mais pour le moment je suis content de pouvoir reconnaître les 16 Bundesländer d'Allemagne!

avez-vous essayé de spécifier le code EPSG correct pour votre fichier de formes et votre sortie GeoJSON? Par exemple:

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

Vous avez raison, pour une carte de l'Allemagne, vous devez modifier la projection par défaut en fonction des données américaines. Il est centré quelque part au Kansas et pour une carte de taille 960xsomething.

Bien entendu, les paramètres corrects dépendent également des dimensions de votre carte.

Si vous souhaitez utiliser la projection d3.geo.albers ( idéale pour les cartes coroplètes ) voici mes paramètres:

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