The avatar for @codingwithfire
Coding with Fire
EJ Fox & Ian Johnson streaming data, code, acid, design
Published
Edited
Oct 6, 2020
Fork of Choropleth with Textures.js
4 stars
1
Season 1
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.js
Force Bubble Map with Textures.js
Where Are Votes Outstanding? (Data Simulation)Where Are Votes Outstanding? Visualization IdeasElectoral College Unit ChartsElectoral College Unit Charts With TextElectoral College Unit Shuffle
Also listed in…
Election Explorations
Insert cell
Insert cell
Insert cell
rPopScale = d3
.scaleSqrt()
.domain(popExtent)
.range([2, 25])
Insert cell
// projection = d3.geoIdentity().scale(width / 975)
projection = d3
.geoAlbersUsa()
.translate([width / 2, height / 2])
.scale([1150])
Insert cell
circles = {
let localNodes = shapesWithData
.map(d => {
let p = projection(d.centroid.geometry.coordinates) || [0, 0];
return {
...d,
p: rPopScale(d.population),
cx: p[0],
cy: p[1],
x: p[0],
y: p[1]
};
})
.filter(d => !isNaN(d.population));
// 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.12) // for spacing by metric
.strength(0.65)
)
.force(
"x",
d3.forceX(d => {
return d.cx;
})
)
.force(
"y",
d3.forceY(d => {
return d.cy;
})
);

simulation.tick(200);

localNodes.sort((a, b) => a.metric - b.metric);
return localNodes;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
lineSize = 12
Insert cell
demOrientation = "6/8"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ramp2.map(t => t.url())
Insert cell
legendSize = 50
Insert cell
Insert cell
Insert cell
countyShapes = topojson.feature(us, us.objects.counties).features
Insert cell
shapesWithData = countyShapes.map(s => ({
...s,
...data2.get(s.id),
population: pops.get(s.id),
// state: statefips.get(s.id.slice(0, 2))[0].name,
// population: pops.get(s.id),
// metric: metrics.get(s.id),
centroid: turf.centroid(s)
}))
Insert cell
import {
pops,
popExtent
} from "@codingwithfire/cmu-covidcast-api-bubbles-interactive-timelapse"
Insert cell
processed = countyElectionResults.map(d => {
return {
combined_fips: d.combined_fips,
relative_diff: +d.diff / +d.total_votes,
dem: +d.votes_dem,
rep: +d.votes_gop,
total: +d.total_votes,
winner: +d.votes_dem > +d.votes_gop ? "dem" : "rep"
};
})
Insert cell
countyElectionResults
Insert cell
processed.filter(d => d.winner == "dem")
Insert cell
data2 = new Map(processed.map(d => [d.combined_fips, d]))
Insert cell
diffExtent = d3.extent(countyElectionResults, d => +d.diff / +d.total_votes)
Insert cell
// q = d3.scaleQuantize([1, 10], ramp2)
q = d3.scaleQuantize(diffExtent, ramp2)
Insert cell
// q = d3.scaleQuantize([1, 10], ramp2)
qDem = d3.scaleQuantize(diffExtent, demRamp)
Insert cell
// q = d3.scaleQuantize([1, 10], ramp2)
qRep = d3.scaleQuantize(diffExtent, repRamp)
Insert cell
qLegend = d3.scaleQuantize(diffExtent, d3.range(0, 10))
Insert cell
ramp = [
makePattern(svg`<defs><pattern x="0" y="0" width="0" height="0" patternUnits="userSpaceOnUse">
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="1" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="2" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="1" height="4" patternUnits="userSpaceOnUse">
<line x1="0" y1="1" x2="1" y2="1" stroke="currentColor" stroke-width="4" />
</pattern></defs>`),
makePattern(svg`<defs><pattern x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
<rect fill="currentColor" width="4" height="4" />
</pattern></defs>`)
]
Insert cell
makePattern = defs => {
let id = DOM.uid();
defs.querySelector('pattern').id = id.id;
defs.toString = () => id.toString();
return defs;
}
Insert cell
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'
Insert cell
textures = require("textures")
Insert cell
turf = require('https://bundle.run/turf@3.0.14')
Insert cell

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.
Learn more