junkwhinger · July 25, 2015 08:36
diff --git a/date_frequency.csv b/date_frequency.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head><h1>The Hacking Team: # of emails regarding 'SKA' - 2,197 emails</h1></head>

 <style>
 body {
 font: 10px sans-serif;
 }

 .axis {
  font: 11px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 div.tooltip {   
  position: absolute;           
  text-align: left;           
  width: 400px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
 }

 </style>

 <body>
 	
 <script src="http://d3js.org/d3.v3.min.js"></script>

 <script>

 var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 // Parse the date / time
 var	parseDate = d3.time.format("%Y-%m").parse;
 var formatTime = d3.time.format("%Y-%m");

 var x = d3.time.scale().range([0, width])
 var y = d3.scale.linear().range([height, 0]);

 var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y-%m"))
    .ticks(20);

 var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

 var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);



 d3.csv("date_frequency.csv", function(error, data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date_x);
        d.value = +d.freq;
        d.from = d.from
        d.to = d.to
        d.subject = d.subject
        d.id = d.id
    });

    console.log(d3.extent(data, function(d){ return d.date}))
 	

  x.domain(d3.extent(data, function(d){ return d.date}))
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("# of emails sent");

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", 10)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .on("mouseover", function(d,i) {
        d3.select(this).style("fill","red");

        div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html('<strong>Date: </strong>'+formatTime(d.date) + " / <strong># of emails sent: </strong>"  + d.freq + "<br/>" 
                        + "<strong>[longest email conversation - </strong>" + d.id + "]<br/>"
                        + "<strong>from: </strong>" + d.from + "<br/><strong>to: </strong>" + d.to + "<br/>" 
                        + "<strong>subject: </strong>" + d.subject)  
                .style("left", "70px")     
                .style("top", "65px");    
            }) 
      .on("mouseout", function(d,i) {
        d3.select(this).style("fill","steelblue");

      })

 });

 </script>

 </body>
date_x	freq	date_date	date_y	from	id	subject	to	date_time	convo_length
2010-08	9	2010-08	2010-08-25 08:29:58	[email protected]	440959	R: RE: Nanatech	['[email protected]', '[email protected]', '[email protected]', '[email protected]']	2010-08-25 08:29:58	2
2010-09	26	2010-09	2010-09-08 08:15:11	[email protected]	440767	R: Nanatech	['[email protected]']	2010-09-08 08:15:11	1
2010-10	3	2010-10	2010-10-26 06:59:46	[email protected]	440886	R: Nanatech	['[email protected]', '[email protected]']	2010-10-26 06:59:46	1
2010-11	21	2010-11	2010-11-05 03:17:50	[email protected]	440940	Re: R: Nanatech	['[email protected]']	2010-11-05 03:17:50	2
2010-12	7	2010-12	2010-12-02 01:26:03	[email protected]	441020	Re: R: Meeting in Seoul	['[email protected]', '[email protected]', '[email protected]']	2010-12-02 01:26:03	2
2011-01	2	2011-01	2011-01-19 10:48:39	[email protected]	441112	R: BULK Nanatech	['[email protected]']	2011-01-19 10:48:39	1
2011-02	7	2011-02	2011-02-25 10:23:35	[email protected]	441159	R: Nanatech	['[email protected]']	2011-02-25 10:23:35	1
2011-03	5	2011-03	2011-03-02 23:10:50	[email protected]	441372	Re: R: BULK Re: Fwd: R: Nanatech	['[email protected]', '[email protected]', '[email protected]']	2011-03-02 23:10:50	5
2011-05	5	2011-05	2011-05-21 01:00:25	[email protected]	441390	Re: R: Nanatech	['[email protected]', '[email protected]']	2011-05-21 01:00:25	2
2011-06	6	2011-06	2011-06-30 00:54:43	[email protected]	440946	Re: R: R: Hello, it' from Nanatech	['[email protected]']	2011-06-30 00:54:43	3
2011-07	7	2011-07	2011-07-15 02:02:27	[email protected]	440860	Re: R: R: R: R: Hello, it' from Nanatech	['[email protected]']	2011-07-15 02:02:27	5
2011-08	14	2011-08	2011-08-13 05:57:46	[email protected]	440897	R: Re: R: R: it's from Nanatech	['[email protected]']	2011-08-13 05:57:46	4
2011-09	7	2011-09	2011-09-20 04:42:39	[email protected]	440970	Re: R: Reply about visit	['[email protected]']	2011-09-20 04:42:39	2
2011-10	29	2011-10	2011-10-24 09:15:33	[email protected]	441077	R: R: R: Hello, it's from Nanatech.	['[email protected]', '[email protected]', '[email protected]']	2011-10-24 09:15:33	3
2011-11	20	2011-11	2011-11-07 17:45:03	[email protected]	440636	R: BULK Re: R: BULK Hello, It's NANATECH	['[email protected]', '[email protected]']	2011-11-07 17:45:03	3
2011-12	125	2011-12	2011-12-21 09:13:50	[email protected]	441035	R: R: R: R: R: BULK Re: Re: BULK Re: Re: contract	['[email protected]']	2011-12-21 09:13:50	9
2012-01	102	2012-01	2012-01-18 10:22:52	[email protected]	588949	R: Re: R: Re: R: Re: R: Re: R: Certificato Symbian per SKA	['[email protected]', '[email protected]', '[email protected]', '[email protected]']	2012-01-18 10:22:52	9
2012-02	37	2012-02	2012-02-15 13:24:37	[email protected]	440870	Re: Fwd: Re: R: 2nd payment	['[email protected]', '[email protected]', '[email protected]']	2012-02-15 13:24:37	4
2012-03	23	2012-03	2012-03-20 10:35:17	[email protected]	441407	Re: R: R: R: quote maintenance	['[email protected]']	2012-03-20 10:35:17	4
2012-04	32	2012-04	2012-04-17 10:14:22	[email protected]	960672	Re: Re: Very Urgent	['[email protected]']	2012-04-17 10:14:22	2
2012-05	99	2012-05	2012-05-24 07:59:02	[email protected]	440954	Re: R: Re: Information	['[email protected]']	2012-05-24 07:59:02	3
2012-06	23	2012-06	2012-06-29 06:06:46	[email protected]	761917	Re: R: Seoul 9-11 July	['[email protected]']	2012-06-29 06:06:46	2
2012-07	76	2012-07	2012-07-24 13:08:27	[email protected]	441311	R: Re: R: New	['[email protected]', '[email protected]']	2012-07-24 13:08:27	3
2012-08	53	2012-08	2012-08-27 09:38:54	[email protected]	440944	Re: I: Re: Re: Contract (Urgent)	['[email protected]', '[email protected]']	2012-08-27 09:38:54	3
2012-09	31	2012-09	2012-09-14 13:45:02	[email protected]	829116	RE: Re: R: Re: Additional Order	['[email protected]']	2012-09-14 13:45:02	4
2012-11	1	2012-11	2012-11-27 09:44:03	[email protected]	440953	Richiesta di SKA - Dispositivi Android che supportano la registrazione della chiamata	['[email protected]', '[email protected]', '[email protected]']	2012-11-27 09:44:03	0
2012-12	14	2012-12	2012-12-11 08:28:39	[email protected]	440734	Re: I: R: R: New Order (URGENT)	['[email protected]', '[email protected]']	2012-12-11 08:28:39	3
2013-01	58	2013-01	2013-01-16 02:52:12	[email protected]	727025	Re: Fw: RE: RE: Maintenance Contract(URGENT)	['daniel']	2013-01-16 02:52:12	4
2013-02	74	2013-02	2013-02-13 07:53:03	[email protected]	441401	RE: RE: RE: RE: Re: Re: Connector	['[email protected]', '[email protected]']	2013-02-13 07:53:03	6
2013-03	37	2013-03	2013-03-20 06:11:46	[email protected]	606424	RE: RE: RE: RE: Training	['[email protected]', '[email protected]']	2013-03-20 06:11:46	4
2013-04	21	2013-04	2013-04-12 11:09:13	[email protected]	449488	Commissions to our agent/broker was Re: Ordine x commissioni Nanatech	['[email protected]', '[email protected]', '[email protected]', '[email protected]', '[email protected]']	2013-04-12 11:09:13	1
2013-05	8	2013-05	2013-05-16 01:24:18	[email protected]	440791	RE: RE: Re: Training (Urgent)	['[email protected]', '[email protected]']	2013-05-16 01:24:18	3
2013-07	1	2013-07	2013-07-19 03:20:59	[email protected]	729366	Re: Help	['nanatech', 'daniel']	2013-07-19 03:20:59	1
2013-08	14	2013-08	2013-08-07 03:00:56	[email protected]	346024	Re: 2nd Payment	['[email protected]', '[email protected]', '[email protected]', '[email protected]', '[email protected]', '[email protected]', '[email protected]']	2013-08-07 03:00:56	1
2013-09	67	2013-09	2013-09-17 09:45:08	[email protected]	18783	Re: RE: RE: RE: Further items	['[email protected]', '[email protected]']	2013-09-17 09:45:08	4
2013-10	32	2013-10	2013-10-10 04:25:07	[email protected]	18895	Re: RE: Further items	['[email protected]', '[email protected]']	2013-10-10 04:25:07	2
2013-11	17	2013-11	2013-11-01 10:25:33	[email protected]	392626	Re: R: Fwd: FW: RE: Re: Invoice	['[email protected]']	2013-11-01 10:25:33	5
2013-12	41	2013-12	2013-12-17 01:41:12	[email protected]	441339	RE: RE: RE: RE: RE: RE: RE: RE: RE: Re: Offer	['[email protected]', '[email protected]']	2013-12-17 01:41:12	10
2014-01	53	2014-01	2014-01-29 13:59:17	[email protected]	440825	RE: Re: RE: RE: RE: RE: RE: RE: Maintenance	['[email protected]', '[email protected]']	2014-01-29 13:59:17	8
2014-02	57	2014-02	2014-02-08 05:37:05	[email protected]	18934	RE: RE: Re: RE: RE: RE: RE: RE: RE: Maintenance	['[email protected]', '[email protected]']	2014-02-08 05:37:05	9
2014-03	108	2014-03	2014-03-14 07:38:38	[email protected]	691508	FW: RE: RE: RE: Top Urgent	['[email protected]']	2014-03-14 07:38:38	3
2014-04	13	2014-04	2014-04-21 04:00:12	[email protected]	692654	RE: Re: RE: RE: Tactical\xa0Network\xa0Injector	['[email protected]', '[email protected]']	2014-04-21 04:00:12	4
2014-05	6	2014-05	2014-05-02 08:24:26	[email protected]	710963	Re: Samsung Knox and local root	['[email protected]', '[email protected]']	2014-05-02 08:24:26	1
2014-06	15	2014-06	2014-06-25 10:52:13	[email protected]	470961	R: Re: sample su VT	['[email protected]', '[email protected]', '[email protected]', '[email protected]', '[email protected]']	2014-06-25 10:52:13	2
2014-07	21	2014-07	2014-07-29 07:28:23	[email protected]	959731	Fwd: Re: Fwd: TNI	['marco', 'daniel']	2014-07-29 07:28:23	3
2014-08	13	2014-08	2014-08-25 00:14:04	[email protected]	203540	Fw: Invoice	['[email protected]', '[email protected]']	2014-08-25 00:14:04	1
2014-09	16	2014-09	2014-09-26 14:07:48	[email protected]	1001854	Re: SKA opportunity	['daniel', 'serge', 'marco']	2014-09-26 14:07:48	1
2014-10	4	2014-10	2014-10-30 13:56:56	[email protected]	46211	Fwd: Re: Next meeting alternative dates	['anita', 'david']	2014-10-30 13:56:56	2
2014-11	52	2014-11	2014-11-28 08:27:20	[email protected]	145064	RE: RE:\xa0\xa0RE:\xa0RE:\xa0Re:\xa0Re:\xa0Answer	['[email protected]', '[email protected]']	2014-11-28 08:27:20	6
2014-12	146	2014-12	2014-12-02 19:19:12	[email protected]	987044	R: Re: R: Re: R: LVM	['[email protected]']	2014-12-02 19:19:12	5
2015-01	81	2015-01	2015-01-26 06:19:50	[email protected]	18854	RE: RE: RE: RE: RE: RE: Maintenance	['[email protected]', '[email protected]']	2015-01-26 06:19:50	6
2015-02	44	2015-02	2015-02-26 07:54:02	[email protected]	18931	RE: RE: RE: RE: Question	['[email protected]', '[email protected]', '[email protected]']	2015-02-26 07:54:02	4
2015-03	59	2015-03	2015-03-02 10:44:11	[email protected]	26529	R: RE: FW: RE: RE: RE: RE: RE: RE: Question	['[email protected]', '[email protected]']	2015-03-02 10:44:11	8
2015-04	19	2015-04	2015-04-06 18:16:05	[email protected]	22576	R: Re: R: Fwd: !SIX-648-45157: Support portal available time	['[email protected]', '[email protected]', '[email protected]']	2015-04-06 18:16:05	4
2015-05	10	2015-05	2015-05-07 14:07:57	[email protected]	642183	Re: SKA: Servers change for Proxy System	['[email protected]', '[email protected]', '[email protected]']	2015-05-07 14:07:57	1
2015-06	145	2015-06	2015-06-09 11:05:28	[email protected]	1052404	RE: RE: Re: RE: Maintenance	['[email protected]']	2015-06-09 11:05:28	4
2015-07	94	2015-07	2015-07-01 04:43:42	[email protected]	1135900	RE: RE: RE: Re: RE: Maintenance	['[email protected]']	2015-07-01 04:43:42	5
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head><h1>The Hacking Team: # of emails regarding 'SKA' - 2,197 emails</h1></head>

	<style>
	body {
	font: 10px sans-serif;
	}

	.axis {
	font: 11px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	div.tooltip {
	position: absolute;
	text-align: left;
	width: 400px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	</style>

	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var margin = {top: 20, right: 20, bottom: 70, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// Parse the date / time
	var parseDate = d3.time.format("%Y-%m").parse;
	var formatTime = d3.time.format("%Y-%m");

	var x = d3.time.scale().range([0, width])
	var y = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickFormat(d3.time.format("%Y-%m"))
	.ticks(20);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);



	d3.csv("date_frequency.csv", function(error, data) {

	data.forEach(function(d) {
	d.date = parseDate(d.date_x);
	d.value = +d.freq;
	d.from = d.from
	d.to = d.to
	d.subject = d.subject
	d.id = d.id
	});

	console.log(d3.extent(data, function(d){ return d.date}))


	x.domain(d3.extent(data, function(d){ return d.date}))
	y.domain([0, d3.max(data, function(d) { return d.value; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.attr("dx", "-.8em")
	.attr("dy", "-.55em")
	.attr("transform", "rotate(-90)" );

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("# of emails sent");

	svg.selectAll("bar")
	.data(data)
	.enter().append("rect")
	.style("fill", "steelblue")
	.attr("x", function(d) { return x(d.date); })
	.attr("width", 10)
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); })
	.on("mouseover", function(d,i) {
	d3.select(this).style("fill","red");

	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html('<strong>Date: </strong>'+formatTime(d.date) + " / <strong># of emails sent: </strong>" + d.freq + "<br/>"
	+ "<strong>[longest email conversation - </strong>" + d.id + "]<br/>"
	+ "<strong>from: </strong>" + d.from + "<br/><strong>to: </strong>" + d.to + "<br/>"
	+ "<strong>subject: </strong>" + d.subject)
	.style("left", "70px")
	.style("top", "65px");
	})
	.on("mouseout", function(d,i) {
	d3.select(this).style("fill","steelblue");

	})

	});

	</script>

	</body>