EJ Fox & Ian Johnson
streaming data, code, acid, design
Published
Edited
Oct 5, 2020
2 forks
3 stars
projection = d3.geoAlbersUsa().fitSize([width - 10, height - 20], countyShapes)
diffScale = d3
.scaleLinear()
// .domain(diffExtent)
.domain([-10000, 10000])
.range([-10, 10])
turf.centroid(countyShapes.features[0])
center = d => {
return projection(turf.centroid(d).geometry.coordinates) || [0, 0];
}
allYearsFlat = FileAttachment("allYearsFlat@1.csv").csv({ typed: false })
allYearsFlat.filter(d => d.State_Full == "WISCONSIN")
allYearsFlat.filter(d => diff(d) < -1000000)
eavsByCounty = new Map(
allYearsFlat.map(d => {
let s = String(d.FIPSCode);
return [s.slice(0, s.length - 5).padStart(5, "0"), d];
})
)
diff = d => {
return +d["A1a|2018"] - +d["A1a|2016"];
}
diffExtent = d3.extent(allYearsFlat, diff)
d3.min(allYearsFlat, diff)
// https://observablehq.com/@mbostock/mortality-due-to-alcohol-use-disorder
color2 = {
const values = allYearsFlat.map(diff);
const max = Math.max(d3.min(values), d3.max(values));
return d3
.scaleSqrt()
.domain([-max, 0, max])
.range([-1, 0, 1])
.interpolate((a, b) =>
a < 0 ? t => d3.interpolatePurples(1 - t) : t => d3.interpolateGreens(t)
);
}
import { legend } from "@d3/color-legend"
countySVG
fips = countySVG ? countySVG.id : ""
eav = eavsByCounty.get(fips)
eav ? diff(eav) : ""
height = 500
pop2016 = demographicsData[2016].get(fips)["B01003_001E"]
pop2018 = demographicsData[2018].get(fips)["B01003_001E"]
format = d3.format(",d")
import {
demographicsData,
selectedFields,
niceLabel,
countyShapes
} from "@enjalot/us-county-datasets"
d3 = require("d3@6")
FileAttachment("keyLables.json").json()
turf = require('https://bundle.run/turf@3.0.14')
import { twitch } from "@codingwithfire/twitch"
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.
