Bono Parcial
Bono Parcial is a dual-chart visualization that examines data breaches, combining a scatterplot of record losses over time with a bar chart of affected entities. The visualization filters records to show only those marked as "hacked," mapping each entity’s name on the y-axis and number of records lost on the x-axis. The bar chart encodes the number of records stolen per entity on a linear scale, with the scatterplot plotting the same metric across years. Data comes from a manually curated CSV listing notable data breaches, including details such as the organization, method of leak, sensitivity, and source links. The layout uses two coordinated charts sharing a common width, with axis labels and margins configured to display the entities and their corresponding loss values clearly. The visualization highlights the scale of data breaches across different organizations and time periods.# Bono Parcial
**Interactive Data Breach Visualization** — A dual-chart D3.js visualization exploring historical data breaches and record losses.
## Overview
This visualization combines a bar chart and a scatterplot to examine data breach incidents across organizations and time. The author filters records to focus on hacked entities, using the `exclude` field in the dataset to control which items appear.
## Visual Design
The visualization uses an SVG canvas with a two-panel layout:
- **Upper panel**: A linear chart (scatterplot) showing the relationship between the year of the breach (x-axis) and the number of records lost (y-axis, log scale implied), with the y-axis split across a vertical range.
- **Lower panel**: A bar chart displaying entities and their corresponding record losses, using an ordinal scale for entity names and a linear scale for the record counts.
## Key Features
- **Dual-chart layout**: The upper panel visualizes breaches over time, while the lower panel displays entities ranked by records lost.
- **Responsive scales**: Custom scales for both charts (linear and ordinal) adapted to the data.
- **Filtering logic**: A "hacked" selection is implemented in the `plot` function, filtering data by method of leak (inside job, hacked, lost/stolen media, accidentally published) and deduplicating entity names.
- **Annotated data**: The dataset includes rich annotations, including the story behind each breach, data sensitivity, and source links, enabling context-rich analysis.
- **Encoding**: Years are encoded (0=2004, 8=2012, 9=2013, 10=2014, 11=2015, 12=latest).
Title: Bono Parcial
Description:
This visualization explores the landscape of data breaches from 2004 to 2015, plotting over 40 security incidents by the number of records compromised. Each entity is positioned along a shared time axis, with vertical jitter applied to mitigate overplotting. The area encodes the magnitude of records lost; position encodes the year of the breach and the victim organization. This layout reveals the staggering dominance of a few massive breaches (such as AOL, T-Mobile, and UK Revenue & Customs) compared to the long tail of smaller, but still significant, incidents.
Color is used as a categorical encoding of the breach method, with a lighter palette. The user can select the category and filter by the type of attack.
Visualization type: bar chart / scatterplot / table (?)
Data type: [dataViz]
Bono Parcial is a custom visualization that combines bar charts and a scatterplot to explore a dataset of data breaches. It shows records stolen/lost for different entities across time. Rows are coloured by method of leak, and sized by number of records. Tooltips show the story of the leak.
Please note that the example for "Bono Parcial" is incomplete and experimental. Use the "gist" url to access the working demo (if any).
Look at the data and the provided code. Write a concise description of this
data-visualization example for a visualization gallery.
Use only this data, provide a description around 200 words. Include the
following details:
- title: Bono Parcial
- author: JuanSMartinez
- date: unknown
- code: d3 v4
- framework: d3
- layout: custom SVG bar chart with an inverted Y-axis and legends
- license: MIT
The description should explain the visualization without referencing
the code directly. Keep the description concise, for a general
audience. Use verbs like "encodes", "maps", "sorts", "ranks", "positions",
"represents", "shows". Do not use the word "contains". Include the data
description that mentions the source.
For context, the chart should be read as follows:
The chart shows records lost due to data breaches. Every bar in the bar chart represents an entity. The bar width encodes the record count for that entity. Data is sorted by record count. Color encodes a selected method of data breach. To the left, the slope chart shows how the loss of records for different entities changed over the years. In this case, the slopes show the records lost by that entity in other years. Below the horizontal axis is the entity name, drawn as text.
The description should not be more than 150 words. Make it concise. Write in complete
sentences and in English. Do not mention any specific files or explicit
instructions. Do not include markdown code in your response. Write
directly into the "DESCRIPTION" box below.
Note: The description should not repeat the chart's title. It should describe what is shown. Also, it should be clear enough that someone who cannot see the visualization can picture it.
Restart the counter and the text from the beginning.
DESCRIPTION:
</body>
</html>Bono Parcial visualizes a dataset of major data breaches, using an interactive scatterplot and bar chart combination to explore records stolen, method of attack, and data sensitivity. The visualization filters breaches by method (e.g., hacked, inside job, lost/stolen media) via a selection, and plots each entity twice: once on the upper half as a bar chart with ordinal categories, and once on the lower half as a linear chart of record counts. Years are encoded in the dataset with numbers (0=2004, 12=latest), and unknown breach sizes are approximated (e.g., 3m, 4m). Hovering or clicking on a bar highlights the entity across both views, revealing the story and source notes encoded in the data. The design uses an SVG renderer with D3 v4 and a custom margin-based layout to align the two chart types, with interactions synchronized to explore breaches by organization, method, and year. The visualization is built with D3.js and is open-source under the MIT license.