Published
Edited
Feb 18, 2022
1 star
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
Alaska = FileAttachment("Alaska.json").json()
Insert cell
county_features = topojson.feature(Alaska, Alaska.objects.Alaska)
Insert cell
csv_data = d3.csvParse(await FileAttachment("Alaska@1.csv").text(),({FIPS, AGE_UNDER5, POP2010}) => [FIPS, +AGE_UNDER5/+POP2010])
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("Alaska@1.csv").text(), d3.autoType)).map(({FIPS, AGE_UNDER5, POP2010}) => ({FIPS: +FIPS, pctAgeUnder5: +AGE_UNDER5/+POP2010})))
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: "pctAgeUnder5", thresholds: bins})),
Plot.ruleY([0])
]
})
Insert cell
childpct = Array.from(csv_data.values(), d => d[1])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Percent Population of Alaska: 5 and Younger"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain(d3.extent(childpct))
.range(["white", "green"])
Insert cell
chart(numericSort(childpct), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(childpct)
.range(["white", "#99d594", "green"])
Insert cell
chart(numericSort(childpct), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(childpct, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "#99d594", "green"])
Insert cell
chart(numericSort(childpct), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(childpct),d3.max(childpct)])
.range(["#fde0dd", "#fa9fb5", "#c51b8a"])
Insert cell
chart(numericSort(childpct), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2])
.range(["white", "#99d594", "green"])
Insert cell
chart(numericSort(childpct), threshold)
Insert cell
showScaleGrouping(childpct, {
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