25:["$","title",null,{"children":"The World's Biggest Data Breaches and Hacks | FHOÖ Information Visualization | Observable"}] 49:T4abf,cyberIntroo = (() => { const source = breaches; const formatRecords = d3.format(","); const formatCompact = d3.format(".2s"); const cleanData = source .map((d, index) => ({ id: d.id ?? d.ID ?? index, organisation: d.organisation, recordsLost: Number(d.recordsLost ?? d["records lost"]) || 0, year: Number(d.year), sector: d.sector, method: d.method, dataSensitivity: Number(d.dataSensitivity ?? d["data sensitivity"]) || null })) .filter(d => Number.isFinite(d.year)); const totalIncidents = cleanData.length; const totalRecords = d3.sum(cleanData, d => d.recordsLost); const minYear = d3.min(cleanData, d => d.year); const maxYear = d3.max(cleanData, d => d.year); const activeYears = maxYear - minYear + 1; const totalRecordsDisplay = formatCompact(totalRecords).replace("G", "B"); const sensitiveIncidents = cleanData.filter(d => d.dataSensitivity >= 4).length; const annualStats = Array.from( d3.rollup( cleanData, v => ({ incidents: v.length, recordsLost: d3.sum(v, d => d.recordsLost) }), d => d.year ), ([year, values]) => ({ year: Number(year), ...values }) ).sort((a, b) => d3.ascending(a.year, b.year)); const maxAnnualIncidents = d3.max(annualStats, d => d.incidents); const peakYear = annualStats .slice() .sort((a, b) => d3.descending(a.incidents, b.incidents))[0]; const container = html`

[Cybercrime Investigation]

The World's Biggest Data Breaches and Hacks

Tracing Two Decades of Cybercrime

Every breach starts with a moment that feels small:
a stolen device, a reused password, a vulnerable database, a phishing email, a missed security update.

But cybercrime does not stay small.

Behind every exposed record lies a larger system: organized attackers, weak defenses, monetized personal data, and digital infrastructures that can fail at massive scale. What looks like a single technical incident is often part of a much bigger ecosystem of cybercrime - one driven by extortion, surveillance, identity theft, financial fraud, and the industrialized trade of stolen information.

This notebook explores ${formatRecords(totalIncidents)} real-world data breaches and hacks between ${minYear} and ${maxYear}. It does not treat them as isolated headlines. It treats them as evidence.

breach_monitor.log

[Archive Overview]

${formatRecords(totalIncidents)}

incidents scanned

${totalRecordsDisplay}

records exposed

${minYear}-${maxYear}

${activeYears} years covered

${peakYear?.year ?? "n/a"}

peak incident year

Incident pulse over time

${annualStats.map(d => `

`).join("")}

Peak activity: ${peakYear?.year} with ${formatRecords(peakYear?.incidents ?? 0)} incidents.

${formatRecords(sensitiveIncidents)} cases involve highly sensitive data. The archive reads less like a list of incidents and more like a warning signal.

`; const terminal = container.querySelector("[data-terminal]"); const canvas = container.querySelector("[data-rain]"); const ctx = canvas.getContext("2d"); const terminalLines = [ "[BOOT] initializing breach archive ...", `[LOAD] incidents detected: ${formatRecords(totalIncidents)}`, `[TIME] range locked: ${minYear} -> ${maxYear}`, `[DATA] records exposed: ${totalRecordsDisplay}`, `[RISK] high sensitivity cases: ${formatRecords(sensitiveIncidents)}`, "[WARN] exposed records found at massive scale", "[RUN ] launching investigation ..." ]; let lineIndex = 0; let charIndex = 0; let terminalText = ""; function renderTerminal() { if (lineIndex >= terminalLines.length) { terminal.innerHTML = terminalText .replaceAll("[WARN]", '[WARN]') .replaceAll("[BOOT]", '[BOOT]') .replaceAll("[LOAD]", '[LOAD]') .replaceAll("[TIME]", '[TIME]') .replaceAll("[DATA]", '[DATA]') .replaceAll("[RISK]", '[RISK]') .replaceAll("[RUN ]", '[RUN ]') + ''; return; } const currentLine = terminalLines[lineIndex]; if (charIndex < currentLine.length) { terminalText += currentLine[charIndex]; charIndex++; } else { terminalText += "\n"; lineIndex++; charIndex = 0; } terminal.innerHTML = terminalText .replaceAll("[WARN]", '[WARN]') .replaceAll("[BOOT]", '[BOOT]') .replaceAll("[LOAD]", '[LOAD]') .replaceAll("[TIME]", '[TIME]') .replaceAll("[DATA]", '[DATA]') .replaceAll("[RISK]", '[RISK]') .replaceAll("[RUN ]", '[RUN ]') + ''; } const typeInterval = setInterval(renderTerminal, 35); function resizeCanvas() { const rect = container.getBoundingClientRect(); canvas.width = Math.floor(rect.width * devicePixelRatio); canvas.height = Math.floor(rect.height * devicePixelRatio); canvas.style.width = `${rect.width}px`; canvas.style.height = `${rect.height}px`; ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); } resizeCanvas(); const chars = "01 breach leak hash trace risk trust "; const fontSize = 14; let columns = Math.floor(canvas.width / devicePixelRatio / fontSize); let drops = Array.from({ length: columns }, () => Math.random() * -50); function drawRain() { const width = canvas.width / devicePixelRatio; const height = canvas.height / devicePixelRatio; ctx.fillStyle = "rgba(2, 3, 5, 0.09)"; ctx.fillRect(0, 0, width, height); ctx.fillStyle = "rgba(0, 229, 255, 0.55)"; ctx.font = `${fontSize}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`; for (let i = 0; i < drops.length; i++) { const char = chars[Math.floor(Math.random() * chars.length)]; const x = i * fontSize; const y = drops[i] * fontSize; ctx.fillText(char, x, y); if (y > height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } const rainInterval = setInterval(drawRain, 55); const resizeObserver = new ResizeObserver(() => { resizeCanvas(); columns = Math.floor(canvas.width / devicePixelRatio / fontSize); drops = Array.from({ length: columns }, () => Math.random() * -50); }); resizeObserver.observe(container); invalidation.then(() => { clearInterval(typeInterval); clearInterval(rainInterval); resizeObserver.disconnect(); }); return container; })()4a:T2d60,breachGlossary = (() => { const T = breachTheme; const cleanData = T.clean(breaches); const recordsSorted = cleanData.map(d => d.recordsLost).filter(v => v > 0).sort(d3.ascending); const highLossThreshold = d3.quantile(recordsSorted, 0.9) || 0; const highImpactCount = cleanData.filter( d => d.dataSensitivity >= 4 && d.recordsLost >= highLossThreshold ).length; const methodTotals = Array.from( d3.rollup(cleanData.flatMap(d => d.methods), v => v.length, m => m), ([method, mentions]) => ({ method, mentions }) ).sort((a, b) => d3.descending(a.mentions, b.mentions)); const sensitivityRows = Array.from(T.sensitivityLabels, ([level, label]) => `

L${level} ${label} ${T.escapeHtml(T.sensitivityMeanings.get(level))}

`).join(""); const methodRows = methodTotals.map((d, i) => `

${T.escapeHtml(d.method)} ${T.formatCount(d.mentions)} mentions ${T.escapeHtml(T.methodMeanings.get(d.method) ?? "Documented breach method.")}

`).join(""); return html`

[Field Glossary]

Before the Evidence: How to Read This Data

Every chart in this investigation uses the same vocabulary and the same colour logic. Read this once, and every axis, tooltip and legend that follows will make sense.

Incident / Breach

One documented event in which data was exposed - whether through an attack, negligence or an accident. Every row in this archive is one incident.

Records lost

The number of individual data records exposed in an incident: accounts, customer rows, files. One person can appear in several records, so this is not a count of victims - it measures the scale of the exposure.

Sector

The industry of the affected organisation - web platforms, finance, healthcare, government and so on. A few incidents span two sectors ("tech, web") and are counted once in each.

Method

How the breach happened, as documented in public reporting. The five methods in this archive are defined below - including the one distinction that matters most.

Average sensitivity

The mean sensitivity level of all incidents in a group - for example one tile of the attack-surface matrix. An average of 3.8 means the typical case in that group involved financial to highly personal data.

High-loss threshold

A data-based cut-off: the 90th percentile of records lost. In this archive that is ${T.formatBig(highLossThreshold)} records - only one in ten incidents is larger. Nothing about this line is hand-picked.

High-impact case

An incident that combines both risk signals: sensitivity level 4 or 5 and a loss above the high-loss threshold. The archive contains ${T.formatCount(highImpactCount)} such cases - they appear in pink/red throughout this notebook.

Data sensitivity - the 1-to-5 scale

Sensitivity measures how damaging the exposed data is for the people behind it - not how big the breach was. A small breach of level-5 data can be worse than a huge breach of level-1 data.

${sensitivityRows}

Breach methods - and one distinction that matters

Each method keeps the same colour in every chart of this notebook.

${methodRows}

hacked is not the same as poor security. "Hacked" means someone actively attacked - the story is about attacker capability. "Poor security" means the door was already open: an unsecured database, a default password, a missing update. No skill was required. The distinction matters because the fix is different - one calls for defence against adversaries, the other for basic security hygiene that was simply skipped.

Colour rules for everything that follows: sensitivity always uses the ordered scale above, and pink/red appear only at levels 4-5 - wherever you see those colours, they mean elevated human risk. Incident counts use a separate dark-to-cyan scale (brighter = more incidents). Methods keep their fixed categorical colours.

`; })() 4b:T46e0,attackSurfaceMatrix = (() => { const T = breachTheme; const cleanData = T.clean(breaches); // One incident can list several sectors or methods ("tech, web"). // It is counted once for every sector x method combination it belongs to. const pairEntries = cleanData.flatMap(d => d.sectors.flatMap(sector => d.methods.map(method => ({ ...d, sector, method })) ) ); const sectorStats = Array.from( d3.rollup(pairEntries, v => new Set(v.map(e => e.id)).size, d => d.sector), ([sector, incidents]) => ({ sector, incidents }) ).sort((a, b) => d3.descending(a.incidents, b.incidents) || d3.ascending(a.sector, b.sector)); const methodStats = Array.from( d3.rollup(pairEntries, v => new Set(v.map(e => e.id)).size, d => d.method), ([method, incidents]) => ({ method, incidents }) ).sort((a, b) => d3.descending(a.incidents, b.incidents) || d3.ascending(a.method, b.method)); const topSectors = sectorStats.slice(0, 9).map(d => d.sector); const topMethods = methodStats.map(d => d.method); const correctSector = sectorStats[0]?.sector; // Disclose what the top-9 cutoff hides instead of dropping it silently. const hiddenSectors = sectorStats.slice(9).map(d => d.sector); const hiddenIncidents = cleanData.filter( d => !d.sectors.some(s => topSectors.includes(s)) ).length; const cellStats = Array.from( d3.rollup( pairEntries.filter(d => topSectors.includes(d.sector) && topMethods.includes(d.method)), v => ({ incidents: v.length, recordsLost: d3.sum(v, d => d.recordsLost), avgSensitivity: d3.mean(v, d => d.dataSensitivity) ?? null, biggestCase: v.slice().sort((a, b) => d3.descending(a.recordsLost, b.recordsLost))[0] }), d => d.sector, d => d.method ), ([sector, methodMap]) => Array.from(methodMap, ([method, values]) => ({ sector, method, ...values })) ).flat(); const matrixData = topSectors.flatMap(sector => topMethods.map(method => cellStats.find(d => d.sector === sector && d.method === method) ?? { sector, method, incidents: 0, recordsLost: 0, avgSensitivity: null, biggestCase: null } ) ); const maxIncidents = d3.max(matrixData, d => d.incidents) || 1; const thresholds = Array.from(new Set( [1, 0.18, 0.36, 0.58, 0.8] .map((f, i) => (i === 0 ? 1 : Math.max(2, Math.ceil(maxIncidents * f)))) )).sort(d3.ascending); const binColors = T.frequencyColors.slice(0, thresholds.length + 1); const binTextColors = T.frequencyTextColors.slice(0, thresholds.length + 1); const colorScale = d3.scaleThreshold().domain(thresholds).range(binColors); const binIndex = count => thresholds.filter(t => count >= t).length; const legendBins = binColors.map((color, i) => { let label; if (i === 0) label = "0"; else if (i === thresholds.length) label = `${T.formatCount(thresholds[i - 1])}+`; else if (thresholds[i] - 1 === thresholds[i - 1]) label = `${T.formatCount(thresholds[i - 1])}`; else label = `${T.formatCount(thresholds[i - 1])}-${T.formatCount(thresholds[i] - 1)}`; return { color, label }; }); const strongestCell = matrixData.slice().sort((a, b) => d3.descending(a.incidents, b.incidents))[0]; let guessed = false; const container = html`

[Attack Surface]

The Attack Surface: Where Cybercrime Finds Its Way In

One breach can look like an isolated failure. But when similar incidents appear again and again, the archive starts to reveal a pattern. Certain sectors are hit more often. Certain methods return. And some combinations appear often enough to become visible signals in the data. The question is no longer only how many breaches happened. The question is where the same patterns keep resurfacing.

Before the pattern map is revealed, make a guess: which sector appears most often in the breach archive?

Which sector do you think is most frequently affected?

Incidents per tile: ${legendBins.map(bin => ` ${bin.label} `).join("")} Tile colour encodes the number of documented incidents - brighter cyan means more - and every tile has the same size, so size carries no meaning. The number inside each tile is the exact incident count, and the white outline marks the single most frequent sector x method combination in the whole matrix.

How to read this: each row is one sector, each column one breach method - so every tile answers one question: "How often was this sector breached in this way?" Incidents that list two sectors or two methods are counted once per matching tile. Hover over a tile to see incidents, records lost, average sensitivity and the largest matching case. ${hiddenSectors.length > 0 ? ` Note: the matrix shows the ${topSectors.length} most-affected sectors; ${hiddenSectors.length} smaller ${hiddenSectors.length === 1 ? "sector" : "sectors"} (${hiddenSectors.map(s => T.escapeHtml(s)).join(", ")}) with ${T.formatCount(hiddenIncidents)} incidents ${hiddenIncidents === 1 ? "falls" : "fall"} below this cutoff and ${hiddenIncidents === 1 ? "is" : "are"} not displayed. ` : ""}

`; const optionsSlot = container.querySelector("[data-options]"); const resultSlot = container.querySelector("[data-result]"); const chartSlot = container.querySelector("[data-chart]"); const tooltip = container.querySelector("[data-tooltip]"); function renderGuess() { const guessOptions = sectorStats.slice(0, 6).map(d => d.sector); optionsSlot.innerHTML = guessOptions .map((sector, index) => ``) .join(""); optionsSlot.querySelectorAll("button").forEach(button => { button.addEventListener("click", () => { guessed = true; const guessedSector = guessOptions[Number(button.dataset.index)]; optionsSlot.querySelectorAll("button").forEach(b => b.classList.remove("selected")); button.classList.add("selected"); resultSlot.innerHTML = guessedSector === correctSector ? `Correct. The most frequent sector is ${T.escapeHtml(correctSector)}. The matrix below reveals which methods appear most often in this sector.` : `Good guess. The most frequent sector is actually ${T.escapeHtml(correctSector)}, not ${T.escapeHtml(guessedSector)}. The matrix below shows why.`; renderChart(); }); }); } function showTooltip(event, d) { const example = d.biggestCase; const avg = d.avgSensitivity; const avgLabel = avg ? `${avg.toFixed(1)} / 5 (${T.sensitivityLabels.get(Math.min(5, Math.max(1, Math.round(avg))))})` : "n/a"; tooltip.innerHTML = `

${T.escapeHtml(d.sector)} x ${T.escapeHtml(d.method)}

Incidents ${T.escapeHtml(T.formatCount(d.incidents))}

Records lost ${T.escapeHtml(T.formatBig(d.recordsLost))}

Avg. sensitivity ${T.escapeHtml(avgLabel)}

Largest case ${T.escapeHtml(example ? `${example.organisation} (${T.formatBig(example.recordsLost)})` : "n/a")}

${example?.story ? T.escapeHtml(example.story.slice(0, 200) + (example.story.length > 200 ? "..." : "")) : "No matching case in this sector-method combination."}

`; tooltip.style.display = "block"; moveTooltip(event); } function moveTooltip(event) { const offset = 16; const width = 330; const height = 235; let left = event.clientX + offset; let top = event.clientY + offset; if (left + width > window.innerWidth) left = event.clientX - width - offset; if (top + height > window.innerHeight) top = event.clientY - height - offset; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { tooltip.style.display = "none"; } function renderChart() { chartSlot.innerHTML = ""; const width = 960; const rowHeight = 46; const margin = { top: 46, right: 14, bottom: 14, left: 148 }; const height = margin.top + topSectors.length * rowHeight + margin.bottom; const x = d3.scaleBand() .domain(topMethods) .range([margin.left, width - margin.right]) .paddingInner(0.08) .paddingOuter(0.02); const y = d3.scaleBand() .domain(topSectors) .range([margin.top, height - margin.bottom]) .paddingInner(0.14) .paddingOuter(0.02); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("role", "img") .attr("aria-label", "Matrix of breach incidents by sector and method"); // Neutral column headers: inside this chart, cyan already encodes frequency, // so the headers must not add a second colour meaning. svg.append("g") .selectAll("text") .data(topMethods) .join("text") .attr("x", method => x(method) + x.bandwidth() / 2) .attr("y", margin.top - 16) .attr("text-anchor", "middle") .attr("fill", "#dbeafe") .attr("font-size", 13) .attr("font-weight", 750) .text(method => method); svg.append("g") .selectAll("text") .data(topSectors) .join("text") .attr("x", margin.left - 12) .attr("y", sector => y(sector) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("fill", "#9fb2c2") .attr("font-size", 13) .text(sector => sector); const tiles = svg.append("g") .selectAll("rect") .data(matrixData) .join("rect") .attr("x", d => x(d.method)) .attr("y", d => y(d.sector)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 7) .attr("fill", d => guessed ? colorScale(d.incidents) : "#15202e") .attr("stroke", d => guessed && d.sector === strongestCell.sector && d.method === strongestCell.method ? "#ffffff" : "rgba(255,255,255,.12)") .attr("stroke-width", d => guessed && d.sector === strongestCell.sector && d.method === strongestCell.method ? 2.2 : 0.7) .style("cursor", guessed ? "help" : "default"); if (guessed) { svg.append("g") .attr("pointer-events", "none") .selectAll("text") .data(matrixData.filter(d => d.incidents > 0)) .join("text") .attr("x", d => x(d.method) + x.bandwidth() / 2) .attr("y", d => y(d.sector) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", d => binTextColors[binIndex(d.incidents)]) .attr("font-size", 13) .attr("font-weight", 800) .text(d => d.incidents); tiles .on("mouseenter", (event, d) => showTooltip(event, d)) .on("mousemove", event => moveTooltip(event)) .on("mouseleave", hideTooltip); } else { svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", margin.top + (height - margin.top - margin.bottom) / 2) .attr("text-anchor", "middle") .attr("fill", "#5b6b7a") .attr("font-size", 14) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text("[ make your guess above to reveal the pattern map ]"); } chartSlot.append(svg.node()); } renderGuess(); renderChart(); return container; })() 4c:T513d,methodBumpChart = (() => { const T = breachTheme; const formatPercent = d3.format(".0%"); const cleanData = T.clean(breaches); // Every incident contributes one mention per listed method // ("hacked, poor security" counts once for each). const mentionEntries = cleanData.flatMap(d => d.methods.map(method => ({ year: d.year, method })) ); const totalsOverall = Array.from( d3.rollup(mentionEntries, v => v.length, d => d.method), ([method, mentions]) => ({ method, mentions }) ).sort((a, b) => d3.descending(a.mentions, b.mentions) || d3.ascending(a.method, b.method)); const methods = totalsOverall.map(d => d.method); const overallOrder = new Map(methods.map((m, i) => [m, i])); const colorOf = new Map(methods.map((m, i) => [m, T.methodColor(m, i)])); const allYears = Array.from(new Set(cleanData.map(d => d.year))).sort(d3.ascending); const minYear = d3.min(allYears); const maxYear = d3.max(allYears); let startYear = minYear; let endYear = maxYear; let hoveredMethod = null; let pinnedMethod = null; const container = html`

[Method Evolution]

How Breach Methods Rise and Fall

Patterns do not stay still. After seeing where breaches repeatedly appear, the next layer is time: which methods dominate certain years, which ones fade into the background, and which tactics keep returning across the archive. Each line below is one method; its vertical position is its rank in that year - rank 1 means "the most common method of the year".

No menus needed: hover over a line, a label or a chip to focus one method - everything else fades back. Click to pin the focus, click again (or on the background) to release it.

Start year

End year

`; const startSlider = container.querySelector("[data-start]"); const endSlider = container.querySelector("[data-end]"); const startValue = container.querySelector("[data-start-value]"); const endValue = container.querySelector("[data-end-value]"); const chipsSlot = container.querySelector("[data-chips]"); const chartSlot = container.querySelector("[data-chart]"); const noteSlot = container.querySelector("[data-note]"); const insightSlot = container.querySelector("[data-insight]"); const tooltip = container.querySelector("[data-tooltip]"); function showTooltip(event, point, method) { tooltip.innerHTML = `

${T.escapeHtml(method)} - ${point.year}

Rank #${point.rank} of ${methods.length}

Mentions ${T.escapeHtml(T.formatCount(point.mentions))}

Share of year ${point.totalMentions ? formatPercent(point.mentions / point.totalMentions) : "n/a"}

Incidents in year ${T.escapeHtml(T.formatCount(point.incidents))}

`; tooltip.style.display = "block"; moveTooltip(event); } function moveTooltip(event) { const offset = 16; const width = 300; const height = 165; let left = event.clientX + offset; let top = event.clientY + offset; if (left + width > window.innerWidth) left = event.clientX - width - offset; if (top + height > window.innerHeight) top = event.clientY - height - offset; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { tooltip.style.display = "none"; } function render() { hideTooltip(); if (startYear > endYear) [startYear, endYear] = [endYear, startYear]; startSlider.value = startYear; endSlider.value = endYear; startValue.textContent = startYear; endValue.textContent = endYear; const years = allYears.filter(year => year >= startYear && year <= endYear); chartSlot.innerHTML = ""; chipsSlot.innerHTML = ""; hoveredMethod = null; if (years.length < 2) { noteSlot.textContent = ""; insightSlot.innerHTML = "Select a range of at least two years to draw the ranking lines."; return; } const rangeMentions = mentionEntries.filter(d => d.year >= startYear && d.year <= endYear); const rangeIncidents = cleanData.filter(d => d.year >= startYear && d.year <= endYear); const counts = d3.rollup(rangeMentions, v => v.length, d => d.year, d => d.method); const incidentsByYear = d3.rollup(rangeIncidents, v => v.length, d => d.year); // Ties keep the previous year's order, so sparse years do not // produce artificial rank swaps. let prevRanks = new Map(methods.map(m => [m, overallOrder.get(m) + 1])); const rows = years.map(year => { const list = methods.map(method => ({ method, mentions: counts.get(year)?.get(method) || 0 })); list.sort((a, b) => d3.descending(a.mentions, b.mentions) || d3.ascending(prevRanks.get(a.method), prevRanks.get(b.method)) || d3.ascending(overallOrder.get(a.method), overallOrder.get(b.method)) ); prevRanks = new Map(list.map((d, i) => [d.method, i + 1])); const totalMentions = d3.sum(list, d => d.mentions); return { year, totalMentions, incidents: incidentsByYear.get(year) || 0, ranks: new Map(list.map((d, i) => [d.method, { rank: i + 1, mentions: d.mentions }])) }; }); const series = methods.map(method => ({ method, color: colorOf.get(method), points: rows.map(r => { const entry = r.ranks.get(method); return { year: r.year, rank: entry.rank, mentions: entry.mentions, totalMentions: r.totalMentions, incidents: r.incidents }; }) })); const width = 980; const height = 420; const margin = { top: 44, right: 188, bottom: 52, left: 188 }; const x = d3.scalePoint() .domain(years) .range([margin.left, width - margin.right]); const y = d3.scalePoint() .domain(d3.range(1, methods.length + 1)) .range([margin.top + 10, height - margin.bottom - 14]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("role", "img") .attr("aria-label", "Bump chart ranking breach methods per year"); svg.append("text") .attr("x", margin.left) .attr("y", 20) .attr("fill", "#9fb2c2") .attr("font-size", 12) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`Rank by yearly method mentions - 1 = most common - ${startYear} to ${endYear}`); svg.append("g") .selectAll("line") .data(d3.range(1, methods.length + 1)) .join("line") .attr("x1", margin.left - 8) .attr("x2", width - margin.right + 8) .attr("y1", rank => y(rank)) .attr("y2", rank => y(rank)) .attr("stroke", "rgba(255,255,255,.06)"); const tickStep = Math.max(1, Math.ceil(years.length / 12)); const tickYears = years.filter((year, i) => i % tickStep === 0); const lastYear = years[years.length - 1]; if (tickYears[tickYears.length - 1] !== lastYear) { // Avoid two colliding labels at the right edge. if (years.length - 1 - years.indexOf(tickYears[tickYears.length - 1]) <= tickStep / 2) { tickYears[tickYears.length - 1] = lastYear; } else { tickYears.push(lastYear); } } const axis = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom + 12})`) .call( d3.axisBottom(x) .tickValues(tickYears) .tickFormat(d3.format("d")) .tickSize(4) ); axis.selectAll("text").attr("fill", "#9fb2c2").attr("font-size", 11); axis.selectAll("path,line").attr("stroke", "rgba(255,255,255,.18)"); const line = d3.line() .x(p => x(p.year)) .y(p => y(p.rank)) .curve(d3.curveBumpX); const focusTargets = new Map(); const activeMethod = () => hoveredMethod ?? pinnedMethod; function applyFocus() { const active = activeMethod(); for (const [method, t] of focusTargets) { const isActive = active === method; const dim = active !== null && !isActive; t.line .attr("opacity", dim ? 0.13 : 1) .attr("stroke-width", isActive ? 4.2 : 2.6) .attr("filter", isActive ? `drop-shadow(0 0 7px ${t.glow})` : null); t.dots.attr("opacity", dim ? 0.13 : 1); t.labels .attr("opacity", dim ? 0.22 : 1) .attr("font-weight", isActive ? 800 : 650); t.chip.classList.toggle("focused", isActive); t.chip.classList.toggle("dimmed", dim); } } const focusHandlers = method => ({ enter: () => { hoveredMethod = method; applyFocus(); }, leave: () => { hoveredMethod = null; applyFocus(); }, click: event => { event.stopPropagation(); pinnedMethod = pinnedMethod === method ? null : method; applyFocus(); } }); for (const s of series) { const handlers = focusHandlers(s.method); const glow = (d3.color(s.color)?.copy({ opacity: 0.5 }) ?? "rgba(0,229,255,.45)").toString(); const visibleLine = svg.append("path") .attr("d", line(s.points)) .attr("fill", "none") .attr("stroke", s.color) .attr("stroke-width", 2.6) .attr("stroke-linecap", "round"); // Fat invisible line so the whole path is easy to hover. svg.append("path") .attr("d", line(s.points)) .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 18) .style("cursor", "pointer") .on("mouseenter", handlers.enter) .on("mouseleave", handlers.leave) .on("click", handlers.click); const dots = svg.append("g") .selectAll("circle") .data(s.points) .join("circle") .attr("cx", p => x(p.year)) .attr("cy", p => y(p.rank)) .attr("r", p => p.mentions > 0 ? 5.5 : 3.2) .attr("fill", p => p.mentions > 0 ? s.color : "#0a1520") .attr("stroke", s.color) .attr("stroke-width", p => p.mentions > 0 ? 0 : 1.4) .style("cursor", "pointer") .on("mouseenter", (event, p) => { handlers.enter(); showTooltip(event, p, s.method); }) .on("mousemove", (event, p) => showTooltip(event, p, s.method)) .on("mouseleave", () => { handlers.leave(); hideTooltip(); }) .on("click", handlers.click); const first = s.points[0]; const last = s.points[s.points.length - 1]; const labels = svg.append("g") .selectAll("text") .data([ { point: first, anchor: "end", xPos: x(first.year) - 14 }, { point: last, anchor: "start", xPos: x(last.year) + 14 } ]) .join("text") .attr("x", d => d.xPos) .attr("y", d => y(d.point.rank)) .attr("dy", "0.35em") .attr("text-anchor", d => d.anchor) .attr("fill", s.color) .attr("font-size", 12.5) .attr("font-weight", 650) .style("cursor", "pointer") .text(d => `${d.point.rank}. ${s.method}`) .on("mouseenter", handlers.enter) .on("mouseleave", handlers.leave) .on("click", handlers.click); focusTargets.set(s.method, { line: visibleLine, dots, labels, glow, chip: null }); } svg.on("click", () => { pinnedMethod = null; applyFocus(); }); chartSlot.append(svg.node()); for (const s of series) { const handlers = focusHandlers(s.method); const chip = document.createElement("button"); chip.className = "chip"; chip.innerHTML = `${T.escapeHtml(s.method)}`; chip.addEventListener("mouseenter", handlers.enter); chip.addEventListener("mouseleave", handlers.leave); chip.addEventListener("click", handlers.click); chipsSlot.append(chip); focusTargets.get(s.method).chip = chip; } applyFocus(); noteSlot.innerHTML = ` Hollow dots mark years without a single documented case for that method. Incidents that list two methods count once for each. `; const totalsInRange = Array.from( d3.rollup(rangeMentions, v => v.length, d => d.method), ([method, mentions]) => ({ method, mentions }) ).sort((a, b) => d3.descending(a.mentions, b.mentions)); const totalMentions = d3.sum(totalsInRange, d => d.mentions); const dominant = totalsInRange[0]; const firstRow = rows[0]; const lastRow = rows[rows.length - 1]; const moves = methods.map(method => ({ method, from: firstRow.ranks.get(method).rank, to: lastRow.ranks.get(method).rank })); const climber = moves.slice().sort((a, b) => d3.descending(a.from - a.to, b.from - b.to))[0]; const dominantHoldsTop = rows.every(r => r.ranks.get(dominant.method).rank === 1); const movementText = climber && climber.from > climber.to ? `The clearest movement: ${T.escapeHtml(climber.method)} climbed from rank ${climber.from} (${startYear}) to rank ${climber.to} (${endYear}).` : dominantHoldsTop ? `The ranking stays remarkably stable across this window - ${T.escapeHtml(dominant.method)} never lets go of the top.` : `The window starts and ends with a similar ranking, even though positions shuffle in the years between.`; insightSlot.innerHTML = ` How to read this: between ${startYear} and ${endYear} the archive contains ${T.formatCount(rangeIncidents.length)} incidents with ${T.formatCount(totalMentions)} method mentions. ${T.escapeHtml(dominant.method)} dominates with ${formatPercent(totalMentions ? dominant.mentions / totalMentions : 0)} of all mentions. ${movementText} `; } startSlider.addEventListener("input", event => { startYear = Number(event.target.value); render(); }); endSlider.addEventListener("input", event => { endYear = Number(event.target.value); render(); }); render(); return container; })() 4d:T4f73,breachTimeline = (() => { const T = breachTheme; const formatPercent = d3.format(".0%"); const allIncidents = T.clean(breaches); const cleanData = allIncidents .filter(d => d.recordsLost > 0) .map((d, index) => ({ ...d, // Incidents listing two methods are coloured by the first one. primaryMethod: d.methods[0] ?? "unknown", // Deterministic horizontal jitter so same-year bubbles do not stack on one x. yearJitter: d.year + ((index % 17) - 8) * 0.03 })); const excludedCount = allIncidents.length - cleanData.length; const methodTotals = Array.from( d3.rollup(cleanData, v => v.length, d => d.primaryMethod), ([method, count]) => ({ method, count }) ).sort((a, b) => d3.descending(a.count, b.count) || d3.ascending(a.method, b.method)); const methods = methodTotals.map(d => d.method); const colorOf = new Map(methods.map((m, i) => [m, T.methodColor(m, i)])); const sortedRecords = cleanData.map(d => d.recordsLost).sort(d3.ascending); const maxRecords = d3.max(cleanData, d => d.recordsLost) || 1; const visibleMinRecords = Math.max(10, d3.quantile(sortedRecords, 0.01) || 1); const clampedCount = cleanData.filter(d => d.recordsLost < visibleMinRecords).length; // Same data-based threshold as the impact field: 90th percentile of records lost. const highLossThreshold = d3.quantile(sortedRecords, 0.9) || 1; const minYear = d3.min(cleanData, d => d.year); const maxYear = d3.max(cleanData, d => d.year); const annotated = cleanData.slice() .sort((a, b) => d3.descending(a.recordsLost, b.recordsLost)) .slice(0, 5); const annotatedIds = new Set(annotated.map(d => d.id)); // Escalation stats for the insight line. const midYear = Math.floor((minYear + maxYear) / 2); const medianEarly = d3.median(cleanData.filter(d => d.year <= midYear), d => d.recordsLost) || 1; const medianLate = d3.median(cleanData.filter(d => d.year > midYear), d => d.recordsLost) || 1; const bigCases = cleanData.filter(d => d.recordsLost >= 1e8); const firstBigYear = d3.min(bigCases, d => d.year); let hoveredMethod = null; let pinnedMethod = null; const container = html`

[Escalation Timeline]

Two Decades, Every Breach at Once

Rankings show which methods dominate - this view shows what they did. Every bubble below is one documented breach, placed by year and by how many records it exposed. Read from left to right, the archive stops being a table and becomes a landscape: a floor of everyday incidents that never made global headlines, and a thin ceiling of mega-breaches that keeps rising.

The vertical scale is logarithmic - every gridline step means one hundred times more records. The named giants at the top are not typical breaches; they are the outliers that shape public perception.

Colour = breach method

${methods.map(m => ` ${T.escapeHtml(m)} `).join("")}

Size & height = records lost

`; const chipsSlot = container.querySelector("[data-chips]"); const chartSlot = container.querySelector("[data-chart]"); const sizeLegendSlot = container.querySelector("[data-size-legend]"); const insightSlot = container.querySelector("[data-insight]"); const tooltip = container.querySelector("[data-tooltip]"); function showTooltip(event, d) { tooltip.innerHTML = `

${T.escapeHtml(d.organisation)}

Year ${T.escapeHtml(d.year)}

Records lost ${T.escapeHtml(T.formatCount(d.recordsLost))}

Method ${T.escapeHtml(d.method)}

Sensitivity ${d.dataSensitivity ? `Level ${d.dataSensitivity} - ${T.escapeHtml(T.sensitivityLabels.get(d.dataSensitivity))}` : "not documented"}

Sector ${T.escapeHtml(d.sector)}

${d.story ? T.escapeHtml(d.story.slice(0, 220) + (d.story.length > 220 ? "..." : "")) : "No story available for this case."}

`; tooltip.style.display = "block"; moveTooltip(event); } function moveTooltip(event) { const offset = 16; const width = 350; const height = 265; let left = event.clientX + offset; let top = event.clientY + offset; if (left + width > window.innerWidth) left = event.clientX - width - offset; if (top + height > window.innerHeight) top = event.clientY - height - offset; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { tooltip.style.display = "none"; } function renderChart() { chartSlot.innerHTML = ""; chipsSlot.innerHTML = ""; const width = 980; const height = 540; const margin = { top: 58, right: 30, bottom: 52, left: 78 }; const x = d3.scaleLinear() .domain([minYear - 0.6, maxYear + 0.6]) .range([margin.left, width - margin.right]); const y = d3.scaleLog() .domain([visibleMinRecords, maxRecords]) .range([height - margin.bottom, margin.top]) .clamp(true); const r = d3.scaleSqrt() .domain([visibleMinRecords, maxRecords]) .range([2.5, 14]) .clamp(true); const yTicks = [1e4, 1e6, 1e8].filter(v => v >= visibleMinRecords && v <= maxRecords); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("role", "img") .attr("aria-label", "Timeline of breaches by year and records lost"); const grid = svg.append("g"); yTicks.forEach(v => { grid.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(v)) .attr("y2", y(v)) .attr("stroke", "rgba(255,255,255,.07)"); grid.append("text") .attr("x", margin.left - 10) .attr("y", y(v)) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("fill", "#9fb2c2") .attr("font-size", 11) .text(T.formatBig(v)); }); const xTicks = d3.range(minYear, maxYear + 1).filter(yr => yr % 2 === 0); const axis = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom + 8})`) .call(d3.axisBottom(x).tickValues(xTicks).tickFormat(d3.format("d")).tickSize(4)); axis.selectAll("text").attr("fill", "#9fb2c2").attr("font-size", 11); axis.selectAll("path,line").attr("stroke", "rgba(255,255,255,.18)"); // Same 90th-percentile threshold as the impact field, for continuity. svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(highLossThreshold)) .attr("y2", y(highLossThreshold)) .attr("stroke", "#fb7185") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "6 8"); svg.append("text") .attr("x", width - margin.right) .attr("y", y(highLossThreshold) - 7) .attr("text-anchor", "end") .attr("fill", "#fda4af") .attr("font-size", 11) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`Top 10% threshold - ${T.formatBig(highLossThreshold)} records`); svg.append("text") .attr("x", -height / 2) .attr("y", 22) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("fill", "#9fb2c2") .attr("font-size", 12) .text("Records lost (log scale)"); const focusTargets = new Map(); const activeMethod = () => hoveredMethod ?? pinnedMethod; function applyFocus() { const active = activeMethod(); for (const [method, t] of focusTargets) { const isActive = active === method; const dim = active !== null && !isActive; // Dimmed bubbles must not steal hover from the focused method. t.group .attr("opacity", dim ? 0.12 : 1) .attr("pointer-events", dim ? "none" : null); t.chip.classList.toggle("focused", isActive); t.chip.classList.toggle("dimmed", dim); } } const focusHandlers = method => ({ enter: () => { hoveredMethod = method; applyFocus(); }, leave: () => { hoveredMethod = null; applyFocus(); }, click: event => { event.stopPropagation(); pinnedMethod = pinnedMethod === method ? null : method; applyFocus(); } }); // Draw small bubbles last so they stay hoverable on top of large ones. const drawOrder = cleanData.slice().sort((a, b) => d3.descending(a.recordsLost, b.recordsLost)); for (const method of methods) { const group = svg.append("g"); group.selectAll("circle") .data(drawOrder.filter(d => d.primaryMethod === method)) .join("circle") .attr("class", "timeline-dot") .attr("cx", d => x(d.yearJitter)) .attr("cy", d => y(d.recordsLost)) .attr("r", d => r(d.recordsLost)) .attr("fill", colorOf.get(method)) .attr("fill-opacity", d => annotatedIds.has(d.id) ? 0.85 : 0.45) .attr("stroke", d => annotatedIds.has(d.id) ? "#ffffff" : colorOf.get(method)) .attr("stroke-opacity", d => annotatedIds.has(d.id) ? 0.9 : 0.5) .attr("stroke-width", d => annotatedIds.has(d.id) ? 1 : 0.5) .on("mouseenter", (event, d) => showTooltip(event, d)) .on("mousemove", (event, d) => showTooltip(event, d)) .on("mouseleave", hideTooltip); focusTargets.set(method, { group, chip: null }); } // Annotate the five largest cases, nudging labels apart where they would collide. const labels = annotated.map(d => ({ d, x: x(d.yearJitter), y: y(d.recordsLost) - r(d.recordsLost) - 8, anchorY: y(d.recordsLost) - r(d.recordsLost) - 2 })).sort((a, b) => d3.ascending(a.x, b.x)); for (let i = 1; i < labels.length; i++) { for (let j = 0; j < i; j++) { const dx = Math.abs(labels[i].x - labels[j].x); const dy = Math.abs(labels[i].y - labels[j].y); if (dx < 150 && dy < 15) { labels[i].y = labels[j].y - 16; } } } const annotationLayer = svg.append("g").attr("pointer-events", "none"); for (const label of labels) { if (label.anchorY - label.y > 6) { annotationLayer.append("line") .attr("x1", label.x) .attr("x2", label.x) .attr("y1", label.y + 3) .attr("y2", label.anchorY) .attr("stroke", "rgba(255,255,255,.35)") .attr("stroke-width", 0.8); } annotationLayer.append("text") .attr("x", Math.min(Math.max(label.x, margin.left + 60), width - margin.right - 60)) .attr("y", label.y) .attr("text-anchor", "middle") .attr("fill", "#f8fafc") .attr("font-size", 11) .attr("font-weight", 700) .text(`${label.d.organisation} - ${T.formatBig(label.d.recordsLost)}`); } svg.on("click", () => { pinnedMethod = null; applyFocus(); }); chartSlot.append(svg.node()); for (const method of methods) { const handlers = focusHandlers(method); const chip = document.createElement("button"); chip.className = "chip"; chip.innerHTML = `${T.escapeHtml(method)}`; chip.addEventListener("mouseenter", handlers.enter); chip.addEventListener("mouseleave", handlers.leave); chip.addEventListener("click", handlers.click); chipsSlot.append(chip); focusTargets.get(method).chip = chip; } applyFocus(); const sizeValues = [1e5, 1e7, 1e9].filter(v => v <= maxRecords); const maxR = r(sizeValues[sizeValues.length - 1] ?? maxRecords); sizeLegendSlot.innerHTML = sizeValues.map(v => ` ${T.formatBig(v)} `).join(""); const factor = medianEarly > 0 ? medianLate / medianEarly : 0; insightSlot.innerHTML = ` How to read this: each bubble is one breach; hover for the full case, and hover or click the method chips above the chart to isolate one method. Both height and bubble size encode records lost - a double encoding so the giants stay visible; colour encodes the breach method (incidents listing two methods are coloured by the first). The five largest cases are drawn brighter, outlined in white and named - that emphasis marks sheer size only, not sensitivity. The escalation is measurable: the median breach exposed ${T.formatBig(medianEarly)} records in ${minYear}-${midYear} and ${T.formatBig(medianLate)} in ${midYear + 1}-${maxYear} ${factor >= 1.5 ? `- roughly ${factor >= 10 ? Math.round(factor) : Math.round(factor * 10) / 10}x more` : ""}. All ${T.formatCount(bigCases.length)} cases with 100M records or more occurred in ${firstBigYear} or later. ${clampedCount > 0 ? `${T.formatCount(clampedCount)} very small ${clampedCount === 1 ? "case sits" : "cases sit"} on the bottom edge of the scale.` : ""} ${excludedCount > 0 ? `${T.formatCount(excludedCount)} ${excludedCount === 1 ? "incident" : "incidents"} without a documented record count ${excludedCount === 1 ? "is" : "are"} not shown.` : ""} `; } renderChart(); return container; })() 4e:T44d0,dataLossImpactField = (() => { const T = breachTheme; const allIncidents = T.clean(breaches); const cleanData = allIncidents .filter(d => d.recordsLost > 0 && d.dataSensitivity >= 1 && d.dataSensitivity <= 5) .map((d, index) => ({ ...d, // Deterministic horizontal jitter so points inside one level do not stack. sensitivityJitter: d.dataSensitivity + ((index % 23) - 11) * 0.014 })); const excludedCount = allIncidents.length - cleanData.length; const sortedRecords = cleanData.map(d => d.recordsLost).sort(d3.ascending); const maxRecords = d3.max(cleanData, d => d.recordsLost) || 1; const visibleMinRecords = Math.max(10, d3.quantile(sortedRecords, 0.01) || 1); const clampedCount = cleanData.filter(d => d.recordsLost < visibleMinRecords).length; // Data-based threshold: the 90th percentile of records lost. const highLossThreshold = d3.quantile(sortedRecords, 0.9) || 1; const isHighImpact = d => d.dataSensitivity >= 4 && d.recordsLost >= highLossThreshold; const criticalCases = cleanData.filter(isHighImpact); const container = html`

[Data Loss Impact]

Where Exposure Becomes Human Risk

Not every breach carries the same weight. Some incidents expose millions of records at once. Others appear smaller, but contain data that can follow people for years: identity details, financial traces, private information. This view combines the two signals from the glossary - how much data was exposed (vertical position and point size) and how sensitive it was (horizontal position and colour). Where both are high, a breach stops being a technical event.

A breach does not need to be the largest case in the archive to matter. The shaded zone in the upper right marks the high-impact cases: sensitivity level 4-5 combined with a loss above the data-based top-10% threshold.

${T.formatCount(criticalCases.length)} high-impact cases (sensitivity 4-5 above the threshold)

High-loss threshold (90th percentile): ${T.formatBig(highLossThreshold)} records

Colour = data sensitivity (only)

${Array.from(T.sensitivityLabels, ([level, label]) => ` L${level} ${T.escapeHtml(label)} `).join("")}

Size = records lost (only)

`; const chartSlot = container.querySelector("[data-chart]"); const sizeLegendSlot = container.querySelector("[data-size-legend]"); const explanationSlot = container.querySelector("[data-explanation]"); const tooltip = container.querySelector("[data-tooltip]"); function showTooltip(event, d) { tooltip.innerHTML = `

${T.escapeHtml(d.organisation)}

${isHighImpact(d) ? 'high-impact case' : ""}

Year ${T.escapeHtml(d.year)}

Records lost ${T.escapeHtml(T.formatCount(d.recordsLost))}

Sensitivity Level ${d.dataSensitivity} - ${T.escapeHtml(T.sensitivityLabels.get(d.dataSensitivity))}

Sector ${T.escapeHtml(d.sector)}

Method ${T.escapeHtml(d.method)}

${d.story ? T.escapeHtml(d.story.slice(0, 220) + (d.story.length > 220 ? "..." : "")) : "No story available for this case."}

`; tooltip.style.display = "block"; moveTooltip(event); } function moveTooltip(event) { const offset = 16; const width = 350; const height = 265; let left = event.clientX + offset; let top = event.clientY + offset; if (left + width > window.innerWidth) left = event.clientX - width - offset; if (top + height > window.innerHeight) top = event.clientY - height - offset; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { tooltip.style.display = "none"; } function renderChart() { chartSlot.innerHTML = ""; const width = 980; const height = 540; const margin = { top: 64, right: 46, bottom: 58, left: 78 }; const x = d3.scaleLinear() .domain([0.65, 5.35]) .range([margin.left, width - margin.right]); const y = d3.scaleLog() .domain([visibleMinRecords, maxRecords]) .range([height - margin.bottom, margin.top]) .clamp(true); const r = d3.scaleSqrt() .domain([visibleMinRecords, maxRecords]) .range([2.5, 9]) .clamp(true); // Calm axis: only three labelled decades (each step = x100). const yTicks = [1e4, 1e6, 1e8].filter(v => v >= visibleMinRecords && v <= maxRecords); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("role", "img") .attr("aria-label", "Scatterplot showing data sensitivity against records lost"); svg.append("defs").html(` `); d3.range(1, 6).forEach(level => { svg.append("rect") .attr("x", x(level - 0.5)) .attr("y", margin.top) .attr("width", x(level + 0.5) - x(level - 0.5)) .attr("height", height - margin.top - margin.bottom) .attr("fill", T.sensitivityColors.get(level)) .attr("opacity", 0.022); svg.append("text") .attr("x", x(level)) .attr("y", margin.top - 18) .attr("text-anchor", "middle") .attr("fill", level >= 4 ? "#fda4af" : "#9fb2c2") .attr("font-size", 11) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`L${level} - ${T.sensitivityLabels.get(level)}`); }); // High-impact zone: sensitivity 4-5 above the 90th-percentile threshold. svg.append("rect") .attr("x", x(3.5)) .attr("y", y(maxRecords)) .attr("width", x(5.35) - x(3.5)) .attr("height", y(highLossThreshold) - y(maxRecords)) .attr("fill", "url(#impactZoneGradient)") .attr("stroke", "rgba(239,68,68,.18)") .attr("stroke-width", 1) .attr("rx", 12); svg.append("text") .attr("x", x(5.3)) .attr("y", y(maxRecords) + 16) .attr("text-anchor", "end") .attr("fill", "rgba(254,205,211,.85)") .attr("font-size", 10) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .attr("letter-spacing", "0.1em") .text("HIGH-IMPACT ZONE"); svg.append("line") .attr("x1", x(0.65)) .attr("x2", x(5.35)) .attr("y1", y(highLossThreshold)) .attr("y2", y(highLossThreshold)) .attr("stroke", "#fb7185") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "6 8"); svg.append("text") .attr("x", x(0.7)) .attr("y", y(highLossThreshold) - 7) .attr("fill", "#fda4af") .attr("font-size", 11) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`Top 10% threshold - ${T.formatBig(highLossThreshold)} records`); const grid = svg.append("g"); yTicks.forEach(v => { grid.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(v)) .attr("y2", y(v)) .attr("stroke", "rgba(255,255,255,.07)"); grid.append("text") .attr("x", margin.left - 10) .attr("y", y(v)) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("fill", "#9fb2c2") .attr("font-size", 11) .text(T.formatBig(v)); }); svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 16) .attr("text-anchor", "middle") .attr("fill", "#9fb2c2") .attr("font-size", 12) .text("Data sensitivity level"); svg.append("text") .attr("x", -height / 2) .attr("y", 22) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("fill", "#9fb2c2") .attr("font-size", 12) .text("Records lost (log scale)"); svg.append("g") .selectAll("circle") .data(cleanData.slice().sort((a, b) => d3.ascending(a.recordsLost, b.recordsLost))) .join("circle") .attr("class", "impact-dot") .attr("cx", d => x(d.sensitivityJitter)) .attr("cy", d => y(d.recordsLost)) .attr("r", d => r(d.recordsLost)) .attr("fill", d => T.sensitivityColors.get(d.dataSensitivity)) .attr("fill-opacity", d => isHighImpact(d) ? 0.78 : 0.32) .attr("stroke", d => isHighImpact(d) ? "#ffffff" : "rgba(255,255,255,.24)") .attr("stroke-width", d => isHighImpact(d) ? 1 : 0.45) .on("mouseenter", (event, d) => showTooltip(event, d)) .on("mousemove", (event, d) => showTooltip(event, d)) .on("mouseleave", hideTooltip); chartSlot.append(svg.node()); // Size legend built from the same radius scale as the chart. const sizeValues = [1e5, 1e7, 1e9].filter(v => v <= maxRecords); const maxR = r(sizeValues[sizeValues.length - 1] ?? maxRecords); sizeLegendSlot.innerHTML = sizeValues.map(v => ` ${T.formatBig(v)} `).join(""); explanationSlot.innerHTML = ` How to read this: each point is one breach. Colour encodes only the sensitivity level; size and vertical position encode only the number of records lost. The vertical scale is logarithmic - each labelled gridline is 100 times the previous one, otherwise the mega-breaches would crush everything else into a single line. Points in the shaded zone combine both risk signals and are drawn brighter with a white outline. ${clampedCount > 0 ? `${T.formatCount(clampedCount)} very small ${clampedCount === 1 ? "case sits" : "cases sit"} on the bottom edge of the scale.` : ""} ${excludedCount > 0 ? `${T.formatCount(excludedCount)} ${excludedCount === 1 ? "incident" : "incidents"} without a documented sensitivity level or record count ${excludedCount === 1 ? "is" : "are"} not shown.` : ""} `; } renderChart(); return container; })() 4f:T4043,sectorRiskProfile = (() => { const T = breachTheme; const formatPercent = d3.format(".0%"); const cleanData = T.clean(breaches); // One entry per incident per sector ("tech, web" counts once in tech AND once in web). const sectorEntries = cleanData.flatMap(d => d.sectors.map(sector => ({ ...d, sectorSingle: sector })) ); // ALL sectors - no top-N cutoff in this chart. const sectorStats = Array.from( d3.rollup( sectorEntries, v => { const documented = v.filter(d => d.dataSensitivity !== null); const highSens = documented.filter(d => d.dataSensitivity >= 4); const methodCounts = d3.rollup( v.flatMap(d => d.methods), list => list.length, m => m ); const topMethod = Array.from(methodCounts, ([method, count]) => ({ method, count })) .sort((a, b) => d3.descending(a.count, b.count) || d3.ascending(a.method, b.method))[0]; return { incidents: v.length, recordsLost: d3.sum(v, d => d.recordsLost), documented: documented.length, highSens: highSens.length, share: documented.length ? highSens.length / documented.length : 0, avgSensitivity: d3.mean(documented, d => d.dataSensitivity) ?? null, topMethod: topMethod?.method ?? "n/a", biggestCase: v.slice().sort((a, b) => d3.descending(a.recordsLost, b.recordsLost))[0] }; }, d => d.sectorSingle ), ([sector, values]) => ({ sector, ...values }) ).sort((a, b) => d3.descending(a.share, b.share) || d3.descending(a.incidents, b.incidents)); const documentedTotal = cleanData.filter(d => d.dataSensitivity !== null); const overallShare = documentedTotal.length ? documentedTotal.filter(d => d.dataSensitivity >= 4).length / documentedTotal.length : 0; const mostBreached = sectorStats.slice().sort((a, b) => d3.descending(a.incidents, b.incidents))[0]; const topRisk = sectorStats[0]; const smallSectors = sectorStats.filter(d => d.incidents < 10).map(d => d.sector); const container = html`

[Sector Risk]

Frequency Is Not Risk: Sector Profiles

The matrix showed where breaches happen most often. This view asks a harder question: where do they hurt the most? For every sector, it measures the share of documented cases that exposed level 4-5 data - health records, passwords, full identities. The result reorders the ranking completely: the most-breached sectors are not the ones whose breaches carry the deepest human risk.

Every sector in the archive is shown - including the small ones the matrix had to cut. Dot position is the high-sensitivity share; dot size is the number of incidents behind it, so a far-right dot that is tiny rests on thin evidence.

Position = share of level 4-5 cases

archive average (${formatPercent(overallShare)}) sector share (pink = the notebook's risk colour, used on purpose)

Dot size = incidents in sector

${T.escapeHtml(d.sector)}

Incidents ${T.escapeHtml(T.formatCount(d.incidents))}

Level 4-5 cases ${T.escapeHtml(T.formatCount(d.highSens))} of ${T.escapeHtml(T.formatCount(d.documented))} documented (${formatPercent(d.share)})

Avg. sensitivity ${d.avgSensitivity ? `${d.avgSensitivity.toFixed(1)} / 5` : "n/a"}

Records lost ${T.escapeHtml(T.formatBig(d.recordsLost))}

Most common method ${T.escapeHtml(d.topMethod)}

Largest case ${T.escapeHtml(d.biggestCase ? `${d.biggestCase.organisation} (${T.formatBig(d.biggestCase.recordsLost)})` : "n/a")}

`; tooltip.style.display = "block"; moveTooltip(event); } function moveTooltip(event) { const offset = 16; const width = 340; const height = 220; let left = event.clientX + offset; let top = event.clientY + offset; if (left + width > window.innerWidth) left = event.clientX - width - offset; if (top + height > window.innerHeight) top = event.clientY - height - offset; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { tooltip.style.display = "none"; } function renderChart() { chartSlot.innerHTML = ""; const width = 980; const rowHeight = 38; const margin = { top: 38, right: 74, bottom: 40, left: 158 }; const height = margin.top + sectorStats.length * rowHeight + margin.bottom; const maxShare = d3.max(sectorStats, d => d.share) || 1; const x = d3.scaleLinear() .domain([0, Math.min(1, Math.ceil((maxShare + 0.05) * 10) / 10)]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(sectorStats.map(d => d.sector)) .range([margin.top, height - margin.bottom]) .padding(0.2); const size = d3.scaleSqrt() .domain([ d3.min(sectorStats, d => d.incidents) || 1, d3.max(sectorStats, d => d.incidents) || 1 ]) .range([5, 13]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("role", "img") .attr("aria-label", "Share of high-sensitivity breaches per sector"); const xTicks = x.ticks(5); const grid = svg.append("g"); xTicks.forEach(v => { grid.append("line") .attr("x1", x(v)) .attr("x2", x(v)) .attr("y1", margin.top - 6) .attr("y2", height - margin.bottom) .attr("stroke", "rgba(255,255,255,.06)"); grid.append("text") .attr("x", x(v)) .attr("y", height - margin.bottom + 18) .attr("text-anchor", "middle") .attr("fill", "#9fb2c2") .attr("font-size", 11) .text(formatPercent(v)); }); // Archive-wide reference line. svg.append("line") .attr("x1", x(overallShare)) .attr("x2", x(overallShare)) .attr("y1", margin.top - 10) .attr("y2", height - margin.bottom) .attr("stroke", "rgba(255,255,255,.45)") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "5 6"); svg.append("text") .attr("x", x(overallShare)) .attr("y", margin.top - 16) .attr("text-anchor", "middle") .attr("fill", "#dbeafe") .attr("font-size", 10.5) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`archive average ${formatPercent(overallShare)}`); for (const d of sectorStats) { const cy = y(d.sector) + y.bandwidth() / 2; svg.append("text") .attr("x", margin.left - 12) .attr("y", cy) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("fill", "#e6edf3") .attr("font-size", 13) .text(d.sector); svg.append("text") .attr("x", margin.left - 12) .attr("y", cy + 13) .attr("text-anchor", "end") .attr("fill", "#5b6b7a") .attr("font-size", 9.5) .attr("font-family", "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace") .text(`${d.incidents} incidents`); svg.append("line") .attr("x1", x(0)) .attr("x2", x(d.share)) .attr("y1", cy) .attr("y2", cy) .attr("stroke", "rgba(251,113,133,.3)") .attr("stroke-width", 2); svg.append("circle") .attr("class", "risk-dot-mark") .attr("cx", x(d.share)) .attr("cy", cy) .attr("r", size(d.incidents)) .attr("fill", "#fb7185") .attr("fill-opacity", 0.85) .attr("stroke", "rgba(255,255,255,.55)") .attr("stroke-width", 0.8) .on("mouseenter", event => showTooltip(event, d)) .on("mousemove", event => moveTooltip(event)) .on("mouseleave", hideTooltip); svg.append("text") .attr("x", x(d.share) + size(d.incidents) + 8) .attr("y", cy) .attr("dy", "0.35em") .attr("fill", "#fecdd3") .attr("font-size", 12) .attr("font-weight", 700) .text(formatPercent(d.share)); } chartSlot.append(svg.node()); const sizeExamples = [ d3.min(sectorStats, d => d.incidents) || 1, Math.round(d3.median(sectorStats, d => d.incidents) || 1), d3.max(sectorStats, d => d.incidents) || 1 ]; const maxR = size(sizeExamples[2]); sizeLegendSlot.innerHTML = sizeExamples.map(v => ` ${T.formatCount(v)} `).join(""); const contrast = topRisk.sector === mostBreached.sector ? `${T.escapeHtml(topRisk.sector)} leads both rankings here: it is the most-breached sector (${T.formatCount(mostBreached.incidents)} incidents) and the one with the highest share of level 4-5 cases (${formatPercent(topRisk.share)}).` : `${T.escapeHtml(mostBreached.sector)} is hit most often (${T.formatCount(mostBreached.incidents)} incidents), but only ${formatPercent(mostBreached.share)} of its documented cases involve level 4-5 data. ${T.escapeHtml(topRisk.sector)} tops the risk ranking instead: ${formatPercent(topRisk.share)} of its ${T.formatCount(topRisk.documented)} documented incidents exposed highly sensitive data.`; explanationSlot.innerHTML = ` How to read this: the share counts only incidents with a documented sensitivity level, and incidents spanning two sectors are counted once in each (their records too). ${contrast} ${smallSectors.length === 1 ? ` The smallest sector (${T.escapeHtml(smallSectors[0])}) rests on fewer than 10 incidents - read its share with care. ` : smallSectors.length > 1 ? ` Small sectors (${smallSectors.map(s => T.escapeHtml(s)).join(", ")}) rest on fewer than 10 incidents - read their shares with care. ` : ""} `; } renderChart(); return container; })() 50:T4029,awarenessClose = (() => { const T = breachTheme; const formatPercent = d3.format(".0%"); const cleanData = T.clean(breaches); const totalIncidents = cleanData.length; const totalRecords = d3.sum(cleanData, d => d.recordsLost); const minYear = d3.min(cleanData, d => d.year); const maxYear = d3.max(cleanData, d => d.year); // Beat 1 - clustering: the densest sector x method combinations. const pairEntries = cleanData.flatMap(d => d.sectors.flatMap(sector => d.methods.map(method => ({ id: d.id, sector, method })) ) ); const combos = Array.from( d3.rollup(pairEntries, v => new Set(v.map(e => e.id)).size, d => `${d.sector} x ${d.method}`), ([combo, incidents]) => ({ combo, incidents }) ).sort((a, b) => d3.descending(a.incidents, b.incidents)); const topCombos = combos.slice(0, 3); const comboShare = topCombos[0] ? topCombos[0].incidents / totalIncidents : 0; // Beat 2 - method evolution: shares in the early vs. the late half of the archive. const midYear = Math.floor((minYear + maxYear) / 2); const mentionEntries = cleanData.flatMap(d => d.methods.map(method => ({ year: d.year, method }))); const shareIn = (from, to) => { const slice = mentionEntries.filter(d => d.year >= from && d.year <= to); const byMethod = d3.rollup(slice, v => v.length, d => d.method); const total = slice.length || 1; return method => (byMethod.get(method) || 0) / total; }; const earlyShare = shareIn(minYear, midYear); const lateShare = shareIn(midYear + 1, maxYear); const methodTotals = Array.from( d3.rollup(mentionEntries, v => v.length, d => d.method), ([method, mentions]) => ({ method, mentions }) ).sort((a, b) => d3.descending(a.mentions, b.mentions)); const top3Methods = methodTotals.slice(0, 3).map((d, i) => ({ method: d.method, color: T.methodColor(d.method, i), early: earlyShare(d.method), late: lateShare(d.method) })); const dominant = top3Methods[0]; // Beat 3 - mega-breaches: how much of all records sit in just five cases. const topFive = cleanData.slice().sort((a, b) => d3.descending(a.recordsLost, b.recordsLost)).slice(0, 5); const megaShare = totalRecords ? d3.sum(topFive, d => d.recordsLost) / totalRecords : 0; const megaCaseShare = totalIncidents ? topFive.length / totalIncidents : 0; // Beat 4 - sensitivity: how often data loss becomes human risk. const highSensCount = cleanData.filter(d => d.dataSensitivity >= 4).length; const highSensShare = totalIncidents ? highSensCount / totalIncidents : 0; const oneIn = highSensShare > 0 ? Math.round(1 / highSensShare) : 0; // --- micro visualisations ------------------------------------------------- const comboBars = topCombos.map((d, i) => { const w = topCombos[0].incidents ? (d.incidents / topCombos[0].incidents) * 100 : 0; const shades = [T.frequencyColors[5], T.frequencyColors[4], T.frequencyColors[3]]; return `

${T.escapeHtml(d.combo)}

${d.incidents}

`; }).join(""); const slopeViz = (() => { const w = 190, h = 84, x1 = 48, x2 = 142, yTop = 14, yBottom = 62; const maxShare = d3.max(top3Methods, d => Math.max(d.early, d.late)) || 1; const yPos = share => yBottom - (share / maxShare) * (yBottom - yTop); const lines = top3Methods.map(m => ` `).join(""); return ` `; })(); const megaBar = `

5 cases ${formatPercent(megaShare)} of all records

`; const riskDots = (() => { const total = 10; const risky = Math.max(1, Math.round(highSensShare * total)); return `

${d3.range(total).map(i => ` `).join("")}

${risky} in ${total} breaches expose level 4-5 data

`; })(); // -------------------------------------------------------------------------- return html`

[Final Report]

The Story the Archive Tells

Four patterns run through everything this investigation has shown. None of them is abstract - each one is a reason why awareness is a security control, not a slogan.

Cybercrime clusters.

Breaches are not spread evenly across the economy. ${T.escapeHtml(topCombos[0]?.combo ?? "n/a")} alone accounts for ${T.formatCount(topCombos[0]?.incidents ?? 0)} incidents - ${formatPercent(comboShare)} of the entire archive in a single tile of the attack-surface matrix. Attackers go where data is dense and defences are thin.

${comboBars}

Methods evolve - but the leader holds.

${dominant && dominant.early <= dominant.late ? `${T.escapeHtml(dominant.method)} made up ${formatPercent(dominant.early)} of method mentions in ${minYear}-${midYear} - and grew to ${formatPercent(dominant.late)} in ${midYear + 1}-${maxYear}. While lost devices and accidents fade, deliberate attacks keep gaining ground.` : `${T.escapeHtml(dominant?.method ?? "n/a")} led with ${formatPercent(dominant?.early ?? 0)} of method mentions in ${minYear}-${midYear} and still holds ${formatPercent(dominant?.late ?? 0)} in ${midYear + 1}-${maxYear}. The mix beneath it keeps shifting - the pressure does not.`}

${slopeViz}

Mega-breaches distort perception.

Just five incidents - ${formatPercent(megaCaseShare)} of all cases - hold ${formatPercent(megaShare)} of the ${T.formatBig(totalRecords)} exposed records. Headlines are shaped by these outliers, but the everyday reality is hundreds of smaller breaches that never make the news.

${megaBar}

Sensitivity turns data loss into human risk.

About 1 in ${oneIn} breaches exposed level 4-5 data: health records, passwords, full identities. Those are the ${T.formatCount(highSensCount)} cases where a database entry becomes something that can follow a person for years.

${riskDots}

Awareness matters.

Patterns can be learned. Methods can be anticipated. Most of the doors in this archive were not blasted open - they were left unlocked. Awareness reduces harm, speeds up reaction, and makes cybersecurity a shared responsibility - for the organisations that hold our data, and for every person whose records are in the next database.

${T.formatCount(totalIncidents)} incidents - ${T.formatBig(totalRecords)} records - ${minYear}-${maxYear} - ${formatPercent(highSensShare)} high sensitivity

`; })() 51:T12b2,breachTheme = (() => { // Shared design system for the whole breach investigation. // Colour rules used by every chart: // 1. Data sensitivity has ONE ordered scale (cool -> warm); pink and red // appear only at levels 4 and 5, i.e. only where human risk is highest. // 2. Incident counts / frequencies use a sequential dark -> bright cyan scale. // 3. Breach methods are categories and keep fixed categorical colours // (no red, no pink). const sensitivityLabels = new Map([ [1, "Basic"], [2, "Personal"], [3, "Financial"], [4, "Sensitive"], [5, "Critical"] ]); const sensitivityMeanings = new Map([ [1, "Email addresses or basic online account information"], [2, "Personal details such as names, addresses or social security numbers"], [3, "Credit card numbers and other financial data"], [4, "Passwords, health records and other highly personal data"], [5, "Full identity sets - enough to impersonate a person"] ]); // Blue -> orange -> red ramp. Deliberately shares NO hex with the method // palette below, so a colour can never mean two things at once. const sensitivityColors = new Map([ [1, "#93c5fd"], [2, "#60a5fa"], [3, "#f97316"], [4, "#fb7185"], [5, "#ef4444"] ]); // Sequential scale for incident counts: index 0 = no incidents, // then five steps from dark teal to bright cyan. const frequencyColors = ["#101826", "#0d2c40", "#0f4a63", "#12718f", "#17a1c4", "#67e8f9"]; // Text colours that stay readable on top of each frequency bin. const frequencyTextColors = ["#5b6b7a", "#dbeafe", "#e6f7ff", "#f8fafc", "#04222e", "#04222e"]; const methodColors = new Map([ ["hacked", "#22d3ee"], ["poor security", "#facc15"], ["lost device", "#34d399"], ["oops!", "#a78bfa"], ["inside job", "#94a3b8"] ]); const methodMeanings = new Map([ ["hacked", "An active, deliberate attack from outside. Intruders break in on purpose - via exploits, stolen credentials, malware or social engineering."], ["poor security", "No sophisticated attack was needed. Unprotected databases, default passwords or missing updates left the data exposed - the door was already open."], ["lost device", "A laptop, phone or storage drive containing unencrypted data was lost or stolen."], ["oops!", "Data was accidentally published, sent to the wrong recipients or left publicly accessible by mistake."], ["inside job", "Someone with legitimate access - an employee or contractor - stole or leaked the data."] ]); const methodFallbackColors = ["#38bdf8", "#4ade80", "#fb923c", "#c4b5fd", "#67e8f9"]; const methodColor = (method, index = 0) => methodColors.get(method) ?? methodFallbackColors[index % methodFallbackColors.length]; // "tech, web" -> ["tech", "web"]; also normalises case and trims whitespace. const splitList = value => Array.from(new Set( String(value ?? "") .split(",") .map(part => part.trim().toLowerCase()) .filter(Boolean) )); const formatCount = d3.format(","); // 1200000000 -> "1.2B", 100000000 -> "100M", 91000 -> "91K", 30 -> "30" const formatBig = value => { if (!Number.isFinite(value) || value <= 0) return "0"; if (value < 1000) return String(Math.round(value)); return d3.format(".3s")(value) .replace(/(\.\d*?)0+(?=[a-zA-Z])/, "$1") .replace(/\.(?=[a-zA-Z])/, "") .replace("G", "B") .replace("k", "K"); }; const escapeHtml = value => String(value ?? "") .replaceAll("&", "&") .replaceAll("<", "<") .replaceAll(">", ">") .replaceAll('"', """) .replaceAll("'", "'"); // One normalisation for all charts, so every view counts the same way. const clean = source => source .map((d, index) => { const level = Math.round(Number(d.dataSensitivity ?? d["data sensitivity"])); return { id: d.id ?? d.ID ?? index, organisation: d.organisation ?? "Unknown organisation", recordsLost: Number(d.recordsLost ?? d["records lost"]) || 0, year: Number(d.year), sector: String(d.sector || "unknown"), method: String(d.method || "unknown"), sectors: splitList(d.sector || "unknown"), methods: splitList(d.method || "unknown"), story: d.story || "", dataSensitivity: level >= 1 && level <= 5 ? level : null }; }) .filter(d => Number.isFinite(d.year)); return { sensitivityLabels, sensitivityMeanings, sensitivityColors, frequencyColors, frequencyTextColors, methodColors, methodMeanings, methodColor, splitList, formatCount, formatBig, escapeHtml, clean }; })() 52:[{"id":"68e7018eba1df4caf45fe1c9ae02dc6015eacae8c49676b87f841dd60153f74bb81f22430412bbc584cfa0593fbcb817630e90747514aafab2cd01d105e14838","href":"https://static.observableusercontent.com/files/68e7018eba1df4caf45fe1c9ae02dc6015eacae8c49676b87f841dd60153f74bb81f22430412bbc584cfa0593fbcb817630e90747514aafab2cd01d105e14838","name":"worlds_biggest_breaches_cleaned.csv","type":"text/csv","lastModified":1784622078015.387,"size":178996}] 29:{"id":"c4e22edb463d1e3c","slug":null,"title":"The World's Biggest Data Breaches and Hacks","thumbnail":"d3cc03c830935b52952e825d08aea318371d18bc32e52643d0ac50af0f3c0a58","access_level":"public","create_time":"$D2026-07-21T08:21:18.015Z","update_time":"$D2026-07-21T08:21:18.015Z","view_time":null,"first_public_time":"$D2026-07-21T08:21:18.015Z","has_unpublished_edits":null,"fork":{"id":"4883858e9d2b638b","slug":null,"title":"The World's Biggest Data Breaches and Hacks","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1fff5ba91df85863","login":"iris-wiesinger","name":"Iris Wiesinger","avatar_url":"https://avatars-next.observableusercontent.com/5db71676ab745144d577dcd74f75b83535508c088b6c2753c6e1184815781445","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"editor"},{"type":"individual","id":"1fff5ba91df85863","login":"iris-wiesinger","name":"Iris Wiesinger","avatar_url":"https://avatars-next.observableusercontent.com/5db71676ab745144d577dcd74f75b83535508c088b6c2753c6e1184815781445","tier":null,"role":"editor"},{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The World's Biggest Data Breaches and Hacks","cells":[{"id":113,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"worlds_biggest_breaches_cleaned = FileAttachment(\"worlds_biggest_breaches_cleaned.csv\").csv()","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Plot = require(\"@observablehq/plot@0.6\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"breaches = (async () => {\n const rows = await FileAttachment(\"worlds_biggest_breaches_cleaned.csv\").csv({typed: true});\n\n return rows.map(d => ({\n id: d.ID,\n organisation: d.organisation,\n alternativeName: d[\"alternative name\"],\n recordsLost: Number(d[\"records lost\"]) || 0,\n year: Number(d.year),\n date: d.date,\n story: d.story,\n sector: d.sector,\n method: d.method,\n interestingStory: d[\"interesting story\"],\n dataSensitivity: Number(d[\"data sensitivity\"]) || null,\n displayedRecords: d[\"displayed records\"],\n sourceName: d[\"source name\"],\n sourceLink1: d[\"1st source link\"],\n sourceLink2: d[\"2nd source link\"]\n }));\n})()","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$51","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null