Published
Edited
Feb 26, 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
ia_counties = FileAttachment("census_2010_county_DP1.json").json()
Insert cell
ia_counties_features = topojson.feature(ia_counties, ia_counties.objects.census_2010_county_DP1)
Insert cell
csv_data = d3.csvParse(await FileAttachment("census_2010_county_DP1.csv").text(),({GEOID10, NAMELSAD10, ALAND10, AWATER10, DP0010001}) => [GEOID10, NAMELSAD10, ALAND10, AWATER10, DP0010001, ALAND10 / DP0010001])
Insert cell
land2pop = Array.from(csv_data.values(), d => d[5])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Land Area within County to Population"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear() // define classification method
.domain([d3.min(land2pop),d3.max(land2pop)]) // define top and bottom numerical values
.range(["white", "teal"]) // define bottom level and top level colors to smooth across our values
Insert cell
chart(numericSort(land2pop), linear) // apply linear unclassed classifier just created on our land2pop array
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile() // define classification mathod
.domain(land2pop) // define what data (array) you will use
.range(["white", "#f7fcb9", "#addd8e", "#31a354"]) // define colors (# of classes) used in your classes
Insert cell
chart(numericSort(land2pop), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
Insert cell
jenks = d3.scaleThreshold() // define classification method
.domain(naturalbreaks) // define the data array you wish to use that includes the natural break points
.range(["#ffffb2", "#fecc5c", "#fd8d3c", "#e31a1c"]) // define colors to be used for the classes
Insert cell
chart(numericSort(land2pop), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize() // define classification method
.domain([d3.min(land2pop),d3.max(land2pop)]) // define lower and upper limits to data
.range(["#feebe2", "#fbb4b9", "#f768a1", "#ae017e"]) // define colors (# of classes) to be used for categories
Insert cell
chart(numericSort(land2pop), quantize)
Insert cell
md`# --End of Assignment 2--`
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.06444582814445828, 0.09325355890241387, 0.12106180453143853])
.range(["white", "#99d594", "green"])
Insert cell
chart(numericSort(land2pop), threshold)
Insert cell
showScaleGrouping(land2pop, {
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