Revert "Adjust SIMD legend into quintiles and tweak popup copy."

This reverts commit 8b30d57.

Author: michaelkirk

web/src/AutoBoundariesMode.svelte

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

web/src/common/SequentialLegendBucketed.svelte

@@ -41,11 +41,3 @@ 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/common/colors.ts

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

web/src/context/Population.svelte

@@ -2,13 +2,11 @@
   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";
 
@@ -49,20 +47,13 @@
   <select id="prioritization-selection" bind:value={selectedPrioritization}>
     <option value="none">None</option>
     <option value="area">Area (km²)</option>
-    <option value="simd">SIMD</option>
+    <option value="simd">Fake SIMD (percentile)</option>
     <option value="stats19">Collisions</option>
   </select>
 </div>
 
 {#if selectedPrioritization == "simd"}
-  <SequentialLegendBucketed
-    colorScale={simdColorScale}
-    buckets={bucketize(simdLimits)}
-  />
-  <div style="display: flex; justify-content: space-between;">
-    <span>More deprived</span>
-    <span>Less deprived</span>
-  </div>
+  <SequentialLegend colorScale={simdColorScale} limits={simdLimits} />
 {:else if selectedPrioritization == "area"}
   <SequentialLegend colorScale={simdColorScale} limits={areaLimits} />
 {:else if selectedPrioritization == "stats19"}