Published
Edited
Apr 13, 2020
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
format = d => `${d}%`
topojson = require("topojson-client@3")
california = FileAttachment("CA_county.json").json()
counties = topojson.feature(california, california.objects.CA_county)
csv_data = d3.csvParse(await FileAttachment("California_population.csv").text(),({GEOID, Total, from20to24, from25to34}) => [+GEOID, [((+from20to24 + +from25to34)/+Total)*100]])
data = Object.assign(new Map(csv_data), {title: ["Young people (age 20-34) percent"]})
youngpct = Array.from(csv_data.values(), d => d[1])
purples = [d3.color("#f2f0f7"), d3.color("#cbc9e2"), d3.color("#9e9ac8"), d3.color("#756bb1"),d3.color("#54278f")]
quantile = d3.scaleQuantile()
.domain(youngpct) // pass the whole dataset to a scaleQuantile’s domain
.range(purples)
width = 975
height = 610
margin = 100
//Stateplane - California Zone3 (EPSG:26943)
projection = d3.geoConicConformal()
.parallels([37 + 4 / 60, 38 + 26 / 60])
.rotate([120 + 30 / 60, 0]).fitExtent([[margin, margin], [width - margin, height - margin]], counties);
path = d3.geoPath().projection(projection);
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.
