D3 Examples - Wikileaks dumps (draft)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3"></script>
  <script src="https://unpkg.com/d3-jetpack-module"></script>
  <script src="https://unpkg.com/d3-svg-annotation"></script>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
        background-color: #F8F7F1; }
    h1 { padding-left: 1em;}
    .tick line {
        stroke: #dbdbdb;
        stroke-dasharray: 5;
    }
    path.domain {
        stroke: #dbdbdb;
        stroke-width: 1px;
    }
        circle.circle { fill: #254251; stroke: #F9F8F3; }   
    
      .annotation path, .annotation-connector {
      stroke: #E0AB26;
      stroke-width: 2px;
      fill: none;
  }
  .annotation path.connector-arrow, 
  .annotation path.connector-dot, 
  .title text, .annotation text {
      fill: #E0AB26;
      font: 13px sans-serif;;
      fill: #696969;
      color: #696969;
  }
  .annotation-note-bg {
      fill: rgba(0, 0, 0, 0);
  }
  .annotation-note-title, text.title {
      font: 13px sans-serif;;
      fill: #696969;
      color: #696969;
  }
  .annotation-note-content line { dispay: none; }
​
  </style>
</head>
​
<body>
  <h1>Size of Wikileaks document dumps, 2007 to 2017</h1>
  <script>
var config = {
  width: 700,
  height: 400,
  opacity: 0.2,
  ticksCount: 12,
  circleRadius: 40,
};
var margin = {
  top: 40,
  right: 40,
  bottom: 30,
  left: 40,
};
var chartwidth = config.width - margin.left - margin.right;
var height = config.height - margin.top - margin.bottom;
​
const radius = d3
  .scaleSqrt()
  .range([3, config.circleRadius])
  .domain([0, 5000000])
  .exponent(0.3);
​
const parseTime = d3.timeParse('%Y/%m/%d');
​
var svg = d3
  .select('body')
  .append('svg')
  .at({ width: config.width, height: config.height })
  .st({ backgroundColor: '#F8F7F1' });
var g = svg.append('g').translate([margin.left, margin.top]);
​
function draw(data) {
  
  var x = d3.scaleLinear().range([0, chartwidth]).domain([0, data.length]);
​
  x.domain(
    d3.extent(data, function(d) {
      return d.date;
    })
  );
​
  g
    .append('g')
    .translate([0, height / 2])
    .call(
      d3
        .axisBottom(x)
        .ticks(config.ticksCount)
        .tickFormat(d3.timeFormat('%m/%y'))
        .tickSizeInner(70)
    );
  
  var annotations = [
    {
      note: {
        label: '400,000 documents',
        title: 'The Iraq War Logs',
        wrap: 130,
      },
      x: x(parseTime('2010/10/01')),
      y: height/2,
      dy: -80,
      dx: 0,
    },
    {
      note: {
        label: '5,000,000 documents',
        title: 'The Stratfor emails',
        wrap: 130,
      },
      x: x(parseTime('2012/02/27')),
      y: height/2,
      dy: -130,
      dx: 0,
    },
    {
      note: { label: '8,800 documents', title: 'Vault 7', wrap: 80 },
      x: x(parseTime('2017/03/07')),
      y: height/2,
      dy: -50,
      dx: 0,
    },
  ];
  var makeAnnotations = d3
    .annotation()
    .type(d3.annotationLabel)
    .annotations(annotations);
  g.append('g').attr('class', 'annotation-group').call(makeAnnotations);
​
  var circles = g.selectAll('circle').data(data);
  circles
    .enter()
    .append('circle')
    .at({
      class: 'circle',
      cx: function(d) {
        return x(d.date);
      },
      cy: height / 2,
    })
    .transition()
    .attr('r', function(d) {
      return radius(d.docs);
    });
}
​
d3.csv('data.csv', function(data) {
  data.forEach(function(d) {
    d.date = parseTime(d.date);
  });
  draw(data);
});
​
   
  </script>
</body>
​
    