md`# Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
states = FileAttachment("US_county_2022_cont_WGS84.json").json()
states_features = topojson.feature(states, states.objects.US_county_2022_cont_WGS84)
csv_data = d3.csvParse(await FileAttachment("US_county_2022_cont_WGS84.csv").text(),({NAME, ALAND, AWATER}) => [NAME, AWATER/(AWATER+ALAND)])
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("US_county_2022_cont_WGS84.csv").text(), d3.autoType)).map(({NAME, ALAND, AWATER}) => ({NAME:NAME, Watercoverpct: AWATER/(AWATER+ALAND)})))
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "Watercoverpct", thresholds: bins})),
Plot.ruleY([0])
]
})
Watercoverpct = Array.from(csv_data.values(), d => d[1])
data = Object.assign(new Map(csv_data), {title: ["Percenetage of water area to total area by county"]})
md`# Linear Scale (Unclassed)`
linear = d3.scaleLinear()
.domain(d3.extent(Watercoverpct))
.range(["white", "green"])
chart(numericSort(Watercoverpct), linear)
md`# Quantile Classification`
quantile = d3.scaleQuantile()
.domain(Watercoverpct)
.range(["white", "#9ecae1", "blue"])
chart(numericSort(Watercoverpct), quantile)
md`# Jenks Natural Breaks Classification`
naturalbreaks = simple.ckmeans(Watercoverpct, 5).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "#fdae6b", "#e6550d"])
chart(numericSort(Watercoverpct), jenks)
md`# Equal Interval Classification (Quantize)`
quantize = d3.scaleQuantize()
.domain(d3.extent(Watercoverpct))
.range(["White", "#c51b8a"])
chart(numericSort(Watercoverpct), quantize)
md`# Threshold`
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2])
.range(["white", "#99d594", "green"])
chart(numericSort(Watercoverpct), threshold)
showScaleGrouping(Watercoverpct, {
scaleQuantile: quantile,
scaleThreshold: threshold,
scaleJenks: jenks,
scaleQuantize: quantize,
scaleQuantizeNice: quantize.copy().nice()
})
md`# Annex`
function chart(data, scale) {
const w = 7.5,
cols = Math.floor(Math.min(1200, width) / w),
lines = Math.ceil (3500 / cols);
const chart = d3
.create("svg")
.attr("width", cols * w)
.attr("height", lines * w);
chart
.append("g")
.attr("transform", "translate(2,2)")
.attr("style", "stroke:black; fill:white;")
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", w - 3)
.attr("height", w - 3)
.attr("x", (_, i) => w * (i % cols))
.attr("y", (_, i) => w * ((i / cols) | 0))
.style("fill", d => (scale ? scale(d) : "#ddd"));
return chart.node();
}
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.
