29:null 2a:["$","title",null,{"children":"Diverging Scales - US Map Unemployment Data | Zan | Observable"}] 2f:[] 2d:{"id":"caeec8aeda918080","slug":null,"title":"Diverging Scales - US Map Unemployment Data","thumbnail":"4ac07c0c6b7ef3b9c823dab5b76f6756e17d8116530344275f94653b4c7cd28f","access_level":"public","create_time":"$D2023-03-30T23:28:54.250Z","update_time":"$D2023-05-05T22:30:35.510Z","view_time":null,"first_public_time":"$D2023-03-30T23:28:54.250Z","fork":{"id":"ee98041300ade9e5","slug":"diverging-scales-choropleth-unemployment","title":"Diverging Scales - US Map Unemployment Data","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":4,"starred":false,"owner":{"type":"team","id":"f5c920385539a3ff","login":"zanarmstrong","name":"Zan","avatar_url":"https://avatars-next.observableusercontent.com/6e7b2ebb871b8823e6704e8c9e5c1c99715a93c9affacad83335afe2fed062a4","tier":"starter_2024"},"version":574,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"440a5f5ea2b8acfa","login":"zanarmstrong","name":"Zan","avatar_url":"https://avatars-next.observableusercontent.com/6e7b2ebb871b8823e6704e8c9e5c1c99715a93c9affacad83335afe2fed062a4","tier":null}],"members":[{"type":"individual","id":"440a5f5ea2b8acfa","login":"zanarmstrong","name":"Zan","avatar_url":"https://avatars-next.observableusercontent.com/6e7b2ebb871b8823e6704e8c9e5c1c99715a93c9affacad83335afe2fed062a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Diverging Scales - US Map Unemployment Data","cells":[{"id":0,"value":"# Diverging Scales - US Map Unemployment Data\n## Make Color Have Meaning + Many Small Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"This map uses a diverging color scale, where red represents high unemployment rates and blue low ones. \n\nWhat should the \"middle\" of the color range be? \n\nIt could be defined by the median of the data. Or, by some specific value we choose. \n\nFor example, many economists consider ~5% unemployment to represent \"full employment\" considering that there will always be people in transition (or, sometimes, mismatches between skills needed and skills had), so you could set the midpoint to be at 5. (source - [NPR](https://www.npr.org/2013/01/03/168508910/what-is-a-good-unemployment-number-really)). \n\nSelect a radio button to change which values are \"white\", \"blue\" (low), or \"red\" (high). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"viewof middleColorSelection = Inputs.radio(\n [\"median for that year\", \"median for all years\", \"5%\", \"4%\", \"6%\"], \n {\n label: \"pivot is: \",\n value: \"median for all years\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"middleColor = colorMap.get(middleColorSelection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"colorMyMap(color, unemploymentMap, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Plot.plot({\n y: {\n domain: [0,1200]\n },\n x: {\n domain: [0,30]\n },\n color: {...color, legend: false},\n marks: [\n Plot.rectY(unemploymentSingleYear, \n Plot.binX({y: \"count\"}, \n {x: \"rate\",\n fill: \"rate\",\n stroke: \"rate\",\n thresholds: d3.range(0,30)})\n ), \n Plot.text([[0, \"color min\"], [middleColor, \"color midpoint\"], [middleColor * 2, \"color max\"]], \n {x: '0', y: 1150, text: d => d[1] + \": \" + d[0],\n textAnchor: 'start',\n dx: 5\n }),\n Plot.ruleX(colorDomain, {strokeDasharray: \"2,2\"}),\n ],\n height: 160,\n width: 700,\n marginLeft: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"color = ({\n label: \"color pivot: \" + middleColor,\n type: \"diverging\",\n pivot: 5,\n domain: [0,10],\n range: [\"#003EA0\", // blue\n \"#516F9F\",\n \"#D6DEEC\",\n \"white\", \n \"#F1DBD3\",\n \"#D2512D\",\n \"#B12700\" // red\n ],\n legend: true,\n clamp: true,\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"## Compare two color schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":514,"value":"In the charts below you can compare two maps with exactly the same data. The only different between these two maps is the midpoint (and therefore max value) for the diverging color scale. Yet, the maps look quite different. \n\nWhat is your impression looking at both of these maps? What do you notice? What is the feeling you get about unemployment in the US in that year based on each chart? \n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"html`

Unemployment by county in the US in ${year}

\n
\n

Diverging red/blue scheme with median as midpoint

Divering red/blue scheme with 5% as midpoint

${\ncolorMyMap(color1, unemploymentMap, width/2.2)}

${\ncolorMyMap(color2, unemploymentMap, width / 2.2)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"color1 = ({\n label: \"color pivot: \" + medianThisYear,\n scheme: \"rdbu\",\n reverse: true,\n type: \"diverging\",\n pivot: medianThisYear,\n domain: [0, medianThisYear * 2],\n legend: true,\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"color2 = ({\n label: \"color pivot: \" + 5, \n scheme: \"rdbu\",\n reverse: true,\n type: \"diverging\",\n pivot: 5,\n domain: [0,5,5 * 2],\n legend: true,\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"### Threshold scale\n\nInstead of a continuous diverging color scheme, we can choose a threshold scheme. Instead of continuous values from min to max, now we have grouped our unemployment rates into 6 categories: very low, low, moderate, high, very high, or extremely high","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"viewof year = Scrubber(\n d3.range(2000, 2021, 1),\n { format: d => d.toString() ,\n autoplay: false,\n delay: 1000,\n initial: 16 // 9th value is 2009\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"colorMyMap(colorThresholds, unemploymentMap, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"### Histogram \"small multiples\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"Alternatively, we can compare years by looking at the distribution of rates by county for 4 critical years: 2 with strong economies and 2 with high unemployment rates. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"Plot.plot({\n y: {\n domain: [0,1200]\n },\n x: {\n domain: [0,30]\n },\n color: {...colorThresholds, legend: false},\n marks: [\n Plot.rectY(unemploymentKeyYears, \n Plot.binX({y: \"count\"}, \n {x: \"rate\",\n fill: \"rate\",\n stroke: \"rate\",\n thresholds: d3.range(0,30)})\n ), \n /*Plot.text(colorThresholds.domain, \n {x: d => d, y: 1280, text: d => d + \"%\",\n dx: 4\n }),*/\n Plot.ruleX(colorThresholds.domain, {strokeDasharray: \"2,2\"}),\n ],\n height: 600,\n width: 400,\n marginLeft: 40,\n facet: {\n data: unemploymentKeyYears,\n y: \"year\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"collectionPreviews({skip: \"Diverging Scales - US Map Unemployment\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"## Supporting functions & data wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"colorThresholds = ({\n label: \"threshold (%)\",\n domain: [\n 3, \n 4, \n 6, \n 10, \n 14\n ],\n range: [\n d3.interpolateRdBu(0.9),\n d3.interpolateRdBu(0.7),\n \"#ddd\",\n d3.interpolateRdBu(0.3),\n d3.interpolateRdBu(0.1),\n d3.interpolateRdBu(0)\n ],\n \n legend: true,\n type: \"threshold\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"colorDomain = [0, middleColor, middleColor * 2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function colorMyMap(color, data, width) {\n return Plot.carto({\n projection: \"identity\",\n marks: [ \n // projection fitExtent comes from first feature mark\n Plot.feature(topojson.feature(us, us.objects.states), {\n strokeWidth: 0.5\n }),\n Plot.features(topojson.feature(us, us.objects.counties).features, {\n fill: (d) => data.get(d.id),\n strokeWidth: 1,\n stroke: (d) => data.get(d.id)\n }),\n Plot.feature(topojson.feature(us, us.objects.states), {\n strokeWidth: .5,\n stroke: \"white\"\n }),\n Plot.feature(topojson.feature(us, us.objects.nation), {\n strokeWidth: 1,\n stroke: \"black\"\n })\n ],\n width,\n height: width * 2/3,\n color\n })}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"colorMap = new Map([\n [\"median for that year\", medianThisYear],\n [\"median for all years\", d3.median(unemployment2000to2020, d => d.rate)],\n [\"5%\", 5],\n [\"4%\", 4],\n [\"6%\", 6],\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"medianThisYear = d3.median(unemploymentSingleYear, d => d.rate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"Array.from(unemploymentYears.get(year.toString()).values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"unemploymentRateExtent = d3.extent(unemployment2000to2020, d => +d.rate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"unemploymentMap = new Map(unemploymentSingleYear.map(d => [d.id, d.rate]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"unemploymentSingleYear = unemploymentYears.get(year.toString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"unemploymentKeyYears = [\n ...unemploymentYears.get(\"2007\"), \n ...unemploymentYears.get(\"2009\"),\n ...unemploymentYears.get(\"2019\"),\n ...unemploymentYears.get(\"2020\")\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"unemploymentYears = d3.group(unemployment2000to2020, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"unemployment2000to2020","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"Read in data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"import {unemployment2000to2020, us, collectionPreviews, header} from \"@observablehq/sources-for-outlier-2022-notebooks\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"Carto is an experimental plugin for [Observable Plot](https://observablehq.com/@observablehq/plot). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"Plot = require(\"@observablehq/plot@0.4.0\").then(makeCarto)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import {makeCarto} from \"@fil/plot-carto-0-4\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"