md`# Matti's Second Exercise on Observable: Classification and Colors`
d3 = require("d3@5")
topojson = require("topojson-client@3")
Virginia = FileAttachment("HW3.geojson").json()
county_features = topojson.feature(Virginia, Virginia.objects.)
csv_data = d3.csvParse(await FileAttachment("FoodAccessResearchAtlasData2019 copy (3).csv").text(),({CensusTract, TractKids, Pop2010}) => [CensusTract, +TractKids/+Pop2010])
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("FoodAccessResearchAtlasData2019 copy (3).csv").text(), d3.autoType)).map(({CensusTract, TractKids, Pop2010}) => ({CensusTract: +CensusTract, Percentage_of_kids: +TractKids/+Pop2010})))
// The code below creates a histogram from the data impelemented in the code
viewof bins = Inputs.range([0, 100], {step: 1, label: "Bins"})
// The histogram belows shows how often certain percentage of kids appear in the data. I chose to build this histogram with 50 bins because it was such a large data set, that 50 bins did a good job of breaking the data up visually. When you look at the histogram below you notice that for the most part the data follows a normal distribution curve. You also notice that most of the data pertaining to the percentage of children per Virginia counties lies between the values of .15 and .35. With very little data presented outside that range and an outlier at the value .6
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "Percentage_of_kids", thresholds: bins})),
Plot.ruleY([0])
]
})
childpct = Array.from(csv_data.values(), d => d[1])
data = Object.assign(new Map(csv_data), {title: ["Percentage of Kids in Virginia's Counties"]})
md`# Linear Scale (Unclassed)`
linear = d3.scaleLinear()
.domain(d3.extent(childpct))
.range(["white", "purple"])
chart(numericSort(childpct), linear)
md`# Quantile Classification`
quantile = d3.scaleQuantile()
.domain(childpct)
.range(["#efedf5", "#bcbddc", "#756bb1"])
chart(numericSort(childpct), quantile)
md`# Jenks Natural Breaks Classification`
naturalbreaks = simple.ckmeans(childpct, 5).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#f2f0f7", "#cbc9e2", "#9e9ac8", "#756bb1", "#54278f"])
chart(numericSort(childpct), jenks)
md`# Equal Interval Classification (Quantize)`
d3.extent(childpct)
quantize = d3.scaleQuantize()
.domain(d3.extent(childpct))
.range(["#fee6ce", "#fdae6b","#e6550d"])
chart(numericSort(childpct), quantize)
md`# Threshold`
threshold = d3.scaleThreshold()
.domain([0.1, 0.3, 0.5])
.range(["#efedf5", "#bcbddc", "#756bb1"])
chart(numericSort(childpct), threshold)
showScaleGrouping(childpct, {
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.
