md`# Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
counties = FileAttachment("JHU_US_Counties.json").json()
counties_features = topojson.feature(counties, counties.objects.JHU_Counties)
// How do I view the column names for my csv?
county_covid = FileAttachment("NH_county_vaccines.csv").csv();
col_names = Object.keys(county_covid[0]);
md`The column names are: \`${col_names}\``;
csv_data = d3.csvParse(await FileAttachment("NH_county_vaccines.csv").text(),({fips, recent_percentage_of_current_residents_who_received_a_completed_covid_19_vaccination_at_any_time}) => [fips, +recent_percentage_of_current_residents_who_received_a_completed_covid_19_vaccination_at_any_time])
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("NH_county_vaccines.csv").text(), d3.autoType)).map(({fips, recent_percentage_of_current_residents_who_received_a_completed_covid_19_vaccination_at_any_time}) => ({fips: +fips,pctResVac: +recent_percentage_of_current_residents_who_received_a_completed_covid_19_vaccination_at_any_time})))
viewof bins = Inputs.range([0, 100], {step: 10, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "pctResVac", thresholds: bins})),
Plot.ruleY([0])
]
})
resPct = Array.from(csv_data.values(), d => d[1])
data = Object.assign(new Map(csv_data), {title: ["Percent Vaccinated Nursing Home Residents"]})
md`# Linear Scale (Unclassed)`
linear = d3.scaleLinear()
.domain(d3.extent(resPct))
.range(["white", "green"])
chart(numericSort(resPct), linear)
md`# Quantile Classification`
quantile = d3.scaleQuantile()
.domain(resPct)
.range(["white", "#99d594", "green"])
chart(numericSort(resPct), quantile)
md`# Jenks Natural Breaks Classification`
naturalbreaks = simple.ckmeans(resPct, 3).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "#99d594", "green"])
chart(numericSort(resPct), jenks)
md`# Equal Interval Classification (Quantize)`
quantize = d3.scaleQuantize()
.domain([d3.min(resPct),d3.max(resPct)])
.range(["#fde0dd", "#fa9fb5", "#c51b8a"])
chart(numericSort(resPct), quantize)
md`# Threshold`
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2])
.range(["white", "#99d594", "green"])
chart(numericSort(resPct), threshold)
showScaleGrouping(resPct, {
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.
