// STREAM GRAPH { // 1. CHART SIZE // Set the overall width and height of the chart in pixels. // The margins (top, bottom, left, right) create space for labels and the x-axis around the edges. const width = 800; const height = 400; const marginTop = 40; const marginBottom = 48; const marginLeft = 16; const marginRight = 16; // The actual drawable area is the full size minus the margins const chartWidth = width - marginLeft - marginRight; const chartHeight = height - marginTop - marginBottom; // 2. X AXIS SCALE // Map each month (0 to 23) to a horizontal pixel position. const xScale = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, chartWidth]); // ---------------------------------------------------------- // 3. ARMY BAND SIZING // The army band is drawn symmetrically above and below the centre line. We calculate how tall it should be based on // the largest army size in the data. // armyScale converts a troop count into pixels. e.g. if maxArmy = 47751 and we want the band to take up // 42% of the chart height, each soldier = a tiny slice. const maxArmySize = d3.max(data, d => d.army); const armyScale = (chartHeight * 0.5) / maxArmySize; // These two functions return the top and bottom y-positions of the army band for any given data point const armyTopY = d => chartHeight / 2 - d.army * armyScale; const armyBotY = d => chartHeight / 2 + d.army * armyScale; // ---------------------------------------------------------- // 4. DEATH STREAM SIZING // The death streams use D3's stack layout with "wiggle" // offset — this centres the streams around a midpoint // rather than stacking from zero, giving the flowing shape. const deathKeys = ["other", "wounds", "disease"]; const stackGenerator = d3.stack() .keys(deathKeys) .offset(d3.stackOffsetWiggle) // centres the streams .order(d3.stackOrderInsideOut); // largest stream in middle // Generate the stacked series from whichever dataset is active // (actual data or counterfactual data, depending on the toggle) const actualSeries = stackGenerator(data); const stackedSeries = stackGenerator(activeData); const streamMin = d3.min(actualSeries, layer => d3.min(layer, d => d[0])); const streamMax = d3.max(actualSeries, layer => d3.max(layer, d => d[1])); const streamMid = (streamMax + streamMin) / 2; // Scale the streams to take up 38% of the chart height // (slightly smaller than the army band so they fit inside it) const deathScale = (chartHeight * 0.38) / (streamMax - streamMin); // Converts a stacked value to a pixel y-position const deathY = value => chartHeight / 2 - (value - streamMid) * deathScale; // ---------------------------------------------------------- // 5. PATH GENERATORS // These functions turn arrays of data points into SVG path strings that D3 can draw as smooth curves. const smoothCurve = d3.curveCatmullRom.alpha(0.42); // Army band: a filled area between armyTopY and armyBotY const armyAreaPath = d3.area() .x((d, i) => xScale(i)) .y0(armyBotY) .y1(armyTopY) .curve(smoothCurve); // Death streams: a filled area between the stacked values const deathAreaPath = d3.area() .x((d, i) => xScale(i)) .y0(d => deathY(d[0])) .y1(d => deathY(d[1])) .curve(smoothCurve); // ---------------------------------------------------------- // 6. CREATE THE SVG ELEMENT const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", width) .attr("height", height) .style("font-family", "sans-serif") .style("overflow", "visible"); // All chart elements are grouped inside and offset // by the margins so they don't overlap the edges const chartGroup = svg.append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); // ---------------------------------------------------------- // 7. DRAW THE ARMY BAND chartGroup.append("path") .datum(data) .attr("d", armyAreaPath) .attr("fill", COLORS.army) .attr("opacity", 0.18); // Top edge outline chartGroup.append("path") .datum(data) .attr("d", d3.line().x((d, i) => xScale(i)).y(armyTopY).curve(smoothCurve)) .attr("fill", "none") .attr("stroke", COLORS.army) .attr("stroke-width", 1) .attr("opacity", 0.35); // Bottom edge outline chartGroup.append("path") .datum(data) .attr("d", d3.line().x((d, i) => xScale(i)).y(armyBotY).curve(smoothCurve)) .attr("fill", "none") .attr("stroke", COLORS.army) .attr("stroke-width", 1) .attr("opacity", 0.35); // ---------------------------------------------------------- // 8. DRAW THE DEATH STREAMS chartGroup.selectAll("path.stream") .data(stackedSeries) .join("path") .attr("class", "stream") .attr("d", deathAreaPath) .attr("fill", d => COLORS[d.key]) .attr("opacity", 0.9); // ---------------------------------------------------------- // 9. REFORM ANNOTATION LINES // A dashed vertical line marks when sanitary reforms happened (March 1855 = index 11). const actualReformX = xScale(11); chartGroup.append("line") .attr("x1", actualReformX).attr("x2", actualReformX) .attr("y1", -marginTop + 6).attr("y2", chartHeight) .attr("stroke", "#999") .attr("stroke-width", 1) .attr("stroke-dasharray", "4,4") .attr("opacity", 0.45); chartGroup.append("text") .attr("x", actualReformX + 4) .attr("y", chartHeight * 0.1) .attr("font-size", 10) .attr("fill", "#999") .text("Reforms · Mar 1855"); if (showCounterfactual) { const earlierReformX = xScale(5); chartGroup.append("line") .attr("x1", earlierReformX).attr("x2", earlierReformX) .attr("y1", -marginTop + 6).attr("y2", chartHeight) .attr("stroke", COLORS.disease) .attr("stroke-width", 1) .attr("stroke-dasharray", "4,4") .attr("opacity", 0.55); chartGroup.append("text") .attr("x", earlierReformX + 4) .attr("y", chartHeight * 0.1) .attr("font-size", 10) .attr("fill", COLORS.disease) .attr("opacity", 0.85) .text("Reforms at Sep 1854"); } // ---------------------------------------------------------- // 10. PEAK LABEL // Labels the highest point of the disease stream. const diseaseLayer = stackedSeries.find(s => s.key === "disease"); const peakIndex = showCounterfactual ? 5 : 10; const peakLabel = showCounterfactual ? `${data[peakIndex].cf_disease.toLocaleString()} projected disease deaths` : `${data[9].disease.toLocaleString()} disease deaths`; chartGroup.append("text") .attr("x", xScale(peakIndex)) .attr("y", deathY(diseaseLayer[peakIndex][1]) - 20) .attr("font-size", 10) .attr("fill", COLORS.disease) .attr("text-anchor", "middle") .text(peakLabel); // ---------------------------------------------------------- // 11. ARMY SIZE LABELS // Two small annotations showing army size at the start and at its peak, positioned above the army band. chartGroup.append("text") .attr("x", xScale(1)) .attr("y", armyTopY(data[1]) - 5) .attr("font-size", 9) .attr("fill", "#999") .text(`${data[0].army.toLocaleString()} soldiers`); chartGroup.append("text") .attr("x", xScale(17)) .attr("y", armyTopY(data[17]) - 5) .attr("font-size", 9) .attr("text-anchor", "middle") .attr("fill", "#999") .text(`peak ${data[17].army.toLocaleString()}`); // ---------------------------------------------------------- // 12. X AXIS (month labels along the bottom) // Only shows every 3rd month to avoid overlapping labels. const tickPositions = [0, 3, 6, 9, 12, 15, 18, 21, 23]; chartGroup.append("g") .attr("transform", `translate(0, ${chartHeight})`) .call( d3.axisBottom(xScale) .tickValues(tickPositions) .tickFormat(i => data[Math.round(i)].label) .tickSize(4) ) .call(axis => axis.select(".domain").remove()) .call(axis => axis.selectAll("text") .attr("font-size", 10).attr("fill", "#666").attr("dy", "1.2em")) .call(axis => axis.selectAll(".tick line") .attr("stroke", "#ddd")); // ---------------------------------------------------------- // 13. LEGEND const legendItems = [ { label: "Army strength", color: COLORS.army, opacity: 0.45 }, { label: "Disease", color: COLORS.disease, opacity: 1 }, { label: "Wounds", color: COLORS.wounds, opacity: 1 }, { label: "Other causes", color: COLORS.other, opacity: 1 } ]; const legendGroup = svg.append("g") .attr("transform", `translate(${marginLeft}, 10)`); legendItems.forEach((item, i) => { const entry = legendGroup.append("g") .attr("transform", `translate(${i * 125}, 0)`); entry.append("rect") .attr("width", 10).attr("height", 10).attr("rx", 2) .attr("fill", item.color).attr("opacity", item.opacity); entry.append("text") .attr("x", 14).attr("y", 9) .attr("font-size", 11).attr("fill", "#555") .text(item.label); }); // ---------------------------------------------------------- // 15. TOOLTIP // The tooltip is a plain HTML div that appears on hover. const container = html`

`; const tooltip = html`

`; container.appendChild(svg.node()); container.appendChild(tooltip); // When the mouse moves over the chart, find which month // the cursor is over and show that month's data svg.on("mousemove", function(event) { const [mouseX] = d3.pointer(event, chartGroup.node()); const monthIndex = Math.max(0, Math.min(data.length - 1, Math.round(xScale.invert(mouseX)))); const d = activeData[monthIndex]; const total = d.disease + d.wounds + d.other; // Calculate each cause as a percentage of total deaths const diseasePct = total > 0 ? Math.round(d.disease / total * 100) : 0; const woundsPct = total > 0 ? Math.round(d.wounds / total * 100) : 0; const otherPct = total > 0 ? Math.round(d.other / total * 100) : 0; const armyPct = (total / data[monthIndex].army * 100).toFixed(2); tooltip.innerHTML = ` ${d.label}${showCounterfactual ? " (projected)" : ""}
Disease: ${d.disease.toLocaleString()} (${diseasePct}%)
Wounds: ${d.wounds.toLocaleString()} (${woundsPct}%)
Other: ${d.other.toLocaleString()} (${otherPct}%)
Army: ${data[monthIndex].army.toLocaleString()} · ${armyPct}% died this month `; tooltip.style.left = (event.offsetX + 14) + "px"; tooltip.style.top = (event.offsetY - 80) + "px"; tooltip.style.opacity = "1"; }); // Hide the tooltip when the mouse leaves the chart svg.on("mouseleave", () => { tooltip.style.opacity = "0"; }); return container; }