Public
Edited
Feb 27
Insert cell
md`# Second Exercise on Observable: Classification and Colors`
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
Oregon = FileAttachment("Oregon_county_2020_WGS.json").json()
Insert cell
oregon_features = topojson.feature(Oregon, Oregon.objects.Oregon_county_2020_WGS)
Insert cell
csv_data = d3.csvParse(await FileAttachment("Hispanic_2020_Oregon_County.csv").text(),({COUNTYA, U7K001, U7K003}) => ([+COUNTYA, 100*+U7K003/U7K001]))
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("Hispanic_2020_Oregon_County.csv").text(), d3.autoType)).map(({COUNTYA, U7K001, U7K003}) => ({COUNTYA: +COUNTYA, pctHispanic: 100*+U7K003/U7K001})))
Insert cell
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "pctHispanic", thresholds: bins})),
Plot.ruleY([0])
]
})
Insert cell
pctHispanic = Array.from(csv_data.values(), d => d[1])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Hispanic or Latino Origin in Oregon Counties"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain(d3.extent(pctHispanic))
.range(["#deebf7", "#3182bd"])
Insert cell
chart(numericSort(pctHispanic), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(pctHispanic)
.range(["#e5f5e0", "#a1d99b", "#31a354"])
Insert cell
chart(numericSort(pctHispanic), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(pctHispanic, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#efedf5", "#bcbddc", "#756bb1"])
Insert cell
chart(numericSort(pctHispanic), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain(d3.extent(pctHispanic))
.range(["#fee6ce", "#fdae6b", "#e6550d"])
Insert cell
chart(numericSort(pctHispanic), quantize)
Insert cell
md`# Threshold`
Insert cell
d3.min(pctHispanic)
Insert cell
d3.max(pctHispanic)
Insert cell
threshold = d3.scaleThreshold()
.domain([4, 35])
.range(["#f0f0f0", "#bdbdbd", "#636363"])
Insert cell
chart(numericSort(pctHispanic), threshold)
Insert cell
showScaleGrouping(pctHispanic, {
scaleQuantile: quantile,
scaleThreshold: threshold,
scaleJenks: jenks,
scaleQuantize: quantize,
scaleQuantizeNice: quantize.copy().nice()
})
Insert cell
md`# Annex`
Insert cell
Insert cell
Insert cell
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more