Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust SIMD legend into quintiles and tweak copy #186

Merged
merged 1 commit into from
Mar 6, 2025
Merged

Adjust SIMD legend into quintiles and tweak copy #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions web/src/AutoBoundariesMode.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions web/src/PickNeighbourhoodMode.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
22 changes: 22 additions & 0 deletions web/src/common/SequentialLegendBucketed.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a fork of SequentialLegend from svelte-utils, but the labels fall on the buckets rather than between the buckets (consequently, there's one less label).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I might upstream this and use in NPW too.

Missing TS types, but I'll add them after merging the PR stacks to avoid any rebase headache.

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>
8 changes: 8 additions & 0 deletions web/src/common/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
17 changes: 12 additions & 5 deletions web/src/context/Population.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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">
Expand Down Expand Up @@ -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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I felt that "putting it in the 15th percentile" was ambiguous (is that good or bad?) if you aren't already familiar with SIMD ranking conventions. Plus we're no longer showing percentile in the legend as a reference for these units.

"less deprived than 15%" is kind of a weird way to phrase it, but it at least explains that a higher number is better.

Personally, I think "more deprived than 70%" might be more natural to read, but I didn't want to invert the metric, since some people might already be familiar with the concept of SIMD percentiles.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This reads fine to me. We could ask if "more deprived" would be preferable/easier to read.

</p>
</Popup>
</FillLayer>
Expand Down
13 changes: 11 additions & 2 deletions web/src/prioritization/PrioritizationSelect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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"}
Expand Down