D3 Examples - World's Biggest Data Breaches

World's Biggest Data Breaches

This is a new version of the World's Biggest Data Breaches by Tom Evans posted in Information is Beautiful's website. This new proposal is built for the purpose of showing the biggest data breaches since 2004 to 2016 to general public.

Developed by Meili Vanegas Hernández

Visual Analytics 201620

Universidad de los Andes

Bogotá, Colombia

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body width="80%">
  <div class="row" id="title">
    <div class="col-md-1"></div>
    <div class="col-md-10"><h1>World's Biggest Data Breaches</h1></div>
    <div class="col-md-1"></div>    
  </div>
  <div class="row" id="title">
    <div class="col-md-1"></div>
    <div class="col-md-10"><p style="padding-left:1.5cm;">Developed by <a target="_blank" href="https://mvanegas10.github.io/">Meili Vanegas Hernández</a>, data from <a target="_blank" href="https://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/">Information is beautiful</a>.</p></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8"><p style="padding:0cm 0cm 0cm 2cm;">Drag the gray bar to select a year</p></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10" id="titleChart"><p></p></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10" id="chart"></div>
    <div class="col-md-1"></div>
  </div>
    <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10"><h3 id="entitiesTitle" style="padding:0cm 0cm 0cm 1cm;"></h3></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-8"><p id="continue" style="padding:0cm 0cm 0cm 2cm;"></p></div>
    <div class="col-md-1"></div>
  </div>
  <div class="row" id="entities-detail">
    <div class="col-md-7" id="entities" style="padding:0cm 0cm 0cm 1cm;"></div>
    <div class="col-md-5" id="detail">
      <h3 id="titleDetail"></h3>
      <h4 id="story"></h4> 
      <a id="source"></a> 
    </div>
  </div>
  <script src="vis.js"></script>
</body>
​
    