Raphadasilva Raphadasilva - 25 days ago 11
Javascript Question

Polygons formatted in GeoJSON don't appear correctly

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.

Answer

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 !

Comments