Adjust SIMD legend into quintiles and tweak popup copy.

Author: michaelkirk

web/src/AutoBoundariesMode.svelte

@@ -168,6 +168,8 @@
       <p>The colors are arbitrary, just to distinguish better.</p>
     {/if}
 
+    <hr />
+
     <button class="secondary" on:click={download}>Export to GeoJSON</button>
 
     <label>
@@ -199,8 +201,8 @@
             <b>Area:</b>
             {props.area_km2.toFixed(1)} km²
           {:else if selectedPrioritization == "simd"}
-            <b>Fake SIMD:</b>
-            {props.simd.toFixed(1)}
+            <b>SIMD:</b>
+            Less deprived than {props.simd.toFixed(1)}% of data zones.
           {:else if selectedPrioritization == "stats19"}
             <b>
               Density of pedestrian and cyclist collisions (collisions per

web/src/PickNeighbourhoodMode.svelte

@@ -244,8 +244,8 @@
             </span>
           {:else if selectedPrioritization == "simd"}
             <span>
-              <b>SIMD (percentile):</b>
-              {simd.toFixed(1)}
+              <b>SIMD:</b>
+              Less deprived than {simd.toFixed(1)}% of data zones.
             </span>
           {/if}
         </li>
@@ -323,8 +323,8 @@
             <b>Area:</b>
             {props.area_km2.toFixed(1)} km²
           {:else if selectedPrioritization == "simd"}
-            <b>Fake SIMD:</b>
-            {props.simd.toFixed(1)}
+            <b>SIMD:</b>
+            Less deprived than {props.simd.toFixed(1)}% of data zones.
           {:else if selectedPrioritization == "stats19"}
             <b>
               Density of pedestrian and cyclist collisions (collisions per

web/src/common/SequentialLegendBucketed.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let colorScale;
+  export let buckets;
+  export let decimalPlaces = 0;
+</script>
+
+<div style="display: flex">
+  {#each colorScale as color}
+    <span style="background: {color}; width: 100%; border: 1px solid black;">
+      &nbsp;
+    </span>
+  {/each}
+</div>
+<div style="display: flex; justify-content: space-around;">
+  {#each buckets as bucket}
+    {#if decimalPlaces > 0}
+      <span>{bucket.toFixed(decimalPlaces)}</span>
+    {:else}
+      <span>{bucket}</span>
+    {/if}
+  {/each}
+</div>

web/src/common/colors.ts

@@ -41,3 +41,11 @@ export let areaLimits = [0.0, 0.3, 0.6, 1.0, 1.5, 2.0];
 
 export let stats19Limits = [0, 1.0, 10.0, 50.0, 100.0, 1000.0];
 export let stats19ColorScale = demandColorScale;
+
+export function bucketize(limits: number[]) {
+  let buckets = [];
+  for (let i = 1; i <= limits.length; i++) {
+    buckets.push(i);
+  }
+  return buckets;
+}

web/src/context/Population.svelte

@@ -8,8 +8,9 @@
   import { SequentialLegend } from "svelte-utils";
   import { makeRamp, Popup } from "svelte-utils/map";
   import { layerId } from "../common";
-  import { simdColorScale, simdLimits } from "../common/colors";
+  import { bucketize, simdColorScale, simdLimits } from "../common/colors";
   import ContextLayerButton from "../common/ContextLayerButton.svelte";
+  import SequentialLegendBucketed from "../common/SequentialLegendBucketed.svelte";
   import { assetUrl } from "../stores";
 
   let showSIMD = false;
@@ -22,8 +23,14 @@
 
 <ContextLayerButton label="SIMD" bind:show={showSIMD}>
   <div slot="legend">
-    <SequentialLegend colorScale={simdColorScale} limits={simdLimits} />
-    <p>Darker colours are more deprived</p>
+    <SequentialLegendBucketed
+      colorScale={simdColorScale}
+      buckets={bucketize(simdLimits)}
+    />
+    <div style="display: flex; justify-content: space-between;">
+      <span>More deprived</span>
+      <span>Less deprived</span>
+    </div>
   </div>
 
   <p slot="help">
@@ -78,8 +85,8 @@
       <p>
         Data zone {props.id}
         has {props.population.toLocaleString()}
-        people, and a SIMD rank of {props.imd_rank}, putting it in the {props.imd_percentile}
-        percentile.
+        people, and a SIMD rank of {props.imd_rank}, making it less deprived
+        than {props.imd_percentile}% of data zones.
       </p>
     </Popup>
   </FillLayer>

web/src/prioritization/PrioritizationSelect.svelte

@@ -2,11 +2,13 @@
   import { SequentialLegend } from "svelte-utils";
   import {
     areaLimits,
+    bucketize,
     simdColorScale,
     simdLimits,
     stats19ColorScale,
     stats19Limits,
   } from "../common/colors";
+  import SequentialLegendBucketed from "../common/SequentialLegendBucketed.svelte";
   import { projectName } from "../stores";
   import type { Prioritization } from "./index";
 
@@ -47,13 +49,20 @@
   <select id="prioritization-selection" bind:value={selectedPrioritization}>
     <option value="none">None</option>
     <option value="area">Area (km²)</option>
-    <option value="simd">Fake SIMD (percentile)</option>
+    <option value="simd">SIMD</option>
     <option value="stats19">Collisions</option>
   </select>
 </div>
 
 {#if selectedPrioritization == "simd"}
-  <SequentialLegend colorScale={simdColorScale} limits={simdLimits} />
+  <SequentialLegendBucketed
+    colorScale={simdColorScale}
+    buckets={bucketize(simdLimits)}
+  />
+  <div style="display: flex; justify-content: space-between;">
+    <span>More deprived</span>
+    <span>Less deprived</span>
+  </div>
 {:else if selectedPrioritization == "area"}
   <SequentialLegend colorScale={simdColorScale} limits={areaLimits} />
 {:else if selectedPrioritization == "stats19"}