Data visualisation journalist at the Times
Twitter: @_mkeith_
Public
Edited
Nov 15, 2024
2 stars
{
// Get and set canvas dimensions
const width = window.innerWidth
const height = Math.min(width / 1.5, 400);
const canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
// Init the roughJS canvas object
const rc = rough.canvas(document.getElementById('canvas'));
// Init the D3 geo projection
const projection = d3.geoAlbersUsa()
.fitSize([width,height], us_geo)
.translate([width/2,(height/2)]);
// Init the D3 geo path function base on the projection
let geoPath = d3.geoPath()
.projection(projection)
// Loop the geoJson data and draw the path for each state
us_geo.features.forEach(function(d,i){
let winner = us_2024_results[d.properties.STUSPS].winner;
rc.path(geoPath(d), {
fill: winner == 'gop' ? '#CC0B07' : '#015b90', // Colour based on election winner
roughness: roughness,
bowing: bowing,
hachureAngle: randomiseAngle ? Math.random() * hachureAngle : hachureAngle,
hachureGap: hachureGap,
fillStyle: fillStyle,
fillWeight: fillWeight,
stroke: "black",
strokeWidth: strokeWidth,
simplification: simplification,
});
})
}
rough = require("https://unpkg.com/roughjs@latest/bundled/rough.js").catch(() => window.rough)
d3 = require("https://d3js.org/d3.v5.min.js")
us_geo = FileAttachment("states_3.json").json()
us_2024_results = FileAttachment("us_2024_results.json").json()
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.
