Published
Edited
Mar 2, 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
Alabama = FileAttachment("Alabama.json").json()
//I am using a new shapefile & CSV for Assignment 2 (no longer using eu cities)
Insert cell
county_features = topojson.feature(Alabama, Alabama.objects.Alabama1)
Insert cell
csv_data = d3.csvParse(await FileAttachment("Alabama.csv").text(),({FIPS, AGE_5_9, POP2010}) => [FIPS, [+AGE_5_9, +AGE_5_9/+POP2010]])
//This is the normalized variable I will be mapping. It was created by diving the population between 5-9 by the total population for each county in Alabama.
Insert cell
childpct = Array.from(csv_data.values(), d => d[1][1])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Percent Population of Alabama: between 5 & 9"]})
Insert cell
md`# Before we Map...`
Insert cell
//I will not get into the best practices for mapping, such as number of classes or colors to use, but the following classifications were constrained by these 'best practices'.
//I stuck with 3 classes for the classification methods, except quantile where I used 5. For the number of objects I am using (67) I decided 3-5 classes was sufficient for each classiciation method. Equal Interval wasn't a great breakdown regardless of classes but is shown below with 3.
//The colors were created using colorbrewer. I chose a range of schemes in which each class is easily identafiable.
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain([d3.min(childpct),d3.max(childpct)])
.range(["white", "blue"])
Insert cell
chart(numericSort(childpct), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(childpct)
.range(["#edf8fb", "#b2e2e2", "#66c2a4", "#2ca25f", "#006d2c"])
Insert cell
chart(numericSort(childpct), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(childpct, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#fee8c8", "#fdbb84", "#e34a33"])
Insert cell
chart(numericSort(childpct), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(childpct),d3.max(childpct)])
.range(["white", "#9ebcda", "#8856a7"])
Insert cell
chart(numericSort(childpct), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.06444582814445828, 0.09325355890241387, 0.12106180453143853])
.range(["#deebf7", "#9ecae1", "#3182bd"])
Insert cell
chart(numericSort(childpct), threshold)
Insert cell
showScaleGrouping(childpct, {
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