2b:null 2c:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | workspace | 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":"f72b67406084da3e7e85da706a63f6f0309313de2200f73da875f0e1006b3d54337f5782a876a8c99b2d0ac0080983fa0f4f4768e526330d598e56927039a029","href":"https://static.observableusercontent.com/files/f72b67406084da3e7e85da706a63f6f0309313de2200f73da875f0e1006b3d54337f5782a876a8c99b2d0ac0080983fa0f4f4768e526330d598e56927039a029","name":"US_county_1990project.json","type":"application/json","lastModified":1771447902507.869,"size":34605906},{"id":"f72b67406084da3e7e85da706a63f6f0309313de2200f73da875f0e1006b3d54337f5782a876a8c99b2d0ac0080983fa0f4f4768e526330d598e56927039a029","href":"https://static.observableusercontent.com/files/f72b67406084da3e7e85da706a63f6f0309313de2200f73da875f0e1006b3d54337f5782a876a8c99b2d0ac0080983fa0f4f4768e526330d598e56927039a029","name":"US_county_1990project@1.json","type":"application/json","lastModified":1771447930187.773,"size":34605906},{"id":"7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","href":"https://static.observableusercontent.com/files/7f63cd60bd780fb581d9a0869fc0fa88e96e3b42d72a56a1b4dd371f15cfb3cd74b48884b9b96cade4aec2653338f9a9a264ff95ed638e2327f10a3350c6ce82","name":"Alaska.json","type":"application/json","lastModified":1771447890055.37,"size":25543},{"id":"cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","href":"https://static.observableusercontent.com/files/cebcca49f80541efc6820907fd1b3096d5c95574ddbbdac4d57fe6bc342d89026ccd851d16cc186eee115565d800dfe8cb3589069d3d4dd16fdcbcc75db6dd3b","name":"Alaska@1.csv","type":"text/csv","lastModified":1771447890055.37,"size":8290},{"id":"d56239f3977bcd64dd861d4d3e62e652f2d40a03fbf255f22089f2f45a9b9fd329b8a8cb51a74fb0f30c93dde218bbb7cd3d5c1c7286b4e2249bf928983bbe0e","href":"https://static.observableusercontent.com/files/d56239f3977bcd64dd861d4d3e62e652f2d40a03fbf255f22089f2f45a9b9fd329b8a8cb51a74fb0f30c93dde218bbb7cd3d5c1c7286b4e2249bf928983bbe0e","name":"nhgis0004_ds248_2020_state-1.csv","type":"text/csv","lastModified":1771447899563.621,"size":11225},{"id":"d56239f3977bcd64dd861d4d3e62e652f2d40a03fbf255f22089f2f45a9b9fd329b8a8cb51a74fb0f30c93dde218bbb7cd3d5c1c7286b4e2249bf928983bbe0e","href":"https://static.observableusercontent.com/files/d56239f3977bcd64dd861d4d3e62e652f2d40a03fbf255f22089f2f45a9b9fd329b8a8cb51a74fb0f30c93dde218bbb7cd3d5c1c7286b4e2249bf928983bbe0e","name":"nhgis0004_ds248_2020_state-1@1.csv","type":"text/csv","lastModified":1771447961783.621,"size":11225}] 2f:{"id":"30f15a03eb44ef32","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"010d5f570042ae5247645378ae4d13694c5a7df6486cc9015a16f3debb984bf6","access_level":"public","create_time":"$D2026-02-18T20:51:30.055Z","update_time":"$D2026-02-18T23:11:49.417Z","view_time":null,"first_public_time":"$D2026-02-18T20:51:30.055Z","has_unpublished_edits":null,"fork":{"id":"c68fb87dffeeb9bc","slug":"second-exercise-on-observable","title":"Second Exercise on Observable: Classification and Colors","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24a4a66e0271a222","login":"workspace2398","name":"workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecc085eb50447fa74ff326f3a053ed0e07ac46e88a2f75b6af5d15ef7164d823","tier":"starter_2024"},"version":531,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba27e1e1d519ec0d","login":"matthewjschmalz","name":"Matthewjschmalz","avatar_url":"https://avatars-next.observableusercontent.com/fecaadafdfafddaf80f566c1a5d0e569c0b01cc6938e6b18a612f09abdc603de","tier":null}],"members":[{"type":"individual","id":"ba27e1e1d519ec0d","login":"matthewjschmalz","name":"Matthewjschmalz","avatar_url":"https://avatars-next.observableusercontent.com/fecaadafdfafddaf80f566c1a5d0e569c0b01cc6938e6b18a612f09abdc603de","tier":null,"role":"editor"},{"type":"team","id":"24a4a66e0271a222","login":"workspace2398","name":"workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecc085eb50447fa74ff326f3a053ed0e07ac46e88a2f75b6af5d15ef7164d823","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Second Exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# Second Exercise on Observable: Classification and Colors`","pinned":true,"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":"States = FileAttachment(\"US_county_1990project@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"state_features = topojson.feature(States, States.objects.US_county_1990project)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"nhgis0004_ds248_2020_state-1@1.csv\").text(),({STATE, U7G001, U7G002, U7G003}) => [STATE, 100*U7G003/U7G001])","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(\"nhgis0004_ds248_2020_state-1@1.csv\").text(), d3.autoType)).map(({STATE, U7G001, U7G003}) => ({State: STATE, housevacancypct: +100*U7G003/+U7G001})))","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: \"housevacancypct\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"The histogram has a more positive(left) skew distribution. It has 2 clusters both which are on the left side of the histogram. There is some outliers more on the right side of the histogram where only a handful of points find themselves.\n\nWith the data being skewed its important to use different class breaks like quantile and jenks as they are not going to give a less obvious pattern like what is seen using equal-interval. Also, with the distribution having two clusters, it is important to differentiate them using the class breaks.\n\nBased on the histogram the most appropriate classification methods are those like Quantile, Jenks, and Manual. This is due to it being skewed. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"housevacancypct = Array.from(csv_data.values(), d => d[1])","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 of Houses Vacant\"]})","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(housevacancypct))\n .range([\"#f7f7f7\", \"#542788\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(housevacancypct), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"1. To build an unclassed (continuous) scale in Observable you want to use your data and enter it into a linear scale, which has no classes. You can find how to do this on D3-scale webpage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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(housevacancypct)\n .range([\"#b35806\", \"#f1a340\", \"#f7f7f7\", \"#998ec3\", \"#542788\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(housevacancypct), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":".2. To implement classification into Observable you want to use D3 once again but with the classed scales. To create a quantile classification you want to use scaleQuantile to create your classification. For equal interval you want to use scaleQuantize along with having a min and max on your .domain. For jenks classification you want to have an array that you also use to create an amount of breaks, mine being 5 and then use scaleThreshold. For manual you use scaleThreshold and create your own domain number set that matches the amount of classes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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(housevacancypct, 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([\"#b35806\", \"#f1a340\", \"#f7f7f7\", \"#998ec3\", \"#542788\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(housevacancypct), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":".3. To determine the number of classes I would first take a look at your data and histogram and decide how many different classes you really need. So for mine since there are two different clusters, I would have a class for each cluster specifically along with a lowest class and highest class with a class inbetween the clusters. At the end of the day it is subjective but I would recommend having a decent amount of classes that show enough detail but aren't overused.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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(housevacancypct),d3.max(housevacancypct)])\n .range([\"#b35806\", \"#f1a340\", \"#f7f7f7\", \"#998ec3\", \"#542788\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(housevacancypct), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":".4. To select colors from ColorBrewer just find one that you think would divide data nicely to be obvious to the viewer. To create the color scales in observable you can use the hexcodes found in color viewer and then insert them repeating into the range on each different classification code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"md`# Manual Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([8.0, 9.5, 11.3, 14.2, 22.0])\n .range([\"#b35806\", \"#f1a340\", \"#f7f7f7\", \"#998ec3\", \"#542788\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(housevacancypct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":".5. You can map values/classes to colors using scales using the .range and then inserting the hexcodes in quotations with commas repeating.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"showScaleGrouping(housevacancypct, {\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"