EJ Fox & Ian Johnson
streaming data, code, acid, design
Published
Edited
Oct 12, 2020
Importers
6 stars
Coding With Fire - Crowd Control Color PaletteCMU COVIDcast APICMU COVIDcast API: Map makerMap Maker Dot Density: Cumulative Covid CasesPattern Moire - Line & Circle Grids with ColorschemesPattern Moire - Line & Circle GridsCustom Cluster Force LayoutCMU COVIDcast API: Map maker Bubbles CanvasCMU COVIDcast API: Map maker BubblesCMU COVIDcast API: Map maker Bubbles IICMU COVIDcast API: Map maker TimelapseCoding With Fire: Mind MapGraphene MoiréGraphene Moiré FirebaseGraphene Moiré 3DCoding With Fire: Paths as PointsCoding With Fire: 3D PathsFreaky Dot PatternsCoding With Fire: NYPD CCRBWhere are votes at risk?Voronoi PurpleAirDeadline Timers 2CMU COVIDcast API: Bubbles ExportEmojisEmoji Treemap Small MultiplesCounties with DatasetteAmerican Community Survey 2018 by CountyRegistered Voters by County 2016-2018Population Change by County 2016-2018: Bubble LinesRegistered Voters by County 2016-2018: Bubble LinesCMU COVIDcast API: Bubbles Dark ModeUS Bubble Choropleth: Travel From CentroidUS Bubble Choropleth: Travel From CentroidCMU COVIDcast API: Bubbles Textures Interactive TimelapseChoropleth with Textures.jsForce Bubble Map with Textures.jsWhere Are Votes Outstanding? (Data Simulation)Electoral College Unit ChartsElectoral College Unit Charts With TextElectoral College Unit Shuffle
Where Are Votes Outstanding? Visualization Ideas
Also listed in…
Election Explorations
cartogram
cartogram_data
stateToFips = d3.json(
"https://gist.githubusercontent.com/wavded/1250983/raw/bf7c1c08f7b1596ca10822baeb8049d7350b0a4b/stateCodeToFips.json"
)
counties
margin = ({top: 140, right: 20, bottom: 20, left: 20})
{
let svg = d3
.create("svg")
.attr("width", 200)
.attr("height", 200);
let g = svg.append("g");
colorTreemap(g, counties.slice(0, 154));
return svg.node();
}
treemapSize = state_size
height = 8 * state_size
counties = countyShapes.features.map(d => {
simPct;
return {
fips: d.id,
value: 1 - calculatePercent(d.id)
};
})
function colorTreemap(g, counties, onClick = function() {}) {
let treemap = d3
.treemap()
.tile(d3.treemapSquarify)
.size([treemapSize, treemapSize]);
// .padding(1);
// .round(true)
let data = {
name: "counties",
children: counties
};
let root = d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value);
let tree = treemap(root);
function enter(selection) {
let group = selection.append("g").classed("color-tree-leaf", true);
group.append("rect");
return group;
}
function update(selection) {
return selection;
}
let leaf = g
.selectAll("g.color-tree-leaf")
.data(tree.leaves())
.join(enter, update)
.attr("transform", d => `translate(${d.x0},${d.y0})`)
.on("click", onClick);
leaf
.select("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
// .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name) })
.attr("fill", d => {
// let pctCounted = calculatePercent(d.id);
return diffScale(1 - d.value);
// return "#ccc";
})
// .attr(
// "fill",
// "black"
// // d => `rgb(${d.data.color ? d.data.color.join(",") : "255,255,255"})`
// )
.attr("fill-opacity", 1);
}
import { cartogram_data, x_column, y_column, axisPosition } with {
state_size,
margin
} from "@aboutaaron/small-multiple-chart-cartogram"
// md`
// ${fips} - ${eav.Jurisdiction_Name}
// Percent of votes counted:
// **${format(calculatePercent(countySVG.id) * 100)}%**
// `
projection = d3.geoAlbersUsa().fitSize([width - 10, height - 30], countyShapes)
minCounty = d3.min(countyShapes.features, d => calculatePercent(d.id))
diffScale = d3
.scaleSequential(d3.interpolateGreys)
// .domain(diffExtent)
.domain([minCounty, 1])
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")
eavsByCounty = new Map(
allYearsFlat.map(d => {
let s = String(d.FIPSCode);
return [s.slice(0, s.length - 5).padStart(5, "0"), d];
})
)
statePctConfig = ({
min: simPct[0] * 100,
max: simPct[1] * 100
})
pctByState = {
let seed2 = "hi";
let chance = new Chance(seed2);
return new Map(
stateShapes.features.map(d => {
let s = String(d.FIPSCode);
return [d.id, chance.floating(statePctConfig)];
})
);
}
pctByCounty = {
let seed = "hi";
let chance = new Chance(seed);
return new Map(
allYearsFlat.map(d => {
let s = String(d.FIPSCode);
s = s.slice(0, s.length - 5).padStart(5, "0");
let statePct = pctByState.get(s.slice(0, 2));
return [
s,
chance.floating({
min: statePct - 10,
max: _.clamp(statePct + 10, 100)
})
];
return [s.slice(0, s.length - 5).padStart(5, "0"), statePct];
})
);
}
voteJitter = 5 // The amount added or subtracted from state percentage
voteByCounty = {
let seed = "hi";
let chance = new Chance(seed);
return new Map(
countyShapes.features.map(d => {
let fips = d.id;
let eave = eavsByCounty.get(fips);
if (!eave) return [fips, 0];
let countyActiveVoters = eave["A1a|2016"];
let statePct = pctByState.get(fips.slice(0, 2));
let countyPct = chance.floating({
min: statePct - voteJitter,
max: _.clamp(statePct + voteJitter, 100)
});
return [fips, Math.floor(countyActiveVoters * (countyPct / 100))];
})
);
}
import { legend } from "@d3/color-legend"
countySVG
fips = countySVG ? countySVG.id : ""
eav = eavsByCounty.get(fips)
eav ? eav : ""
pop2016 = demographicsData[2016].get(fips)["B01003_001E"]
pop2018 = demographicsData[2018].get(fips)["B01003_001E"]
format = d3.format(",d")
import {
demographicsData,
selectedFields,
niceLabel,
countyShapes,
stateShapes
} 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"
import { rangeSlider } from "@mootari/range-slider"
Chance = require("chance")
_ = require('lodash')
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.
