Improve choropleth performance (d3)

Hey there :slightly_smiling_face:

for D3 a visualisation including ~10.000 polygons, I’m struggling to maintain interactivity…

I tried to reduce the number of iterations over the GeoJSON feature array, but it’s still far from where I think it could be using the correct methods and tools. The original dataset is already a TopoJSON topology, but unfortunately I have little experience with D3 + TopoJSON so I’d really appreciate any help!

Thanks in advance!

The highest cost comes from scrapping and recreating the SVG on every change. Create an update function to set the path fills according to the current threshold, then use Generators.input(viewof aem_subsidy) to watch for input changes and call your update function.

Note also that you construct your two groups in an almost identical fashion. I recommend to identify their differences (in this case the heading, and the property used for comparison), then abstract the construction out into a helper that receives a title and a comparison callback.

Awesome @mootari!
Just published an update to the notebook with your proposed changes, its much fast now, and its finally fun to use the slider and see the effects on the map :slightly_smiling_face:

Thanks again,

1 Like

+1 mootari. I’d also recommend using canvas rather than SVG, and pre-projecting the shapes rather than recomputing the projection each time you draw everything.