Wikileaks dumps (draft)

<!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>
</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);

d3.csv('data.csv', function(data) {
  data.forEach(function(d) {
    d.date = parseTime(d.date);
  });
  draw(data);
});

</script>
</body>

https://unpkg.com/d3

https://unpkg.com/d3-jetpack-module

https://unpkg.com/d3-svg-annotation