md`# Assignment 2: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
block_group = FileAttachment("IA_block_group.json").json()
blkgrp_features = topojson.feature(block_group, block_group.objects.IA_block_group)
csv_data = d3.csvParse(await FileAttachment("HH_info.csv").text(),({GISJOIN, STATE, COUNTY, BLKGRPA, TRACTA, Total_HH, Family_HH, Nonfamily_HH}) => [GISJOIN, +Family_HH/+Total_HH])
normalized_data = Object.assign((d3.csvParse(await FileAttachment("HH_info.csv").text(), d3.autoType)).map(({GISJOIN, STATE, COUNTY, BLKGRPA, TRACTA, Total_HH, Family_HH, Nonfamily_HH}) => ({GISJOIN: +GISJOIN, HH_pct: +Family_HH/+Total_HH})))
md`## Defining Normalized Variable`
HH_pct = Array.from(csv_data.values(), d => d[1])
md`## Creating Histogram`
viewof bins = Inputs.range([0, 10], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(normalized_data, Plot.binX({y: "count"}, {x: "HH_pct", thresholds: bins})),
Plot.ruleY([0])
]
})
data = Object.assign(new Map(csv_data), {title: ["Percent Family Household in Iowa"]})
md`# Linear Scale (Unclassed)`
md`## Creating Unclassed Map`
unclassed = d3.scaleLinear()
.domain(d3.extent(HH_pct))
.range(["#fee8c8", "#e34a33"])
chart(numericSort(HH_pct), unclassed)
md`# Quantile Classification`
md`## Creating Quantile Classification`
quantile = d3.scaleQuantile()
.domain(HH_pct)
.range(["#fef0d9", "#fdcc8a", "#fc8d59", "#d7301f"])
chart(numericSort(HH_pct), quantile)
md`# Jenks Natural Breaks Classification`
md`## Creating Natural Breaks Classification`
naturalbreaks = simple.ckmeans(HH_pct, 5).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#fef0d9", "#fdcc8a", "#fc8d59", "#e34a33", "#b30000"])
chart(numericSort(HH_pct), jenks)
md`# Equal Interval Classification (Quantize)`
md`## CreatingEqual Interval Classification (Quantize)`
quantize = d3.scaleQuantize()
.domain([d3.min(HH_pct),d3.max(HH_pct)])
.range(["#fee8c8", "#fdbb84", "#e34a33"])
chart(numericSort(HH_pct), quantize)
md`# Threshold`
md`## Creating Manual Classification (Threshold)`
threshold = d3.scaleThreshold()
.domain([0.3, 0.6, 0.9])
.range(["#fef0d9", "#fdcc8a", "#fc8d59", "#d7301f"])
chart(numericSort(HH_pct), threshold)
showScaleGrouping(HH_pct, {
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.
