md`# Gulick - Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
oregon = FileAttachment("Oregon_Census_Proj.json").json()
oregon_features = topojson.feature(oregon, oregon.objects.Oregon_Census_Proj)
csv_data = d3.csvParse(await FileAttachment("Oregon_Census_Proj.csv").text(),({STFID, TABLACK, TAPERSONS}) => [STFID, [STFID, +TABLACK/+TAPERSONS]])
stfid = Array.from(csv_data.values(), d => d[0])
pctblack = Array.from(csv_data.values(), d => d[1][1])
data = Object.assign(new Map(csv_data), {title: "Percentage Black"})
md`# Linear Scale (Unclassed)`
linear = d3.scaleLinear()
.domain([d3.min(pctblack),d3.max(pctblack)]) // can use d3.extent() for .domain as well
.range(["#efedf5", "#756bb1"]) // get colors from ColorBrewer(website) in HEX format
chart(numericSort(pctblack), linear)
md`# Quantile Classification`
quantile = d3.scaleQuantile()
.domain(pctblack)
.range(["#f2f0f7", "#cbc9e2", "#9e9ac8", "#6a51a3"])
chart(numericSort(pctblack), quantile)
md`# Jenks Natural Breaks Classification`
naturalbreaks = simple.ckmeans(pctblack, 4).map(v => v.pop())//naturalbreaks will decide where the breaks in your data should be depending on how many classes you want
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#f2f0f7", "#cbc9e2", "#9e9ac8", "#6a51a3"])
chart(numericSort(pctblack), jenks)
md`# Equal Interval Classification (Quantize)`
quantize = d3.scaleQuantize()
.domain([d3.min(pctblack),d3.max(pctblack)])
.range(["#f2f0f7", "#cbc9e2", "#9e9ac8", "#6a51a3"])
chart(numericSort(pctblack), quantize)
md`# Threshold`
threshold = d3.scaleThreshold()
.domain([0.05, 0.2, 0.38])
.range(["#f2f0f7", "#cbc9e2", "#9e9ac8", "#6a51a3"])
chart(numericSort(pctblack), threshold)
showScaleGrouping(pctblack, {
Quantile: quantile,
Threshold: threshold,
Jenks: jenks,
Quantize: quantize,
QuantizeNice: 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.
