md`# Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
cntydisbl = FileAttachment("lab1project.json").json()
county_features = topojson.feature(cntydisbl, cntydisbl.objects.lab1project)
csv_data = d3.csvParse(await FileAttachment("lab1project.csv").text(),({PID, tot_pop, tot_dis}) => [PID, [100*+tot_dis/tot_pop]])
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("lab1project.csv").text(), d3.autoType)).map(({PID, tot_dis, tot_pop}) => ({PID: +PID, pctdisabl: +tot_dis/+tot_pop})))
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "pctdisabl", thresholds: bins})),
Plot.ruleY([0])
]
})
pctdisabl = Array.from(csv_data.values(), d => d[1])
data = Object.assign(new Map(csv_data), {title: ["Percent Population Disabled by County"]})
md`# Unclassed Linear Scale`
linear = d3.scaleLinear()
.domain(d3.extent(pctdisabl))
.range(["#f0f0f0", "#de2d26", ])
chart(numericSort(pctdisabl), linear)
md`# Classification #1: Quantile`
quantile = d3.scaleQuantile()
.domain(pctdisabl)
.range(["#fee5d9", "#fb6a4a", "#a50f15"])
chart(numericSort(pctdisabl), quantile)
md`# Classification #2: Natural Breaks`
naturalbreaks = simple.ckmeans(pctdisabl, 3).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#eff3ff", "#6baed6", "#08519c"])
chart(numericSort(pctdisabl), jenks)
md`# Classification #3: Equal Interval`
quantize = d3.scaleQuantize()
.domain([d3.min(pctdisabl),d3.max(pctdisabl)])
.range(["#edf8e9", "#74c476", "#006d2c"])
chart(numericSort(pctdisabl), quantize)
md`# Classification #4: Manual Threshold`
threshold = d3.scaleThreshold()
.domain([25, 50])
.range(["#feedde", "#fd8d3c", "#a63603"])
chart(numericSort(pctdisabl), threshold)
md`# Data Comparison`
showScaleGrouping(pctdisabl, {
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.
