2b:null 2c:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | ecooperohm | Observable"}] 31:T459,This histogram shows a strongly right-skewed distribution. Most counties fall estermely close to zero, forming a dense cluster between 0 and about .01. A second, smaller cluster appears between .01 and .02, and then the distribution stretches into a long, thin tail reaching towards .04. This tail contains only a few counties, which function as high-value outliers relative to the rest of the state. The overall pattern is: many very low values, a modest middle group, and a small number of unusually high observations. This histogram suggests that methods sensitive to uneven distributions and natural groupings will perform best. Natural breaks will be one of the best choices because it is designed to look at clusters and minimize within-class variance. Threshold will also be appropriate because the histogram shows where important boundaries should fall. Quantile and equal interval will be the least appropriate because it causes the data to be either forced into equal number of counties or stacked into the lowest bin, leaving us with small differences that are exaggerated and visually misleading maps!32:T671,An unclassed (continuous) scale is used when the underlying data is continuous, meaning it can take on any numeric value within a range. My variable nursingprct is a continuous proportion, so a continuous scale is appropriate. In ObservableHQ, I build this type of scale using d3.scaleLinear(), which maps numeric values directly to a smooth color gradient without creating discrete classes. To construct the scale, I first calculate the domain using d3.extent(nursingprct), which returns the minimum and maximum values in the dataset. This ensures the scale reflects the full range of the data. For the color ramp, I visted https://colorbrewer2.org/#type=sequential&scheme=PuBu&n=6 and selected a sequential color scheme, which is designed for ordered numeric data and provides a visually smooth transition from light to dark. The final scale function takes any numeric value from my dataset and returns a corresponding color, allowing me to visualize continuous variation across counties. D3 scales map numeric values to colors by using the domain to determine where a value falls and the range to assign the appropriate color. Continuous scales like scaleLinear or scaleSequential interpolate smoothly between colors, so every value receives a unique shade. Classified scales such as scaleQuantile, scaleQuantize, and scaleThreshold divide the data into discrete classes using breakpoints, and each class is assigned a single color. When a value is passed into the scale, D3 determines which class it belongs to and returns the corresponding color. The number of colors in the range must match the number of classes in the classification method 33: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; }34:[{"id":"7767620d1b42c58dbcba5d76b3487ffdb0c1871e0742e7f35f573351957551d6c349450b083498b9da4197cf3ce3c558053a167c98ae46f9ffcf4ade43a0abec","href":"https://static.observableusercontent.com/files/7767620d1b42c58dbcba5d76b3487ffdb0c1871e0742e7f35f573351957551d6c349450b083498b9da4197cf3ce3c558053a167c98ae46f9ffcf4ade43a0abec","name":"NE_Counties.json","type":"application/json","lastModified":1772689463040.631,"size":300309},{"id":"65dc5ce75c883dc06c6f0b1b7a11a8f485e51e06a772e0af731e3456985fd4f4491ed709037e8b0e829133f5af9b200f637843017f67c2f6cdea13a152fa7d4c","href":"https://static.observableusercontent.com/files/65dc5ce75c883dc06c6f0b1b7a11a8f485e51e06a772e0af731e3456985fd4f4491ed709037e8b0e829133f5af9b200f637843017f67c2f6cdea13a152fa7d4c","name":"NE_Counties.csv","type":"text/csv","lastModified":1772689480097.844,"size":25320}] 2f:{"id":"aa77281dbdadc5e6","slug":null,"title":"Second Exercise on Observable: Classification and Colors","thumbnail":"36934de5930da2598c08f555aa40f534d4a90e2b0c56ed733b588ebc8d3ca383","access_level":"public","create_time":"$D2026-03-05T05:42:11.771Z","update_time":"$D2026-03-05T19:27:49.694Z","view_time":null,"first_public_time":"$D2026-03-05T18:09:38.159Z","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":"1176304753e7a7dd","login":"ecooperohm","name":"ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/f7b82c7f667fcbcc238d0984c5e6f8f983c2fbfe2bb51a6e28f84025055886fe","tier":"starter_2024"},"version":524,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"24ddb38576d505bb","login":"ecooperohm","name":"Ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/621900530db91e2c1d81ee1fea07a3118cbb6833cd659c9bd8ec8a64b31dbbf7","tier":null}],"members":[{"type":"team","id":"1176304753e7a7dd","login":"ecooperohm","name":"ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/f7b82c7f667fcbcc238d0984c5e6f8f983c2fbfe2bb51a6e28f84025055886fe","tier":"starter_2024","role":"editor"},{"type":"individual","id":"24ddb38576d505bb","login":"ecooperohm","name":"Ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/621900530db91e2c1d81ee1fea07a3118cbb6833cd659c9bd8ec8a64b31dbbf7","tier":null,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Counties = FileAttachment(\"NE_Counties.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Counties, Counties.objects.County_Boundaries_Census)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data_objects = d3.csvParse(\n await FileAttachment(\"NE_Counties.csv\").text(),\n ({ Total_Popu, COUNTYFP, NursingFac }) => ({\n COUNTYFP: +COUNTYFP,\n nursingprct: (+NursingFac) / (+Total_Popu)\n })\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md To insert the data, we followed to same steps as assignment 1. Where we uploaded and read the toposjon and csv files of Nebraska counties and normalized the number of nursing facilities by taking the number of nursing facilities/total population per county. This will potentially show us what healthcare coverage is like in Nebraska, a very rural state. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([1, 30], {step: 1, value: 6, 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: \"nursingprct\", thresholds: bins})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"nursingprct = csv_data_objects.map(d => d.nursingprct)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = new Map(csv_data_objects.map(d => [String(d.COUNTYFP), d.nursingprct]))","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":485,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(nursingprct))\n .range([\"white\", \"#045a8d\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(nursingprct), 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":490,"value":"Quantile classification divides the data into classes that each contain the same number of observations. I create my quantile scale using d3.scaleQuantile(), which calculates the breakingpoints based on the distribution of nursingprct. The domain is the full array of values, and the range is a 4-color palette that moves from white to dark blue. Because quantile classification forces equal group sizes, it is useful for highlighting relative differences between counties, even when the data is skewed. The scale assigns each value to one of the 4 quantile bins and responds the corresponding color. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(nursingprct)\n .range([\"white\", \"#d0d1e6\", \"#a6bddb\", \"#2b8cbe\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(nursingprct), 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":492,"value":"Natural breaks classification identifies clusters in the data by minimizing within-class variance and maximizing differences between classes. I found the breakpoints with ckmeans, stored them in naturalbreaks, and then put them in .scaleThreshold(). This made a threshold scale in which each class boundary corresponds to a natural gap in the data. I used the same 4-color palette for each of my classification methods to ensure they were easy to compare when scrolling. Jenks is a good classification for my data, because nursingprct is heavily right-skewed and contains clear clusters near zero and in the upper tail. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(nursingprct, 3).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([\"white\", \"#d0d1e6\", \"#a6bddb\", \"#2b8cbe\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(nursingprct), 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":494,"value":"Equal interval classification divides the data into equally sized bins, regardless of how many observations fall into each bin. To do this, I used the command dr.scaleQuantize() which requires only the min and max values of nursingprct as the domain. The scale splits that range into 4 equal-width intervals and assigns each of them the same 4 colors from my palette. Equal interval interval is simple, and easy to interpret. However, because by data is skewed, most counties fell into the lowest class. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(nursingprct),d3.max(nursingprct)])\n .range([\"white\", \"#d0d1e6\", \"#a6bddb\", \"#2b8cbe\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(nursingprct), 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":500,"value":"This classification let me define class boundaries based on what I saw in this histogram. I identified in the histogram that there were some natural valleys in the distribution. There was a heavy cluster of values at 0, a sexond cluster around .01 and .02, and a long right-skewed tail extending towards .04. To reflect this pattern, I selected the below breaking points, which separate the major clusters and isolate the highest values into their own class. I did this by using d3.scaleThreshold(), which assigns each value to a class based on the fix boundaries I gave it, then maps that class to a color. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.005, 0.01, 0.02, 0.03])\n .range([\"white\", \"#d0d1e6\", \"#a6bddb\", \"#2b8cbe\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(nursingprct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(nursingprct, {\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":false,"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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"