Fractional fill for arbitrary shape

Wondering if there is an existing D3/Plotly/Geopandas solution for the issue in this (~10yo) post:

Envisioning an effect like this: What’s the Matter with Delaware? - YouTube.

One use case would be comparing county populations, or showing percentage of a county or state population served by wastewater monitoring at a given treatment plant.

Just looking for a static version for now, but the ability to ‘pour’ or transfer a given liquid fill area between different polygons might be useful for some kinds comparisons. Result might just be ugly/illegible but interested to see if it has any potential.

Related issue: transitioning fill areas between arbitrary shapes (geopolygons) and simpler shapes (circle/rectangle or Voronoi versions).

Here’s my attempt:


The internet is an amazing place. Thank you! Not only a great solution, but a perfect selection of example geography to demonstrate how the fill is working. In particular I appreciate you including the J = fill() line plot.

Now I just need to link up (for example) this data with these geographies/populations: U.S. Geographic Data / Observable / Observable (a fairly straightforward task which will undoubtedly take me 100x the time it took you to solve the hard part).

If you are (or another reader is) so inclined, adding brief comments through the code about what each block is doing would be enormously helpful for this JS/D3 novice.

Thanks. What you’re asking for is a lot of work, but you could try to break it down into several sub units, that you would tackle one by one. Like, getting the data in, indexing it by county, then making a choropleth. The icing on the cake would be to “pour” the data into each county, using animations &c.

Thanks for your responses. I will give it a shot!

Had a little time to spend with this one. Very minor coding, mostly thinking.

Trying to keep map = {} cell as neat as possible. Would like to do more of what I add/modify in other cells if possible.

Next little tweak is to make (probably radio) selection for grid, graticule, scalebar. There is something simple I am missing about selections with if statements to draw svg elements.

Want to think more about the pixel-vs-line counting and projection considerations you mentioned.

Thanks for all of your help @Fil ! Not much progress from me yet but still so cool just to have a live geo-fill implementation to play with.