md`# Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
US = FileAttachment("dtl_cnty.json").json()
county_features = topojson.feature(US, US.objects.dtl_cnty)
csv_data = d3.csvParse(await FileAttachment("dtl_cnty.csv").text(),({FIPS, POPULATION, SQMI}) => [+FIPS, +POPULATION/+SQMI])
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("dtl_cnty.csv").text(), d3.autoType)).map(({FIPS, POPULATION, SQMI}) => ({FIPS: +FIPS, uscountypopdensity: +POPULATION/+SQMI})))
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "uscountypopdensity", thresholds: bins})),
Plot.ruleY([0])
]
})
uscountypopdensity = Array.from(csv_data.values(), d => d[1])
data = Object.assign(new Map(csv_data), {title: ["US County Population Density"]})
d3.mean(uscountypopdensity)
d3.median (uscountypopdensity)
md`# Linear Scale (Unclassed)`
chart(numericSort(uscountypopdensity), linear)
md`# Quantile Classification`
quantile = d3.scaleQuantile()
.domain(uscountypopdensity)
.range(["#f0f9e8", "#bae4bc", "#7bccc4", "#2b8cbe"])
chart(numericSort(uscountypopdensity), quantile)
md`# Jenks Natural Breaks Classification`
naturalbreaks = simple.ckmeans(uscountypopdensity, 5).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#fef0d9", "#fdcc8a", "#fc8d59", "#e34a33", "#b30000"])
chart(numericSort(uscountypopdensity), jenks)
md`# Equal Interval Classification (Quantize)`
quantize = d3.scaleQuantize()
.domain([d3.min(uscountypopdensity),d3.max(uscountypopdensity)])
.range(["#f0f9e8", "#7bccc4", "#0868ac"])
chart(numericSort(uscountypopdensity), quantize)
md`# Threshold`
threshold = d3.scaleThreshold()
.domain([1, 20, 90, 500, 2000, 72588.3])
.range(["#fef0d9", "#fdd49e", "#fdbb84", "#fc8d59", "#e34a33", "#b30000"])
chart(numericSort(uscountypopdensity), threshold)
showScaleGrouping(uscountypopdensity, {
scaleQuantile: quantile,
scaleThreshold: threshold,
scaleJenks: jenks,
scaleQuantize: quantize,
scaleQuantizeNice: quantize.copy().nice()
})
md`# Annex`
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
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.
