Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 10, 2020
1 fork
Importers
13 stars
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, gridWidth * cellSize, gridHeight * cellSize])
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const cell = svg.append("g")
.selectAll("g")
.data(d3.groups(senators, d => d.statecode))
.join("g")
.attr("transform", ([statecode]) => {
const [i, j] = position.get(statecode);
return `translate(${i * cellSize},${j * cellSize})`;
});
cell.append("path")
.attr("d", `M0,${cellSize - 1}V0H${cellSize - 1}z`);
cell.append("path")
.attr("d", `M0,${cellSize - 1}H${cellSize - 1}V0z`);
cell.selectAll("path")
.data(([, senators]) => senators)
.attr("fill", ({party}) => color(party))
.append("title")
.text(({name, state, party}, i) => `${name}
${party}
${state} (${i ? "Junior" : "Senior"})`);
cell.append("text")
.attr("pointer-events", "none")
.attr("x", cellSize / 2)
.attr("y", cellSize / 2)
.attr("dy", "0.32em")
.text(([statecode]) => statecode);
return svg.node();
}
color = d3.scaleOrdinal(["Republican", "Democratic", "Independent"], ["#e41a1c", "#377eb8", "#4daf4a"])
senators = d3.csvParse(await FileAttachment("senators-116.csv").text(), d3.autoType)
position = grid`
, , , , , , , , , ,ME
, , , , ,WI, , , ,VT,NH
WA,ID,MT,ND,MN,IL,MI, ,NY,MA,
OR,NV,WY,SD,IA,IN,OH,PA,NJ,CT,RI
CA,UT,CO,NE,MO,KY,WV,VA,MD,DE,
,AZ,NM,KS,AR,TN,NC,SC,DC, ,
, , ,OK,LA,MS,AL,GA, , ,
HI,AK, ,TX, , , , ,FL, , `
function grid() {
const positionById = new Map;
d3.csvParseRows(String.raw.apply(String, arguments).replace(/^\n|\n$/g, ""), (row, j) => {
row.forEach((id, i) => {
if (id = id.trim()) {
positionById.set(id, [i, j]);
}
});
});
return positionById;
}
gridWidth = d3.max(position, ([, [i]]) => i) + 1
gridHeight = d3.max(position, ([, [, j]]) => j) + 1
cellSize = 40
d3 = require("d3@5", "d3-array@2")
import {swatches} from "@d3/color-legend"
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.
