3

D3js topojson visalization by default use quantification and straight lines between points resulting in unelegant lines. See by example the following France Topography map and it's zoomed version.

enter image description here enter image description here

The code I use is :

//Append Topo polygons
    svg.append("path")
        .datum(topojson.object(json, json.objects.levels) )
        .attr("d", path)
    svg.selectAll(".levels")
        .data( topojson.object(json, json.objects.levels).geometries)
      .enter().append("path")
        .attr("class", function(d) { return "Topo_" + d.properties.name; })
        .attr("data-elev", function(d) { return d.properties.name; })
        .attr("d", path);

How do make my topojson map use Bézier curves ?

enter image description here

Note: When the viz display non-touching polygons, it's should be good. Maybe goes into the way of adaptive sampling as well. I already tried line simplification but it's counter productive, as it simplifies the number of dots at equal speed all around the polygon, without regard to the line's complexity. Shaky and straight lines simplified at same speed result in nightmares.

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • 1
    maybe this .interpolate("basis") http://www.d3noob.org/2013/01/smoothing-out-lines-in-d3js.html – Santiago Rebella Aug 26 '14 at 20:58
  • 1
    Thanks for the link, as I now have an entry point to dig in. `cardinal` seems better for my use. – Hugolpz Aug 26 '14 at 21:02
  • 1
    The interpolation function referenced in that link is separate from what is used when you're using map projections (which do their own calculations to convert straight lines to apparent curves when necessary for the projection). You would need a lot of custom code to make the map functions use curve smoothing mechanisms -- especially the custom code for when to use it and when not to! It might seem like a nice idea to smooth out jagged coastlines, but you wouldn't want to smooth out the geometric corners of country boundaries. – AmeliaBR Aug 27 '14 at 00:02
  • By the way, what really seems to be the problem is that your map data is a much lower resolution than what you want for your task. You need much more detailed data to get the full shape of the boundaries. – AmeliaBR Aug 27 '14 at 00:04
  • @AmeliaBR, I edited my question. My France dataviz is a real-size screenshot, and as soon as you zoom x2, you clearly see "STAIRS", a link is provided to play around. Since such topography is made of non-touching polygons, it may be interesting to go for curve smoothing. – Hugolpz Aug 27 '14 at 13:00
  • Thanks for the edit. In this case, curve smoothing could work without problems because you already have fairly detailed data, the features are small enough that curvature of the earth isn't relevant, and you're not worried about exact borders. *However,* you're still going to need custom code to implement it -- either over-writing the [d3.geo.path() object](https://github.com/mbostock/d3/wiki/Geo-Paths) or use the projection function yourself to map your coordinates, and then pass those coordinates to an area function with curve smoothing. – AmeliaBR Aug 27 '14 at 14:29
  • @AmeliaBR, ok, thanks for these insights. It's out of my reach, seems this one will stay without technical solution for a while. – Hugolpz Aug 27 '14 at 14:43

1 Answers1

2

Santiago's comment is right. You would need to leverage d3.svg.line to generate paths from the coordinates of your geoJSON feature, at which point you would be able to use D3's interpolate methods. Keep in mind that this would involve digging into the coordinates array (or arrays in the case of a MultiPolygon) and converting GeoJSON coordinate lists to SVG coordinate lists by hand, and converting each coordinate pair from geographic coordinates to XY coordinates using d3.geo.projection, and so would be an expensive endeavor.

Remember, if you go down that route that GeoJSON requires that a polygon be closed at the end by the beginning coordinate showing up at the end, which is not the case in SVG, where the presence of the 'Z' drawing instruction does so (and some interpolators do so) so you might want to splice the first or last coordinate pair.

There is a demo here: http://bl.ocks.org/emeeks/d994dbdc9a7b21ab9692

And a simplier one there: minimal stand alone case study for line smoothing

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
Elijah
  • 4,609
  • 3
  • 28
  • 36