The avatar for @inlandcorgi891
inlandcorgi891
Published
Edited
Feb 21, 2022
Fork of Second Exercise on Observable: Classification and Colors
2
Insert cell
md`# Bennett Cournoyer, Assignment 2: Classification and Colors `
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
covid = FileAttachment("ia_covid19_county.json").json()
Insert cell
covid_county_features = topojson.feature(covid, covid.objects.ia_covid19_county)
Insert cell
csv_data = d3.csvParse(await FileAttachment("IA_COVID19_Cases.csv").text(),({FIPS, Deaths, Confirmed, pop_est_2018}) => [FIPS, (+Deaths/+pop_est_2018)*100, (+Confirmed/+pop_est_2018)*100])
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("IA_COVID19_Cases.csv").text(), d3.autoType)).map(({FIPS, Deaths, Confirmed, pop_est_2018}) => ({FIPS: +FIPS, DeathPct: (+Deaths/+pop_est_2018)*100, CasesPct: (+Confirmed/+pop_est_2018)*100 })))

Insert cell
//Removes the infinity data
csv_data_objects.splice(98)

Insert cell
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "DeathPct", thresholds: bins})),
Plot.ruleY([0])
]
})
Insert cell

viewof bins1 = Inputs.range([0, 20], {step: 1, label: "Bins1"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "CasesPct", thresholds: bins1})),
Plot.ruleY([0])
]
})

Insert cell
data = Object.assign(new Map(csv_data), {title: ["Covid Percentage by Population"]})
Insert cell
//Theres a null values in index 98 that needs removed
DeathNan = Array.from(csv_data.values(), d => d[1])
Insert cell

DeathPct = DeathNan.filter(function(val){return val > 0})
Insert cell
CasesPct = Array.from(csv_data.values(), d => d[2])
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain(d3.extent(DeathPct))
.range(["white", "purple"])
Insert cell
chart(numericSort(DeathPct), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(DeathPct)
.range(['#b3e2cd','#fdcdac','#cbd5e8'])
Insert cell
chart(numericSort(DeathPct), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(DeathPct, 5).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(['white','#bdbdbd','gray','purple', 'black'])
Insert cell
chart(numericSort(DeathPct), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(DeathPct),d3.max(DeathPct)])
.range(['#ffeda0','#feb24c','#f03b20'])
Insert cell
chart(numericSort(DeathPct), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.1, 0.2, 0.3, 0.4, 0.5])
.range(["#edf8fb", "#b3cde3", "#8c96c6", "#8856a7","#810f7c"])
Insert cell
chart(numericSort(DeathPct), threshold)
Insert cell
showScaleGrouping(DeathPct, {
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