2b:null 2c:["$","title",null,{"children":"Introduction to Classification and Colors | University of Iowa | Observable"}] 31:T5a4,function showScaleGrouping(data, scales) { const margins = { left: 130 }; const x = d3 .scaleLinear() .domain(d3.extent(data)) .range([margins.left, width - 5]); const r = 3; const rectHeight = 10; const chart = svg` `; return chart; }32:[{"id":"a6db535baacb1e1e3765f2520dd692197516226b6722b7a7879e14112537caaae5e01537a512db5c601539c30b837990b6e7f139b113f2f9c62b30e6c245e378","href":"https://static.observableusercontent.com/files/a6db535baacb1e1e3765f2520dd692197516226b6722b7a7879e14112537caaae5e01537a512db5c601539c30b837990b6e7f139b113f2f9c62b30e6c245e378","name":"tract2020.json","type":"application/json","lastModified":1774985016376.214,"size":1065373},{"id":"96a46a1df68716407c668d04beee707accde80140851beced75636371efcced85a1b59e497673f25011ab8eac2f3c8bc5d94bc5f1cefd267e72ddede132ffd08","href":"https://static.observableusercontent.com/files/96a46a1df68716407c668d04beee707accde80140851beced75636371efcced85a1b59e497673f25011ab8eac2f3c8bc5d94bc5f1cefd267e72ddede132ffd08","name":"population.csv","type":"text/csv","lastModified":1774985016376.214,"size":68745}] 2f:{"id":"3c7b17eac35bbe95","slug":null,"title":"Introduction to Classification and Colors","thumbnail":"a23d25cf94982597f75f7cac67db85f83736656d157d43020e395a15813e09e1","access_level":"public","create_time":"$D2026-03-31T19:23:36.376Z","update_time":"$D2026-05-14T04:28:11.651Z","view_time":null,"first_public_time":"$D2026-03-31T19:23:36.376Z","has_unpublished_edits":null,"fork":{"id":"37347ed16e26d5ef","slug":null,"title":"Classification and Colors - Percent Black Population in Iowa Census Tracts","owner":{"id":"ee91af4e54776741","login":"university-of-iowa13","name":"University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ee91af4e54776741","login":"university-of-iowa13","name":"University of Iowa","avatar_url":"https://avatars-next.observableusercontent.com/67ab0df341e94870a449c742fa68577303e8800ebf9a080e2b8571bb447dd990","tier":"starter_2024"},"version":533,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9a47aca838e6429","login":"nbol2k","name":"Nbol2k","avatar_url":"https://avatars-next.observableusercontent.com/d954d0078d655f038e6f829d41d4fb63f9fa80086397bbec94d3adb5799fc544","tier":null}],"members":[{"type":"individual","id":"b9a47aca838e6429","login":"nbol2k","name":"Nbol2k","avatar_url":"https://avatars-next.observableusercontent.com/d954d0078d655f038e6f829d41d4fb63f9fa80086397bbec94d3adb5799fc544","tier":null,"role":"editor"},{"type":"team","id":"ee91af4e54776741","login":"university-of-iowa13","name":"University of Iowa","avatar_url":"https://avatars-next.observableusercontent.com/67ab0df341e94870a449c742fa68577303e8800ebf9a080e2b8571bb447dd990","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to Classification and Colors","cells":[{"id":0,"value":"md`# Introduction to Classification and Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tract2020 = FileAttachment(\"tract2020.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"tract2020_features = topojson.feature(tract2020, tract2020.objects.tract2020)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"population.csv\").text(),({GEOID, Black, Total}) => [+GEOID, +Black, +Black/+Total])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"population.csv\").text(), d3.autoType)).map(({GEOID, Black, Total}) => ({GEOID: +GEOID, pctPopBlack: +Black/+Total})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([0, 20], {step: 1, label: \"Bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"Plot.plot({\n marks: [\n Plot.rectY(csv_data_objects, Plot.binX({y: \"count\"}, {x: \"pctPopBlack\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"pctBlack = Array.from(csv_data.values(), d => d[2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent Population of Alaska: 5 and Younger\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(pctBlack))\n .range([\"black\", \"white\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(pctBlack), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(pctBlack)\n .range([\"#f1eef6\", \"#d7b5d8\", \"#df65b0\", \"#dd1c77\", \"#980043\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(pctBlack), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(pctBlack, 5).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range([\"#ffffcc\", \"#c2e699\", \"#78c679\", \"#31a354\", \"#006837\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(pctBlack), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(pctBlack),d3.max(pctBlack)])\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#de2d26\", \"#a50f15\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(pctBlack), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`# Threshold`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain(naturalbreaks5)\n .range([\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#de2d26\", \"#a50f15\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(pctBlack), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"naturalbreaks5 = simple.ckmeans(pctBlack, 5).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(pctBlack, {\n scaleQuantile: quantile,\n scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function numericSort(x) {\n return (\n x\n // ensure the array is not changed in-place\n .slice()\n // comparator function that treats input as numeric\n .sort((a, b) => a - b)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function chart(data, scale) {\n const w = 20,\n cols = Math.floor(Math.min(600, width) / w),\n lines = Math.ceil(200 / cols);\n const chart = d3\n .create(\"svg\")\n .attr(\"width\", cols * w)\n .attr(\"height\", lines * w);\n\n chart\n .append(\"g\")\n .attr(\"transform\", \"translate(2,2)\")\n .attr(\"style\", \"stroke:black; fill:white;\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"width\", w - 3)\n .attr(\"height\", w - 3)\n .attr(\"x\", (_, i) => w * (i % cols))\n .attr(\"y\", (_, i) => w * ((i / cols) | 0))\n .style(\"fill\", d => (scale ? scale(d) : \"#ddd\"));\n return chart.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"simple = require(\"simple-statistics@7.0.7/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"