# Improve choropleth performance (d3)

**URL:** <https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752>\
**Category:** Help\
**Created:** [October 28, 2021, 10:13am UTC](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752 "2021-10-28T10:13:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrispahm](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chrispahm/32/4203_2.png) [@chrispahm](https://talk.observablehq.com/u/chrispahm)\
**Post date:** [October 28, 2021, 10:13am UTC](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752/1 "2021-10-28T10:13:23Z")

</div>

Hey there 🙂

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

> **[Improving choropleth performance](https://observablehq.com/@chrispahm/improving-choropleth-performance)**
>
> Background: The region displayed below consists of ~10.000 fields (agricultural plots), for which field specific profits were calculated using two different approaches: 1) An approach using field specific yields 2) a simplified approach using...

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!  
Chris

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [October 28, 2021, 10:59am UTC](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752/2 "2021-10-28T10:59:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chrispahm](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chrispahm/32/4203_2.png) [@chrispahm](https://talk.observablehq.com/u/chrispahm)\
**Post date:** [October 28, 2021, 1:16pm UTC](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752/3 "2021-10-28T13:16:26Z")

</div>

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 🙂

Thanks again,  
Chris

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [October 28, 2021, 1:16pm UTC](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752/4 "2021-10-28T13:16:31Z")

</div>

+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.