basilesimon · July 17, 2017 17:52
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!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>
diff --git a/thumbnail.png b/thumbnail.png
date	docs	note
2006/12/01	1	Somali assassination order
2007/11/07	2	Gitmo procedures
2008/02/01	1	Bank Julius Baer lawsuit
2008/03/24	126	Scientology
2008/09/01	0	Sarah Palin's Yahoo! rubico email hack
2008/11/01	0	BNP members
2009/01/01	86	Peru oil scandal
2009/02/01	6780	Congressional Research Service
2009/07/01	0	Iranian Natanz nuclear facility (Stuxnet)
2009/09/01	2	Kauphting Bank
2009/10/01	1	Joint Services Protocol 440
2009/10/30	1	Toxic Dumping in Cote d'Ivoire
2009/10/01	570000	9/11 Pager messages
2010/02/15	1	Reykjavik 13
2010/03/01	1	Counterintelligence Analysis Report on how to prevent leaks
2010/04/01	1	Reuters helo shot
2010/07/01	92000	Afghanistan War Logs
2010/08/12	43	Love Parade 2010
2010/10/01	400000	Iraq War Logs
2010/11/28	250000	Diplomatic cables
2011/04/01	800	Guantanamo Files
2011/12/01	0	Spy Files
2012/02/27	5000000	Stratfor emails
2012/07/05	2000000	Syria Files
2012/10/25	100	Detainees Policies
2013/04/01	1700000	Kissinger Cables
2013/09/01	250	Spy Files 3
2013/11/13	1	TPP IP draft
2015/04/16	30000	Sony Files
2015/06/10	1	TPP Healthcare draft
2015/06/19	500000	Saudi Cables
2015/06/23	0	Espionnage Elysée
2015/07/01	0	NSA Germany tapping
2015/07/04	0	NSA Brazil tapping
2015/07/29	1	TPP OSEs
2015/07/31	0	NSA Japan and Mitsubishi tapping
2015/07/08	1000000	Hacking Team
2015/10/21	11	Brennan emails and security clearance application
2016/07/04	1258	Clinton emails
2016/07/19	290000	Turkey AKP emails
2016/08/22	28000	DNC emails
2016/10/07	2000	Podesta emails
2016/11/25	500	Yemen Files
2016/11/29	60000	HBGary emails
2017/02/16	1	CIA orders on French election
2017/03/04	30000	Clinton Archive
2017/03/07	8800	Vault 7
	<!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>