The avatar for @kschlotfelt
kschlotfelt
Published
Edited
Mar 1, 2021
Fork of Second Exercise on Observable: Classification and Colors
2
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
Minnesota = FileAttachment("mn_state_WGS84.json").json()
Insert cell
county_features = topojson.feature(Minnesota, Minnesota.objects.mn_state_WGS84)
Insert cell
csv_data = d3.csvParse(await FileAttachment("Census2010_MN.csv").text(),({FIPS, Hispanic, TotalPop}) => [FIPS, [+Hispanic, +Hispanic/+TotalPop*100]])
Insert cell
Insert cell
HispanicPCT = Array.from(csv_data.values(), d => d[1][1])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Percent of Population of Hispanic Decent in Minnesota"]})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
linear = d3.scaleLinear()
.domain([d3.min(HispanicPCT),d3.max(HispanicPCT)])
.range(['#ffeda0','#f03b20'])
Insert cell
Insert cell
chart(numericSort(HispanicPCT), linear)
Insert cell
Insert cell
Insert cell
quantile = d3.scaleQuantile()
.domain(HispanicPCT)
.range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])
Insert cell
Insert cell
chart(numericSort(HispanicPCT), quantile)
Insert cell
Insert cell
Insert cell
naturalbreaks = simple.ckmeans(HispanicPCT, 4).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])
Insert cell
Insert cell
chart(numericSort(HispanicPCT), jenks)
Insert cell
Insert cell
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(HispanicPCT),d3.max(HispanicPCT)])
.range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])
Insert cell
chart(numericSort(HispanicPCT), quantize)
Insert cell
Insert cell
Insert cell
manual = d3.scaleThreshold()
.domain([3, 7, 15, d3.max(HispanicPCT)])
.range(['#ffffb2','#fecc5c','#fd8d3c','#e31a1c'])

Insert cell
Insert cell
chart(numericSort(HispanicPCT), manual)
Insert cell
Insert cell
Insert cell
showScaleGrouping(HispanicPCT, {
scaleQuantile: quantile,
scaleJenks: jenks,
scaleQuantize: quantize,
scaleManual: manual,
})
Insert cell
Insert cell
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