The avatar for @haofengma
Haofeng Ma
Ph.D. Candidate (ABD) in Political Science at The University of Iowa
Published
GEOG:5540 Geographic Visualization Spring 2022
Edited
Mar 2, 2022
Fork of Second Exercise on Observable: Classification and Colors
2
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
india = FileAttachment("india.json").json()
Insert cell
india_features = topojson.feature(india, india.objects.india)
Insert cell
csv_data = d3.csvParse(await FileAttachment("india_data.csv").text(),({shapeID, area, number_of_named_languages, main_language, main_language_share, pop_total, pop_male, pop_female, literacy_all, literacy_male, literacy_female}) => [shapeID, [+area, +number_of_named_languages, main_language, +main_language_share, +pop_total, +pop_male, +pop_female, +literacy_all, +literacy_male, +literacy_female, +pop_total/+area]])
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("india_data.csv").text(), d3.autoType)).map(({shapeID, area, number_of_named_languages, main_language, main_language_share, pop_total, pop_male, pop_female, literacy_all, literacy_male, literacy_female}) => ({shapeID: shapeID, area:+area, number_of_named_languages: +number_of_named_languages, main_language: main_language, main_language_share: +main_language_share, pop_total: +pop_total, pop_male: +pop_male, pop_female: +pop_female, literacy_all: +literacy_all, literacy_male: +literacy_male, literacy_female: +literacy_female, pop_den: +pop_total/+area})))
Insert cell
// This is the normalized variable that I generated manually.
// However, I do not use it in this assignment. Rather, I will use the variable in the next cell, because it is the variable of my interest and I plan to use it in the future assignments and the project.
pop_den = Array.from(csv_data.values(), d => d[1][10])
Insert cell
// This variable is the share of the subnational population who use the main language in India. It is also a normalized variable (share = number of the main language speaker/total population in the subnational unit).
main_language_share = Array.from(csv_data.values(), d => d[1][3])
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: "main_language_share", thresholds: bins})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
data = Object.assign(new Map(csv_data), {title: ["Area", "Number of Named Languages", "Main Language", "Main Language Share", "Total Population", "Male Population", "Female Population", "Total Literacy", "Male Literacy", "Female Literacy", "Population Density"]})
Insert cell
md`# Linear Scale (Unclassed)`
Insert cell
linear = d3.scaleLinear()
.domain(d3.extent(main_language_share))
.range(["#fee0d2", "#de2d26"])
Insert cell
chart(numericSort(main_language_share), linear)
Insert cell
md`# Quantile Classification`
Insert cell
quantile = d3.scaleQuantile()
.domain(main_language_share)
.range(["#fee0d2", "#fc9272", "#de2d26"])
Insert cell
chart(numericSort(main_language_share), quantile)
Insert cell
md`# Jenks Natural Breaks Classification`
Insert cell
naturalbreaks = simple.ckmeans(main_language_share, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#fee0d2", "#fc9272", "#de2d26"])
Insert cell
chart(numericSort(main_language_share), jenks)
Insert cell
md`# Equal Interval Classification (Quantize)`
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(main_language_share),d3.max(main_language_share)])
.range(["#fee0d2", "#fc9272", "#de2d26"])
Insert cell
chart(numericSort(main_language_share), quantize)
Insert cell
md`# Threshold`
Insert cell
threshold = d3.scaleThreshold()
.domain([0.5, 0.8])
.range(["#fee0d2", "#fc9272", "#de2d26"])
Insert cell
chart(numericSort(main_language_share), threshold)
Insert cell
showScaleGrouping(main_language_share, {
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