Published
Edited
Feb 18, 2021
2 stars
chart
filteredData4Map=schoolData.filter(x=>
level.includes(x.LEVEL_) &&
Number(x.POPULATION) > populationCutoffLow &&
Number(x.POPULATION)<populationCutoffHigh &&
(statesSelected.length===0 ? true : statesSelected.includes(x.STATE))
).map(generateAlbersPoint)
filteredDataLevelAndStateOnly=schoolData.filter(x=>
level.includes(x.LEVEL_) &&
(statesSelected.length===0 ? true : statesSelected.includes(x.STATE))
)
schoolData=d3.csvParse(await FileAttachment("Key_Public_Schools_Columns@1.csv").text())
stateOptions=Array.from(d3.group(schoolData, d=> d.STATE).keys()).sort(d3.ascending)
levelOptions=Array.from(d3.group(schoolData, d=> d.LEVEL_).keys())
populationFilterByLevelOnly= schoolData.filter(d=>level.includes(d.LEVEL_)).map(d=>Math.max(0,+d.POPULATION))
populationFilterByLevelAndStates= statesSelected.length===0 ? populationFilterByLevelOnly : schoolData.filter(d=>level.includes(d.LEVEL_) && statesSelected.includes(d.STATE)).map(d=>Math.max(0,+d.POPULATION))
rawCSV=md`##### rawCSV
Get the raw CSV here: (41MB, go here: https://drive.google.com/file/d/1akWikhgIRkklspMHxBwVo43Ck4r7AOdD/view?usp=sharing)
The raw data has the street address and the phone number and about a few dozen other fields. But I removed to stay under 15MB.`
md`## imports`
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
import {path, chart} with {filteredData4Map as data} from "@d3/spike-map"
d3 = require("d3@6")
import {mdPlus} from "@tmcw/bonus-markdown-flavor"
import {importCell} from "@mbostock/dataflow"
import {Radio, Checkbox, Range} from "@observablehq/inputs"
md`Original format of spike chart. Kept for reference.
\`\`\`js
data = (await FileAttachment("population.json").json()).slice(1).map(([population, state, county]) => {
const id = state + county;
const feature = features.get(id);
return {
id,
position: feature && path.centroid(feature),
title: feature && feature.properties.name,
value: +population
};
})
\`\`\`
`
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.
