Polygons formatted in GeoJSON don't appear correctly

Question

I'm trying to make a map using d3.js and three data files:

a simple .topojson file with my base map
a .geojson file with polygonal areas
a .csv file with data (which has a field in common with the .geojson)

First, I created my base map with this code:

var width = 360,
height = 600,
width2 = 479;

var proj = d3.geo.mercator()
    .center([7.76, 48.57])
    .scale(130000)
    .translate([width / 2, height / 2]);

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

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

d3.json("strasbourg.json", function(error, base) {

   svg.append("path")
    .data(topojson.feature(base, base.objects.contour).features)
      .attr("class", "fond-stras")
      .attr("d", path);

The result was fine (http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%201.html), so I made my code more complex:

var width = 360,
    height = 600,
    width2 = 479;

var proj = d3.geo.mercator()
  .center([7.76, 48.57])
    .scale(130000)
    .translate([width / 2, height / 2]);

// This array will be used to the next choropleth

var couleurs = ['rgb(165,15,21)','rgb(222,45,38)','rgb(251,106,74)',
    'rgb(252,146,114)','rgb(252,187,161)','rgb(254,229,217)'];

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

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

// I use queue.v1.min.js to load my .topojson, .geojson and .csv

queue()
    .defer(d3.json,"strasbourg.json")
    .defer(d3.json, "chute_ries.json")
    .defer(d3.csv, "progression_riesk.csv")
    .await(ready);

function ready(error,base,areas,results) {

// I declare my base map like before, it works always fine

  svg.append("path")
    .data(topojson.feature(base, base.objects.contour).features)
      .attr("class", "fond-stras")
      .attr("d", path);

// the problematic part begins here :

  svg.append("g").attr("class","areas")
        .selectAll("path")
        .data(areas.features)
        .enter()
          .append("path")
          .attr("class", "area")
          .attr("d", path)
// I write this to test an automatic colouring
          .attr("fill", function(d,i){
              if (results[i].diff_ries<-23){
            return couleurs[0]
          }
          else {return couleurs[4]

          }
        })

Unfortunately, it doesn't work as you will see here: http://raphi.m0le.net/data/BAS/App_d3_strasrk/etape%202.html

Despite my efforts, I have not been able to get this to work. My .geojson was created with QGis, so I guess that it respects the Right-Hand-Rule.

My console does not display any errors so I haven't been able to determine what is wrong. I suspect that it could be the data() declaration, but I've seen several examples where it was written like this with .geojson data and worked perfectly.

The coordinates in you geojson don't look suitable for the mercator projection to me. You've probably used the wrong projection when creating the file. — Lars Kotthoff, Aug 13 '14 at 16:58
Thanks for your comment Lars ! I've just tried to resave my .geojson with the WGS84 projection on QGis, but it still doesn't work :-(... — Raphadasilva, Aug 14 '14 at 04:54
[This question](http://gis.stackexchange.com/questions/39277/how-to-create-a-geojson-that-works-with-d3) may help. — Lars Kotthoff, Aug 14 '14 at 08:19
You were right Lars, I had areas with a wrong projection, [now the map works fine](http://raphi.m0le.net/data/BAS/App_d3_strasrk/carte_ip.html). Thanks again ! — Raphadasilva, Aug 18 '14 at 16:15

score 0 · Accepted Answer · answered Nov 09 '16 at 05:54

0

It was a little tricky, but the problem comes from the projection of my original file : Lambert-93 (a french reference) instead of the Mercator precised in the script !

I resaved the file with a Mercator projection, and all worked perkectly fine !

answered Nov 09 '16 at 05:54

Raphadasilva

565
1
6
21

Polygons formatted in GeoJSON don't appear correctly

1 Answers1