Search code examples
javascriptd3.jsgisgeojsontopojson

Smoothing arcs/plot points in D3.js/GeoJSON/TopoJSON/Shapefile (somewhere along the way)


I've been looking around a while for an answer to this, and I haven't been able to figure it out.

  • I'm ultimately creating a TopoJSON file from grid based data (GRIB files).
  • I can pretty easily interpolate the data down to a finer resolution grid so the plot points appear smoother when zoomed out, but when zoomed in, it's inevitable to see the blocky grid points.
  • I've also looked into simplification, which does help a bit but its not quite smoothing.
  • I'm using D3 to render the data.
  • Is this something that can be done on the front end or should/can it be done in the raw TopoJSON data?
  • I essentially don't want you to be able to tell that it's a grid, even if you zoom in 10,000%.
  • Here's an example of what I'm after:

enter image description here


Solution

  • Is this something that can be done on the front end or should/can it be done in the raw TopoJSON data?

    This is something that should be done on the front end. If you were to smooth the data before you wrote it to the JSON file, the file would be needlessly big.