2b:null 2c:["$","title",null,{"children":"Classification and Colors: SEES:3540 Assignment #2 | kbyriel | 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":"cfa069162205400b1b06411bf2621b022762080d96f75f7a4af29a003e7b521a7b9006924f68da9eeaa4d11ad65acd53ec8502de2fcc0f51808abafdbe13eb81","href":"https://static.observableusercontent.com/files/cfa069162205400b1b06411bf2621b022762080d96f75f7a4af29a003e7b521a7b9006924f68da9eeaa4d11ad65acd53ec8502de2fcc0f51808abafdbe13eb81","name":"states48.csv","type":"text/csv","lastModified":1778341722380.512,"size":19045},{"id":"38937e4d93266a54bc08768416c80fca8ae053456a9b42580ffbdf54966f18839e4fc0eff3587e1160c9daeb8975b3835200c87cbd7da921e3ba161d7b66acd3","href":"https://static.observableusercontent.com/files/38937e4d93266a54bc08768416c80fca8ae053456a9b42580ffbdf54966f18839e4fc0eff3587e1160c9daeb8975b3835200c87cbd7da921e3ba161d7b66acd3","name":"states48.json","type":"application/json","lastModified":1778341733258.201,"size":80032}] 2f:{"id":"877b2c076eba6e3f","slug":null,"title":"Classification and Colors: SEES:3540 Assignment #2","thumbnail":"365e952d17f23b2e6cd99aaedf745a0f3a2b9d4d489aed6c001bd43ecfc0eb1e","access_level":"public","create_time":"$D2026-05-09T15:48:02.068Z","update_time":"$D2026-05-09T23:59:41.877Z","view_time":null,"first_public_time":"$D2026-05-09T19:57:05.943Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c08ca27a48b753b4","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/2b6bcaa44fca7e369b4e475abe55e89307f7b10c9512f7ee8872ee480ae770e9","tier":"starter_2024","bio":""},"version":736,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d6716eb8c379b89b","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/4c3893a14e087b11242ce1b342eec928853fbaca6fd4a69b30a0b0673a66f2e8","tier":null,"bio":""}],"members":[{"type":"individual","id":"d6716eb8c379b89b","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/4c3893a14e087b11242ce1b342eec928853fbaca6fd4a69b30a0b0673a66f2e8","tier":null,"role":"editor"},{"type":"team","id":"c08ca27a48b753b4","login":"kbyriel","name":"kbyriel","avatar_url":"https://avatars-next.observableusercontent.com/2b6bcaa44fca7e369b4e475abe55e89307f7b10c9512f7ee8872ee480ae770e9","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Classification and Colors: SEES:3540 Assignment #2","cells":[{"id":0,"value":"md`# Classification and Colors: SEES:3540 Assignment #2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"This notebook explores different methods of thematic mapping classifications using a normalized variable. The work included creating continuous color scales. and histogram analysis to compare the distribution of the variable's data. This allows map interpretation and in depth data visualization. Visualization will strive for displaying the data accurately and in an accessible way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"states = FileAttachment(\"states48.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"state_features = topojson.feature(states, states.objects.states48)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"csv_data = d3.csvParse(await FileAttachment(\"states48.csv\").text(),({FIPS, AGE_45_54, POP2010}) => [FIPS, +AGE_45_54/+POP2010])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"## Loading and Preparing Data\n\nThe data built in this notebook is listed above. The spatial data is loaded using TopoJSON and the attribute data is loaded using a CSV file. After loading both datasets into observable, they were joined using a geographic identifier. The selected variable is the population of those between 45 and 54 years old, to represent a section of middle aged adults. AGE_45_54 is a normalized variable in order to make comparisons fair across geographic areas. Normalization reduces the influence of population size and regional differences, to ensure that patterns are ables to be interpreted accurately.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"csv_data_objects = Object.assign((d3.csvParse(await FileAttachment(\"states48.json\").text(), d3.autoType)).map(({FIPS, AGE_UNDER5, POP2010}) => ({FIPS: +FIPS, pctAgeUnder5: +AGE_UNDER5/+POP2010})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof bins = Inputs.range([1, 100], {step: 1, label: \"Bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"bins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"Array.isArray(csv_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"csv_data.slice(0,5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"csv_data.filter(d => d.pctAgeMiddleAge == null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n csv_data,\n Plot.binX(\n {y: \"count\"},\n {x: d => d[1], thresholds: bins}\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"middleagepct = Array.from(csv_data.values(), d => d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent US Population Age 45-54\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"## Histogram Interpretation\nThis histogram displays the distribution of the percentage of middle-ages adults, ages 45-54, across the United States. Most observations are concentrated within the middle percentage ranges, while fewer areas contain very low or very high percentages of middle aged adults. Overall the histogram is normally distributed with a moderately clustered distribution, and some variation toward the upper and lower ends of the dataset.\n\nThe histogram suggests that the data is not perfectly uniform, so some classification methods might do a better job at capturing the data's distribution than others. Possible classification methods are explored below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"## Tools Being Used\nColorBrewer sequential color schemes are used in the classification color schemes for this notebook. ColorBrewer was used to select more complex color palettes rather than the default observable values that are designed for ordered numeric data. The chosen palettes were sequential, progressing from light to dark colors; used to represent low to high values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear()\n .domain(d3.extent(middleagepct))\n .range([\"white\", \"purple\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(middleagepct), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"## Unclassed Continuous Scale\n\nAn unclassed scale assigns colors continously across the full range of data values. As shown in the color selection above (purple) there is a smooth visual transition between low and high values. In the linear model code, the domain represents the minimum and maximum values of the normalized percent of adults aged 45-54. The range represents the sequence of colors assigned to those values, with lower values assigned white with a gradual increase of purple intensity as values increase.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(middleagepct)\n .range([\"white\", \"#a6bddb\", \"#1c9099\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(middleagepct), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"## Quantile Classifying\nQuantile classification divides the dataset so that each class contains approximately the same number of observations. This method is useful for emphasizing relative ranking across geographic units. Quantile breakpoints were calculated from the sorted dataset values. The green sequential color scheme does a sufficient job at capturing three specific numeric breakpoints. I chose a sequential color scheme given that this classification method is used to rank the data. The blue palette I chose from ColorBrewer captures the logical progression from high to low values. 3 Classes was the best choice to maintain readability and for best reader interpretation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(middleagepct, 3).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range([\"#fde0dd\", \"#fa9fb5\", \"#c51b8a\", \"#c51b8a\", \"#7a0177\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(middleagepct), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"## Natural Breaks (Jenks)\n\nNatural breaks classification identifies clusters within the data and places class breaks where there are large gaps between values. \nThis minimizes variation within classes while maximizing variation between classes. Jenks classification is useful for this data to unevenly distribute the dataset so that the viewer can better interpret the data's natural structure. I chose a sequential color scheme for this data to pinpoint the higher values of middle-age individuals. Since natural breaks represents ordered data, a single hue gradient shows continuous increase for interpretation. This color scheme also makes distinct groups of low, medium, and high values that are easy to differentiate while remaining easy to associate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"### Determining the Number of Classes\n\nFive classes were defined but only 3 classes were used. This was due to examining the data distribution and this number provided a balance between detail and readability. Too few classes can hide variation in the data, while too many classes may make patterns difficult to interpret. 3 Classes was the best choise to maintain readability and for best reader interpretation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain([d3.min(middleagepct),d3.max(middleagepct)])\n .range([\"#f1a340\", \"#ffffbf\", \"#91cf60\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(middleagepct), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"## Equal Interval Classifying\n\nEqual interval classification divides the total data range into classes of equal numeric width. \nThe interval size is calculated by subtracting the minimum value from the maximum value and dividing by the number of classes. This method is useful when comparing values to consistent numeric ranges. To best represent data on middle aged adults I chose a diverging color scheme to pinpoint the low and high tails of middle-age distribution. The color palette chosen from ColorBrewer shows two different colors (orange, and green), as they move away from a central neutral value (yellow). According to the histogram, the data has somewhat of a natural midpoint, this color scheme effectively highlights the values above and below the midpoint values. 3 Classes was best for best reader interpretation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"md`# Threshold: Manual Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.13, 0.14, 0.16])\n .range([\"white\", \"#99d594\", \"Blue\", \"#08306b\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(middleagepct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"## Manual Classification\n\nManual classification uses user-defined break values instead of automated calculations. This method allowed me to emphasize meaningful thresholds or policy-relevant categories. I chose the break values of 0.13%, 0.14%, and 0.16% based on standard deviation of the data. In the original histogram, the data has a central cluster of middle aged adults toward the center between about 0.14% and 0.16%. The lower end values outside the cluster fall around 0.13% or much lower, while the upper non-cluster values fall after 0.16%. Paired with a sequential color scheme, this classification method captures the over all data distribution in four classes based off minima and maxima values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"showScaleGrouping(middleagepct, {\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"