31:T4ea,md`**Update:** Thanks to [@mootaris answer](https://talk.observablehq.com/t/improve-choropleth-performance-d3/5752/2), the illustration is much more performant now! What changed? First, I created a method for initially creating the maps (\`createMap\`), as they largely shared the same code. Then, I implemented a (debounced) update function that handles changes to the \`aem_subsidy\` input: \`\`\`js viewof aem_subsidy.addEventListener("input", debouncedUpdate); \`\`\` Instead of always re-creating the paths, the update function solely re-fills the paths accordingly. Again, thanks at mootari for his suggestions! **Original question** **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 regional average yields. The illustration below should highlight the plots where an agri-environmental subsidy would be higher than the field specific yields calculated from the two approaches. Due to the number of fields, and my inefficient way of rendering them, the interactive map is really slow. I'd really appreciate any help for making it more performant!`32:T469,plots_db = plot_data.features.map((p) => { function calcDB(year) { const code = p.properties[year]; if(!crops[code]) return; const cropName = crops[code]; const cropData = prices_costs.find((r) => r.Crop === cropName); const sqr = p.properties.DN || avgSQR; const costs = cropData["Direct costs"] + cropData["Variable costs"] - subsidy; const db = cropData.Price * ((sqr / 100) * max_yields[cropName]) - costs; const reg_db = cropData.Price * mean_yields[cropName] - costs; p.properties[year + "_db"] = db; p.properties[year + "_reg_db"] = reg_db; return [db, reg_db]; } let total_db = 0; let total_reg_db = 0; let count_dbs = 0; for(const year of [14, 15, 16]) { if(!crops[p.properties[year]]) continue; const res = calcDB(year); total_db += res[0]; total_reg_db += res[1]; count_dbs++; } p.properties.plot_size = (p.properties["SHAPE.AREA"] || 0) / 10000; if (count_dbs) { p.properties.avg_db = total_db / count_dbs; p.properties.avg_reg_db = total_reg_db / count_dbs; } return p; }).filter(p => p.properties.avg_db)33:T45a,prices_costs = [ { Crop: "Silage maize", Price: 2.7999999999999994, "Direct costs": 523, "Variable costs": 269.755503861714 }, { Crop: "Potatoes", Price: 16.953333333333333, "Direct costs": 1065, "Variable costs": 505.8875469778789 }, { Crop: "Winter barley", Price: 14.023333333333333, "Direct costs": 417, "Variable costs": 188.833961660152 }, { Crop: "Winter rape", Price: 33.88, "Direct costs": 488.3333333333333, "Variable costs": 187.4747774818883 }, { Crop: "Winter rye", Price: 12.729999999999999, "Direct costs": 379.3333333333333, "Variable costs": 176.8690880387567 }, { Crop: "Wheat", Price: 15.923333333333332, "Direct costs": 467, "Variable costs": 192.91222156488496 }, // update these two! { Crop: "Triticale", Price: 12.729999999999999, "Direct costs": 379.3333333333333, "Variable costs": 176.8690880387567 }, { Crop: "Summer barley", Price: 12.729999999999999, "Direct costs": 379.3333333333333, "Variable costs": 176.8690880387567 } ]34:[{"id":"6cbde05a3213821dd7e51df838b5c248b12938676486d2a85afd9fd6c33e042fc8b4e65ffd3334021a7871216ea5b73f58fce6966d985116ad19381a289f2f61","href":"https://static.observableusercontent.com/files/6cbde05a3213821dd7e51df838b5c248b12938676486d2a85afd9fd6c33e042fc8b4e65ffd3334021a7871216ea5b73f58fce6966d985116ad19381a289f2f61","name":"plots_16_prev_crops_sqr.json","type":"application/json","lastModified":1635328772685.669,"size":11678846},{"id":"90b2e20c64424944f547d896218e4413776e1ed19369ac90505e29142256b63d8e447e645596ebd131bee58c865c5d0b7790cfad043ce50bc6f00ecba14bccf7","href":"https://static.observableusercontent.com/files/90b2e20c64424944f547d896218e4413776e1ed19369ac90505e29142256b63d8e447e645596ebd131bee58c865c5d0b7790cfad043ce50bc6f00ecba14bccf7","name":"maerkisch_oderland.geojson","type":"application/geo+json","lastModified":1635328786098.316,"size":3455}] 2f:{"title":"Improving choropleth performance","cells":[{"id":0,"value":"# Improving choropleth performance","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof aem_subsidy = Inputs.range([0, 1000], {\n value: 500,\n step: 1,\n label: \"Agri-environmental subsidy\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`#### Figure 6: Percentage of total agricultural area (TAA) under which the provision of agri-environmental measures is deemed economically viable given a net subsidy of ${aem_subsidy.toFixed(\n 0\n)} €/ha`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"Swatches(d3.scaleOrdinal([\"Profitable\", \"Not profitable\"], [\"darkred\", \"grey\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"{\n const { width = 400, height = 400, color1 = \"darkred\", color2 = \"grey\" } = {};\n\n const mapA = mapWidget(plots_db, {\n width,\n height,\n heading: \"Considering field specific yields:\"\n });\n const mapB = mapWidget(plots_db, {\n width,\n height,\n heading: \"Considering regional average yields:\"\n });\n\n let invalidated = false;\n invalidation.then(() => (invalidated = true));\n requestAnimationFrame(async () => {\n for await (const threshold of Generators.input(viewof aem_subsidy)) {\n if (invalidated) return;\n const [share_db, share_reg_db] = calcShares(threshold);\n mapA.update(\n (d) => (d.properties.avg_db < threshold ? color1 : color2),\n share_db\n );\n mapB.update(\n (d) => (d.properties.avg_reg_db < threshold ? color1 : color2),\n share_reg_db\n );\n }\n });\n\n return htl.html`

${mapA}${mapB}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"---\n## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"calcShares = {\n const data = plots_db;\n const plotSizes = new Map(plots_db.map(d => [d, d.properties[\"SHAPE.AREA\"] / 10000]));\n const sumReduce = (accessor, threshold) => (sum, {properties: p}) => accessor(p) < threshold ? sum + p.plot_size : sum;\n \n return (threshold) => {\n const area_db = plots_db.reduce(sumReduce(p => p.avg_db, threshold), 0);\n const area_reg_db = plots_db.reduce(sumReduce(p => p.avg_reg_db, threshold), 0);\n \n return [area_db / total_area, area_reg_db / total_area];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function mapWidget(data, options = {}) {\n const {\n width = 400,\n height = 400,\n heading = '',\n } = options;\n \n const percentage = html``;\n const title = htl.html`

${heading}
${percentage}% TAA`;\n const svg = d3.select(DOM.svg(width, height));\n const container = html`
${title}${svg.node()}`;\n \n const projection = d3.geoMercator().fitExtent(\n [\n [20, 20],\n [width, height]\n ],\n mo\n );\n const path = d3.geoPath().projection(projection);\n\n const shapes = svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(data)\n .enter()\n .append(\"path\")\n .attr(\"d\", path);\n\n container.update = (fill, share) => {\n percentage.textContent = (share * 100).toFixed(1);\n shapes.attr('fill', fill);\n };\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"plot_data = {\n const simplified = topojson.presimplify(plots);\n const data = topojson.feature(\n simplified,\n simplified.objects.plots_16_prev_crops\n );\n // we do not consider permanent grassland in our analysis\n data.features = data.features.filter(\n (p) =>\n p.properties[14] < 440 ||\n (p.properties[14] > 493 && p.properties[15] < 440) ||\n (p.properties[15] > 493 && p.properties[16] < 440) ||\n p.properties[16] > 493\n );\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"avgSQR = d3.mean(plot_data.features.map((p) => p.properties.DN))","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"### Crops","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"mean_yields = ({\n Potatoes: 299.05,\n \"Silage maize\": 340.26,\n \"Summer barley\": 23.58,\n Triticale: 37.78,\n \"Winter barley\": 41.2,\n \"Winter rape\": 22.67,\n \"Winter rye\": 35.67,\n Wheat: 53.5,\n \"Sugar beets\": \"No data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"max_yields = ({\n Potatoes: 540.6,\n \"Silage maize\": 578.6,\n \"Summer barley\": 40,\n Triticale: 73.4,\n \"Winter barley\": 71.8,\n \"Winter rape\": 39.3,\n \"Winter rye\": 70.8,\n Wheat: 86,\n \"Sugar beets\": 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"codes_per_crop = ({\n Potatoes: [601, 602],\n \"Silage maize\": [411, 172],\n \"Summer barley\": [132],\n Triticale: [156, 157],\n \"Winter barley\": [131],\n \"Winter rape\": [311],\n \"Winter rye\": [121],\n Wheat: [115]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"crops = Object.entries(codes_per_crop).reduce((obj, [name, codes]) => {\n for(const code of codes) obj[code] = name;\n return obj;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"subsidy = 261","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"### Regions","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"mo = FileAttachment(\"maerkisch_oderland.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"plots = FileAttachment(\"plots_16_prev_crops_sqr.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"total_area = plots_db.reduce((sum, { properties: p }) => sum + p.plot_size, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"---\n## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}