🏠 back to Observable

USDA Choropleth

Been trying to get comfortable with the viewof stuff. I’ve had serious performance issues by “accidentally” making a new map on each Scrubber or dropdown implementation.

Shout out to @jrus, although I scrapped the addListenerEvents after spending hours trying to get it to work. In the end, I’m simply using relying on viewof to redraw map, and my browser hasn’t crashed or used up >1G of memory (best I can tell)…

I’ll try and make this whole series of maps more functional by hooking into USDA’s API in the future.



If I play through the animation 4 or 5 times I can get it up to about 1 GB of memory in Safari, but then the browser eventually does garbage collection and the memory use drops.

The tooltip library was really the part chewing memory before.

Re-using the SVG map and just changing the colors instead of re-rendering for every frame would definitely save memory and CPU, but if this one performs well enough for what you need it for, that’s also completely fine.

So, that’s what kills me. I thought I could easily add another event listener (one being the date, one being the dropdown). Basically copied/pasted your code. But it gets caught in a recursive loop (check out the console and a text message will trigger on the main map and the viewof date and viewof dropdown being changed.

The attached fork represents what I spent all my time trying to figure out. I’ve tried every combination of trait viewof trait.value and the date as well. Someone the main SVG triggers one every date change. It ends up triggering like 12 renderings for one date change, lol. Now THAT definitely crashes the browser.

Currently that notebook is only viewable by you. You need to “Enable link sharing” from the “…” menu at the top for others to look.


Okay here is a fork which updates based on both inputs

I switched from Maps to plain JS objects, because I got tired of all the .get calls. :slight_smile:

Love the time-lap feature! Great job. Can’t wait to be able to make stuff like this.