data-breach-chronicle

.block

height: 960

draw.js

/**
 * Drawing data breach chronicle chart as a beeswarm.
 * 
 * Data Source: http://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/
 * (click 'see the data' at the bottom, then jump to the latest data export as csv, delete 1st and 3rd row)
 * 
 * @author Tim Lauv
 * @created 2018.06.17
 */

document.addEventListener('DOMContentLoaded', function(){
    console.log('READY!');

    // Globals    

    // Hooks up the <SVG> canvas in index.html
    var svg = d3.select('svg'),
        width = +(svg.style('width')).replace('px', ''),
        height = svg.attr('height');

    // D3 Forces (simulation)
    var sim = d3.forceSimulation()
        .force('Y', d3.forceY(height / 2))
        .force('charge', d3.forceManyBody());

    // Raw data in JSON format
    d3.csv('Information-is-Beautiful-Data-Breaches-(public)-2018-update.csv').then(data => {
        //console.log(data);

        // Extract useful attributes, ranges and unique keys
        var extracted = {
            nodes: data.map(d => {
                return {
                    entity: d.Entity, // label (radius > threshold) (done)
                    'entity-short-description': d['alternative name'], 
                    'entity-type': d['ORGANISATION'], // stroke color (done)
                    year: d['YEAR(2)'],  // x axis (done)
                    count: d['records lost'],  // area sqrt() = radius (done)
                    method: d['METHOD OF LEAK'], // fill color (done)
                    level: d['DATA SENSITIVITY'], // alpha (done)
                };
            }),
        };
        extracted.methods = d3.set(extracted.nodes, d => d.method).values();
        extracted['entity-types'] = d3.set(extracted.nodes, d => d['entity-type']).values();
        extracted.years = d3.set(extracted.nodes, d => d.year).values();
        extracted.counts = d3.set(extracted.nodes, d => d.count).values();
        extracted.levels = d3.set(extracted.nodes, d => d.level).values();
        //console.log(extracted);

        // Prepare x-axis scale (years to [0 - width]) for both axis and force
        var x = d3.scaleLinear()
                    .domain(d3.extent(extracted.years))
                    .range([0 + width * 0.085, width * 0.85]);
        sim.force('X', d3.forceX(d => x(d.year)).strength(0.8));

        // Prepare radius for attack count (use area instead: r ^ r = count)
        var r = d3.scaleSqrt()
                    .domain(d3.extent(extracted.counts))
                    .range([0, width / 5]);
        extracted.nodes.forEach(d => {
            // Note: cache the radius since it requires square root!
            d.r = r(d.count / 50000);
        });

        // Prepare node color fill scale (counts to [theme colors])
        var fill = d3.scaleQuantile()
                    .domain(extracted.counts)
                    .range(['#9B699B'/*Prague*/, '#DCE1EB'/*Munich*/, '#4B5A6E'/*Lausanne*/, '#333742'/*Berlin*/, 
                            '#23B9B9'/*Genève*/, '#9B699B'/*Toulouse*/, '#2D4664'/*Copenhagen*/, '#3C6482'/*Stockholm*/]);

        // Prepare node color fill alpha scale (breach levels to [0.4 - 0.8])
        var alpha = d3.scalePoint()
                    .domain(extracted.levels)
                    .range([0.4, 0.8]);

        // Graphics Rendering (create svg elements to represent extracted.nodes/links)
        var g_node = svg.append('g').attr('class', 'nodes').selectAll('circle').data(extracted.nodes).enter()
            .append('circle')
            .attr('r', d => d.r)
            .attr('fill', d => fill(d.count))
            .attr('fill-opacity', 0.5)
            .attr('opacity', d => alpha(d.level))
            .attr('stroke', d => fill(d.count));

        var g_label = svg.append('g').attr('class', 'label').selectAll('text').data(extracted.nodes).enter()
            .append('text')
            // Note: centering the text is delayed till sim tick. (can't have BBox measurement at this point)
            .attr('dy', d => d.r / 2 * 0.2)
            .attr('font-size', d => d.r / 2 * 0.6)
            .attr('opacity', d => alpha(d.level) + 0.3)
            .text(d => {
                // Note: filtering company name by radius
                if (d.r > 1)
                    return d.entity;
                return '';
            });

        var g_axis_x = svg.append('g').attr('class', 'axis axis-x')
            .call(d3.axisBottom(x).ticks(extracted.years.length / 2, 'd'));

        // Note: not showing the grid lines since they won't align with n-body forced nodes;
        // var g_dotted_grid_x = svg.append('g').attr('class', 'grid grid-x').selectAll('line').data(extracted.years).enter()
        //     .append('line')
        //     .attr('x1', d => x(d))
        //     .attr('y1', 20)
        //     .attr('x2', d => x(d))
        //     .attr('y2', 750);

        // Patch extracted.nodes/links data with force adjusted position values
        sim.nodes(extracted.nodes)
            // Upon position changes (per ticking) update svg elements accordingly
            .on('tick', function(){
                // Note: .x, .y is now adjusted by the forces!
                g_node.attr('cx', d => d.x)
                        .attr('cy', d => d.y);
                g_label.attr('x', d => d.x)
                        .attr('y', d => d.y)
                        .attr('dx', function(d){
                            // Note: requires svg node local scope, thus can't use => fn (which has global this!)
                            return - this.getBBox().width / 2;
                        });

            }); 

    });

});

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
    body {
        font-family: 'Lato', sans-serif;
    }

    .header {
        margin-top: 25px;
        margin-left: 50px;
        position:absolute;
    }

    .header .title {
        display: inline-block;
        border: 2px solid;
        padding: 0.7em;
        margin: 0;
    }

    .header .sub {
        font-size: 0.7em;
        margin-left: 2.5em;
    }

    svg {
        /* centering the svg canvas with auto width!*/
        padding-top: 1em;
        margin: 0 auto;
        display: block;
        width: 95%;
    }

    .nodes circle {
        /* fill: none; */
        /* fill-opacity: 0.4; */
        /* stroke: #000000; */
        stroke-width: 1px;
    }

    .axis-x {
        transform: translateY(760px) /* translateX(-20px) */; 
        stroke-width: 3px;
    }

    .axis-x text {
        font-size: 1.5em;
        transform: translateY(1em);
    }

    /* .grid-x {
        transform: translateX(-20px);
        stroke-width: 1px;
        stroke: #000000;
        stroke-dasharray: 20,10,5,5,5,10;
        opacity: 0.1;
    } */

</style>
<div class="header">
    <h1 class="title">Data Breach Chronicles 2004 - 2018</h1>
    <p class="sub">Data Source: <a href="http://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/">http://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/</a></p>
</div>
<svg height="800"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="draw.js"></script>

Information-is-Beautiful-Data-Breaches-(public)-2018-update.csv