30:[{"id":"ef34b3171e2cec853de7a7ab3a0e014624ff1ba9c07768040b29772840b9bd7bff18fa000ae5ad23c69f9eec4b9c3692c4aa403f3253811aa9ce8397ac7af8ad","href":"https://static.observableusercontent.com/files/ef34b3171e2cec853de7a7ab3a0e014624ff1ba9c07768040b29772840b9bd7bff18fa000ae5ad23c69f9eec4b9c3692c4aa403f3253811aa9ce8397ac7af8ad","name":"msoasSimple.json","type":"application/json","lastModified":1731739212485.861,"size":1243548},{"id":"27de9754c25a867c802d1f9031af863e45fc3b94f31b592274f7d3b288dbf931649a7b45138cb26e34f16eacb98601a217a5fb7c2a2d7941b647c343ff85b562","href":"https://static.observableusercontent.com/files/27de9754c25a867c802d1f9031af863e45fc3b94f31b592274f7d3b288dbf931649a7b45138cb26e34f16eacb98601a217a5fb7c2a2d7941b647c343ff85b562","name":"msoasHexSimple.json","type":"application/json","lastModified":1731739212601.951,"size":1430988}] 2e:{"title":"30 Day Map Challenge: 16. Choropleth","cells":[{"id":0,"value":"# 30 Day Map Challenge: 16. Choropleth","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Choropleth maps are widely used and easy to understand. They often show familiar geographies and associate a single colour-coded value with each region of the map. And we tell ourselves we know their limitations – the larger area of each parcel of land, the more dominant it appears on the map, even when land area isn't related to the phenomenon we are interested in. Yet, do we really intuit this area-based effect? Can we 'undo' this distorting effect in our minds when we view a choropleth map?\n\nI thought I'd explore this idea in today's challenge by mapping some England and Wales census data with choropleth mapping and an alternative approach to see the differences. ","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## Data Preparation","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"I explored the 2021 Census data for England and Wales looking at data on the proportion of households with access to a car. I chose this because it is one of many responses that tends to vary between urban and rural area, and for geographic units that tend to represent an approximately uniform population size, these vary in land area significantly.\n\nI chose Middle Super Output Areas (MSOAs) as they are sufficiently fine grained (typically around 3000 households per MSOA) to present a challenge in interpreting the choropleth map – individual boundaries are hard to see, so assessing area effects is hard.\n\nI simplified MSOA boundaries in [MapShaper](https://mapshaper.org) and attached them to this document as `msoasSimple.json`:","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"msoasSimple = FileAttachment(\"msoasSimple.json\")\n .json()\n .then((data) => topojson.feature(data, \"msoas\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"To contrast with the choropleth map, I used this [non-contiguous hex cartogram base](https://github.com/houseofcommonslibrary/uk-hex-cartograms-noncontiguous) from the House of Commons Library (`msaoHexSimple.json`):","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"msoaHexBounds = FileAttachment(\"msoasHexSimple.json\")\n .json()\n .then((data) => topojson.feature(data, \"msoasHex\"))\n .then((data) => TDMC.sortFeatures(data, \"code\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"function plotBoundaries(data) {\n return Plot.plot({\n width: 320,\n projection: { type: \"reflect-y\", domain: data },\n marks: [Plot.geo(data, { strokeWidth: 0.2 })]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"

\n${plotBoundaries(msoasSimple)} \n${plotBoundaries(msoaHexBounds)} \n

","pinned":false,"hidden":false,"mode":"html"},{"id":348,"value":"Both geographies use the ONS 2021 MSOA codes for each area, so can reference the same census data. The car household data were extracted with my [Census 2021 explorer](https://observablehq.com/@jwolondon/census-2021-explorer), converting the data into the proportion of car-free households (see [Hello census](https://observablehq.com/@jwolondon/hello-census-2021) for a worked example).","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"carLookup = d3\n .csv(\n \"https://gicentre.github.io/data/datavis/percentNoCarsMSOA.csv\",\n d3.autoType\n )\n .then((data) => new Map(data.map((d) => [d.code, d.value])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"### Morphing between geographies","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"To compare the two geographies, rather than just juxtapose two maps, I wanted to be able to morph between them interactively in order to see where geography is distorted, and where areas shrink or grow if they are standardised by population.\n\nTo do this I used the [flubber library](https://observablehq.com/@jwolondon/morphing):","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"flubber = require(\"flubber@0.4/build/flubber.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"To help with animation, I replaced 'multi-polygons' (i.e. regions that are composed of more than one discrete simple polygon) with the single largest area polygon in that region. This ensured a one-to-one correspondence between land-area-based polygons and their simplified cartogram hex-polygon.\n\nI standardised the coordinate system for both maps so the morphing didn't shift regions too much.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"msoas = TDMC.sortFeatures(TDMC.toSimplePolys(msoasSimple), \"code\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"codes = msoas.features.map((d) => d.properties.code)","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"function normalise(fc) {\n const coords = fc.features.map((d) => [...d.geometry.coordinates[0]]);\n const xDomain = d3.extent(coords.flat().map(([x, y]) => x));\n const yDomain = d3.extent(coords.flat().map(([x, y]) => y));\n const pad = (1 - (yDomain[1] - yDomain[0]) / (xDomain[1] - xDomain[0])) / 2;\n const xSc = d3.scaleLinear().domain(xDomain).range([0, 1]);\n const ySc = d3\n .scaleLinear()\n .domain(yDomain)\n .range([pad, 1 - pad]);\n return coords.map((feat) => feat.map(([x, y]) => [xSc(x), ySc(y)]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"msoaCoords = normalise(msoas)","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"hexCoords = normalise(msoaHexBounds)","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"And the interpolation between the two sets of map shapes is created with a simple call to Flubber's `interpolateAll()` function:","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"intGeoShapes = flubber.interpolateAll(msoaCoords, hexCoords, {\n string: false,\n single: true\n})(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"## Mapping\n\nRegions were coloured on a yellow-green scale to indicate the proporiton of car-free households (green=higher proportion). To use the same scale across maps and legends I stored the colours separately:","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"carClrs = [\n \"rgb(251,220,100)\",\n \"rgb(203,192,79)\",\n \"rgb(67,145,66)\",\n \"rgb(50,125,61)\",\n \"rgb(36,107,53)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"function drawInterp(w) {\n const data = new GeoJSON();\n intGeoShapes.forEach((d, i) => data.polygon(d));\n\n return Plot.plot({\n style: `background:oklch(99% 0.01 60deg); \n box-shadow: inset 0 0 8em 8em oklch(40% 0.05 30deg /10%); /* Vignette effect */`,\n width: w,\n height: (w * 60) / 44,\n insetRight: 40,\n insetLeft: 40,\n color: { range: carClrs, type: \"linear\" },\n\n projection: { type: \"reflect-y\", domain: data.boundingRect() },\n marks: [\n Plot.geo(data.featureCollection.features, {\n fill: (d, i) => carLookup.get(codes[i])\n }),\n TDMC.drawBorder()\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"legend = () =>\n Plot.legend({\n style: {\n color: \"#000c\",\n fontFamily: \"Oswald\",\n fontWeight: 300\n },\n\n color: {\n tickFormat: (d) => `${d * 100}%`,\n label: \"Households without a car\",\n range: carClrs,\n type: \"linear\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"_Try dragging the slider below the map to see the effect of moving away from the standard choropleth map:_","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"

${drawInterp(640)}

${legend()}

Car-free households in England and Wales

Middle Super Output Areas, 2021

Source: England and Wales Census, 2021

","pinned":false,"hidden":false,"mode":"html"},{"id":138,"value":"viewof t = Inputs.range([0, 1], {\n label: \"Morph position\",\n value: 0,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"What is most apparent is that in the conventional choropleth, England and Wales appear dominated by (yellow) car-owning households. But that it takes the population-based hex cartogram to reveal the extent of (largely urban) households with no car access.","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"For a static view, I created a series of snapshots between the two geographies:","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"function staticMap(t, title = \"\") {\n const interpShapes = flubber.interpolateAll(msoaCoords, hexCoords, {\n string: false,\n single: true\n })(t);\n\n const w = 400;\n const data = new GeoJSON();\n interpShapes.forEach((d, i) => data.polygon(d));\n\n return Plot.plot({\n style: `background:oklch(99% 0.01 60deg); \n box-shadow: inset 0 0 8em 8em oklch(40% 0.05 30deg /10%); /* Vignette effect */`,\n width: w,\n height: (w * 55) / 44,\n insetRight: 40,\n insetLeft: 40,\n color: { range: carClrs, type: \"linear\" },\n\n projection: { type: \"reflect-y\", domain: data.boundingRect() },\n marks: [\n Plot.text([title], {\n x: 0,\n y: 1.15,\n fontFamily: \"Oswald\",\n fontSize: w / 18,\n textAnchor: \"start\"\n }),\n Plot.geo(data.featureCollection.features, {\n dy: 20,\n fill: (d, i) => carLookup.get(codes[i])\n }),\n TDMC.drawBorder()\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"

\n${staticMap(0, \"MSOAs sized by land area\")} \n${staticMap(0.1)} \n${staticMap(0.4 )} \n${staticMap(1, \"MSOAs sized by population\")} \n

","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}