4

Here is an example of a Flood Map using D3.js and topojson.

http://bl.ocks.org/cappelaere/6472064

https://gist.github.com/cappelaere/6472064

It is really taxing D3. Simplification of the topojson at load time does seem to hang Firefox. We really need to get this working to support our disaster management work. It would be great to have adaptive simplification as we zoom in. Any help would be greatly appreciated. Thanks,

Pat.

Pat Cappelaere
  • 391
  • 1
  • 2
  • 11
  • so what's the actual question? – Mike 'Pomax' Kamermans Sep 07 '13 at 03:25
  • Hello Pat. I advice you to read some other questions to see how we write short yet complete question. It is important to point precisely where you are locked. – Hugolpz Sep 07 '13 at 12:45
  • D3 seems to choke on topojson.presimplify as well as zoom & pan while MapShaper does not seem to have any issue simplifying and rendering the same file (I am aware that the file can be simplified but this is not the issue... we have actually more data to display...) – Pat Cappelaere Sep 07 '13 at 13:37

1 Answers1

3

Pretty much your only choice for this is to have pre-simplified data sets that are loaded according to the zoom level. That is, after each zoom you would need to determine whether to load a new, higher resolution data set for the region that the user has zoomed into. If so, you would need to clear the existing elements and add the new ones.

This would be quite a bit of effort. At this point, you might as well have pre-rendered bitmap tiles (like in Google Maps for example) and use a library like Leaflet that does the heavy lifting for you. On top of this pre-rendered map, you could still use D3 for dynamic stuff.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • It would be a shame to have vectors and have to convert them back to raster for display when everyone is going to vector rendering. Leaflet does not help in this case. We need on the fly simplification at various zoom levels. It seems doable (see www.mapshaper.org) but I cannot seem to get a similar result with D3 so far using the existing dynamic simplification... – Pat Cappelaere Sep 07 '13 at 13:41
  • This will still put quite heavy requirements on the browser. There are limits to what you can do there (especially if you want it to work well on mobile devices) and your application does seem to be such a case. Similarly, I don't see Google Maps being entirely vector-based any time soon. – Lars Kotthoff Sep 07 '13 at 13:53
  • Google Maps and OpenStreetMaps are both vector-based now (at least in beta and almost in production... so no going back.) The other thing is that line simplification is good but ought to be followed by curve fitting like this: http://willowsystems.github.io/jSignature/#/about/linesmoothing/ – Pat Cappelaere Sep 07 '13 at 13:56
  • Actually D3 would do this but I would need to fall back to SVG which would be slower in this case ... grrrr! – Pat Cappelaere Sep 07 '13 at 14:26