Public
Edited
Feb 28, 2023
Insert cell
md`# Assignment #2, ecountryman`
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
Counties = FileAttachment("tl_2016_53_cousub.json").json()
Insert cell
counties_features = topojson.feature(Counties, Counties.objects.tl_2016_53_cousub)
Insert cell
csv_data = d3.csvParse(await FileAttachment("DECENNIALPL2020.P1-Data.csv").text(),({GeographicAreaName, TotalWhite, TotalPop}) => [GeographicAreaName, +TotalWhite/+TotalPop])
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("DECENNIALPL2020.P1-Data.csv").text(), d3.autoType)).map(({GeographicAreaName, TotalWhite, TotalPop}) => ({GeographicAreaName: GeographicAreaName, pctWhite: +TotalWhite/+TotalPop})))
Insert cell
viewof bins = Inputs.range([0, 45], {step: 1, label: "Bins"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "pctWhite", thresholds: bins})),
Plot.ruleY([0])
]
})
// This histogram shows the raw distrobution of the data ranging from ~40% to ~95%. There was no data below 40% and above ~95% so it is not displayed. The x-axis shows the percentage of population to be white while the y-axis shows the frequency of that percentage, or how many times that percentage is present as a count. The range 0-45 was chosen because the data contained 41 values so if a larger range was chosen then the data would be much harder to interpret with the breaks appearing much larger than they really are.
Insert cell
whitepct = Array.from(csv_data.values(), d => d[1])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Percent Population of Washington that is White"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain(d3.extent(whitepct))
.range(["white", "orange"])

Insert cell
chart(numericSort(whitepct), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(whitepct)
.range(["white", "#9ecae1", "#3182bd"])
Insert cell
chart(numericSort(whitepct), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(whitepct, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "#99d594", "green"])
Insert cell
chart(numericSort(whitepct), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(whitepct),d3.max(whitepct)])
.range(["#efedf5", "#bcbddc", "#756bb1"])
Insert cell
chart(numericSort(whitepct), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.65, 0.8, 1]) // These values were used to display low, medium, and high values from the Histogram
.range(["#e5f5e0", "#99d594", "green"])
Insert cell
chart(numericSort(whitepct), threshold)
Insert cell
showScaleGrouping(whitepct, {
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