EJ Fox & Ian Johnson
streaming data, code, acid, design
countySVG
projection = d3.geoAlbersUsa().fitSize([width - 20, height - 30], countyShapes)
rPopScale = d3
.scaleSqrt()
.domain(populationExtent)
.range([1, 22])
diffScale = {
let max = Math.max(Math.abs(diffExtent[0]), diffExtent[1]);
return d3
.scaleDiverging()
.domain([-max, 0, max])
.range([-500, 0, 500]);
}
diffOpacity = {
let max = Math.max(Math.abs(diffExtent[0]), diffExtent[1]);
return d =>
d3
.scaleDiverging()
.domain([-max, 0, max])
.range([.6, 0, .6])(d) + 0.25;
}
diffColor = {
return d3
.scaleDiverging()
.domain([diffExtent[0], 0, diffExtent[1]])
.range(["orange", "white", "teal"]);
}
// diff = diffRegister
diff = diffPopulation
diffRegister = d => {
let c = eavsByCounty.get(d.id)
if(!c) return 0;
return +c["A1a|2018"] - +c["A1a|2016"];
}
diffPopulation = d => {
let d2018 = demographicsData[2018].get(d.id);
let d2016 = demographicsData[2016].get(d.id);
if (!d2018 || !d2018) return 0;
return +d2018["B01003_001E"] - +d2016["B01003_001E"];
}
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)
populationExtent = d3.extent(countyShapes.features, d => {
let c = demographicsData[2018].get(d.id);
if (c) return c["B01003_001E"];
return 0;
})
circles = {
let localNodes = countyShapes.features
.map(d => {
let e = eavsByCounty.get(d.id);
let c = center(d);
let demo = demographicsData[2018].get(d.id);
let pop = demo ? demo["B01003_001E"] : 0;
let o = {
...d,
cx: c[0],
cy: c[1],
x: c[0],
y: c[1]
};
if (e) {
o.p = rPopScale(pop);
o.value = diff(e);
}
return o;
})
.filter(d => !isNaN(d.p));
// console.log(localNodes);
let simulation = d3
.forceSimulation(localNodes)
.force(
"collide",
d3
.forceCollide()
// .radius(d => d.p) // for spacing by population
.radius(d => d.p + 1) // for spacing by metric
.strength(1)
)
.force(
"x",
d3.forceX(d => {
return d.cx;
})
)
.force(
"y",
d3.forceY(d => {
return d.cy;
})
);
simulation.tick(100);
localNodes.sort((a, b) => a.metric - b.metric);
return localNodes;
}
eavsByCounty = new Map(
allYearsFlat.map(d => {
let s = String(d.FIPSCode);
return [s.slice(0, s.length - 5).padStart(5, "0"), d];
})
)
diffExtent = d3.extent(countyShapes.features, diff)
d3.min(countyShapes.features, diff)
import { legend } from "@d3/color-legend"
fips = countySVG ? countySVG.id : ""
eav = eavsByCounty.get(fips)
eav ? diff(countySVG) : ""
height = 700
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")
(d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
})
FileAttachment("keyLables.json").json()
turf = require('https://bundle.run/turf@3.0.14')
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.
