We tried to reproduce the beautiful example of bl.ocks.org/diegovalle/5166482, using d3.js and leaflet, but with our own data, which is on a regular lon-lat grid.
In R, we first retrieve the data from a mysql table, and write them to a shapefile:
lonmin <- -10; lonmax <- 10
latmin <- 30; latmax <- 50
dlon <- dlat <- 0.5
lon <- seq(from=lonmin, to=lonmax, by=dlon)
lat <- seq(from=latmin, to=latmax, by=dlat)
nlon <- length(lon); nlat <- length(lat)
# cl <- a mysql request
solRad <- matrix(cl$solRad, ncol=nlon, nrow=nlat)
# Plot the data
levels=seq(from=-40, to=1000, by=40)
filled.contour(solRad, x=lon, y=lat, levels=levels, col=col)
# Write a shapefile
require(maptools); require(rgdal)
writeOGR(ContourLines2SLDF(contourLines(lon, lat, solRad, levels=levels)),
"solRad.shp", "contours", "ESRI Shapefile")
You can look at the filled.contour output ![here] http://www.jonxion.ch/5166482/solRad.png. We then transform the shape file to a topojson file, which you can find by replacing the .png in the above link by .json.
Finally, we render it with D3.js and Leaflet, leading to this faulty result [here] http://www.jonxion.ch/5166482/
We browsed many tutorials and other examples without finding the cue to our problem. What are we doing wrong?
Might it be a d3.js limitation? We recognise that our data is more complex, but Diegovalle's data contains unclosed contours too (see its upper left corner). Would writing ContourPolygones instead of ContourLines solve our problem? Does such routines exist? Or, is there an alternative technique to d3.js? Thank's in advance for your help!
