Published
Edited
Mar 5, 2021
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
US_counties = FileAttachment("us_counties.json").json()
Insert cell
county_features = topojson.feature(US_counties, US_counties.objects.us_counties)
Insert cell
csv_data = d3.csvParse(await FileAttachment("cb_2018_us_ua10_500k.csv").text(),({ GEOID10, AWATER10, ALAND10}) => [GEOID10, +AWATER10/((+AWATER10)+(+ALAND10))])
Insert cell
urbanarea = Array.from(csv_data.values(), d => d[1]).filter(d => d != Infinity)
Insert cell
perurban = Object.assign(new Map(csv_data), {title: ["County", "Area of Land and Water in US Counties"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain([d3.min(urbanarea),d3.max(urbanarea)])
.range(["#e0ecf4", "#8856a7"])
Insert cell
chart(numericSort(urbanarea), linear)
Insert cell
mycolors = ["#e0ecf4", "#99d594", "#8856a7"]
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(urbanarea)
.range(mycolors)
Insert cell
chart(numericSort(urbanarea), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(urbanarea, mycolors.length).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(mycolors)
Insert cell
chart(numericSort(urbanarea), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(urbanarea),d3.max(urbanarea)])
.range(mycolors)
Insert cell
chart(numericSort(urbanarea), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2, ,d3.max(urbanarea)])
.range(mycolors)
Insert cell
chart(numericSort(urbanarea), threshold)
Insert cell
showScaleGrouping(urbanarea, {
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