officeofjane · September 20, 2017 10:56
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://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family:"avenir next", Arial, sans-serif;
      font-size: 12px;
      color: #696969;
      margin: 0;
    }

    .axis path, .axis line {
      stroke: darkgrey;
    }
  
    .hist.label {
      font-size: 10px;
    }
  </style>
 </head>

 <body>
 <div id="vis"></div>

 <script>
 var margin = {top:70, right:50, bottom:40, left:30},
    width = 300 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

 var parseDate = d3.timeParse("%d/%m/%Y");
 var formatDateIntoYear = d3.timeFormat("%Y");

 // x scale for time
 var x = d3.scaleTime()
    .range([0, width])
    .clamp(true);

 // y scale for histogram
 var y = d3.scaleLinear()
    .range([height, 0]);


 // load data
 d3.csv("data.csv", prepare, function(data) {

  x.domain(d3.extent(data, function(d) { return d.date; }));

  // set parameters for histogram
  var histogram = d3.histogram()
      .value(function(d) { return d.date; })
      .domain(x.domain())
      .thresholds(x.ticks(d3.timeYear));

  // nest data by region
  var nest = d3.nest()
      .key(function(d) { return d.region; })
      .entries(data);

  // apply histogram generator to each region's values
  var regions = nest.map(function(d) { 
    return {
      key: d.key,
      values: histogram(d.values)  
    }
  });

  // calculate local y-max for each region
  var localMax = regions.map(function(d) {
    return {
      region: d.key,
      max: d3.max(d.values, function(s) {
        return s.length;
      })
    }
  })
  
  // find global max
  y.domain([0, d3.max(localMax, function(d) { return d.max; })])

  
  // for each region, set up a svg with axis and label
  var svg = d3.select("#vis").selectAll("svg")
      .data(regions)
      .enter()
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

  svg.append("text")
      .attr("class", "region label")
      .attr("x", margin.left)
      .attr("y", margin.top/2)
      .attr("font-size", "1.2em")
      .text(function(d) { return d.key; })

  var hist = svg.append("g")
      .attr("class", "hist")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  hist.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0" + "," + height + ")")
      .call(d3.axisBottom(x)
        .tickValues(x.domain())
        .tickFormat(formatDateIntoYear)
      );

  // draw histogram bars
  var bars = hist.selectAll(".bar")
      .data(function(d) { return d.values; })
      .enter()
      .append("g")
      .attr("class", "bar")
      .attr("transform", function(s) {
        return "translate(" + x(s.x0) + "," + y(s.length) + ")";
      });

  bars.append("rect")
      .attr("class", "bar")
      .attr("x", 1)
      .attr("width", function(s) { return x(s.x1) - x(s.x0); })
      .attr("height", function(s) { return height - y(s.length); })
      .attr("fill", "#c9c9c9");

  bars.append("text")
      .attr("class", "hist label")
      .attr("dy", ".75em")
      .attr("y", -12)
      .attr("x", function(s) { return (x(s.x1) - x(s.x0))/2; })
      .attr("text-anchor", "middle")
      .text(function(s) { 
        if (s.length > 0) {
          return s.length;   
        }
      })
      .style("fill", "charcoal");
 });

 function prepare(d) {
  d.date = parseDate(d.date);
  return d;
 }


 </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
id	region	date
1	Asia	15/4/2014
2	Asia	1/3/2008
3	Asia	25/2/2009
4	Asia	9/4/2007
5	Asia	29/11/2013
6	Asia	NA
7	Asia	NA
8	Asia	1/10/2006
9	Asia	28/2/2009
10	Asia	10/11/2009
11	Asia	1/10/2015
12	Asia	1/2/2009
13	Asia	4/4/2009
14	Asia	28/8/2009
15	Asia	24/11/2004
16	Asia	30/4/2007
17	Asia	NA
18	Asia	26/4/2007
19	Asia	20/11/2006
20	Asia	3/4/2007
21	Asia	19/12/2006
22	Asia	28/9/2006
23	Asia	24/4/2007
24	Asia	1/9/2007
25	Asia	14/11/2007
26	Asia	20/9/2012
27	Asia	28/9/2007
28	Asia	1/3/2008
29	Asia	31/10/2009
30	Asia	6/4/2011
31	Asia	24/9/2014
32	Asia	NA
33	Asia	NA
34	Asia	24/3/2017
35	Asia	5/12/2007
36	Asia	24/3/2011
37	Asia	1/11/2011
38	Asia	23/2/2009
39	Asia	15/6/2008
40	Asia	6/11/2007
41	Asia	24/1/2013
42	Asia	26/12/2016
43	Asia	1/2/2007
44	Asia	1/3/2010
45	Asia	NA
46	Asia	16/6/2007
47	Asia	NA
48	Asia	10/9/2015
49	Asia	14/2/2006
50	Asia	NA
51	Asia	13/6/2007
52	Asia	1/10/2005
53	Asia	1/4/2006
54	Asia	5/4/2006
55	Asia	9/6/2006
56	Asia	13/4/2007
57	Asia	25/10/2006
58	Asia	9/11/2012
59	Asia	12/11/2007
60	Asia	25/11/2007
61	Asia	26/11/2007
62	Asia	1/4/2008
63	Asia	1/10/2008
64	Asia	1/4/2010
65	Asia	NA
66	Asia	1/10/2011
67	Asia	NA
68	Asia	26/3/2007
69	Asia	1/10/2006
70	Asia	3/8/2006
71	Asia	7/11/2006
72	Asia	18/12/2006
73	Asia	29/12/2006
74	Asia	20/12/2006
75	Asia	19/12/2006
76	Asia	27/12/2006
77	Asia	24/12/2006
78	Asia	28/12/2006
79	Asia	15/9/2009
80	Asia	NA
81	Asia	NA
82	Asia	22/10/2016
83	Asia	7/5/2005
84	Asia	NA
85	Asia	26/2/2009
86	Asia	20/8/2015
87	Asia	1/8/2006
88	Asia	1/1/2009
89	Asia	18/7/2012
90	Asia	9/4/2009
91	Asia	9/11/2011
92	Asia	14/3/2010
93	Asia	18/1/2011
94	Asia	19/5/2011
95	Asia	26/11/2011
96	Asia	22/2/2011
97	Asia	1/11/2007
98	Asia	NA
99	Asia	1/4/2009
100	Asia	16/9/2012
101	Asia	12/5/2006
102	Asia	1/12/2009
103	Asia	23/3/2010
104	Asia	1/1/2011
105	Asia	24/6/2016
106	Asia	26/11/2010
107	Asia	14/4/2010
108	Asia	28/11/2008
109	Asia	1/5/2013
110	Asia	NA
111	Asia	24/8/2010
112	Asia	23/3/2011
113	Asia	NA
114	Africa	NA
115	Africa	28/4/2013
116	Africa	9/10/2013
117	Africa	3/12/2012
118	Africa	1/9/2012
119	Africa	23/8/2013
120	Africa	16/4/2012
121	Africa	NA
122	Africa	1/5/2013
123	Africa	1/9/2016
124	Africa	1/3/2013
125	Africa	5/6/2013
126	Africa	18/3/2008
127	Africa	1/4/2008
128	Africa	30/5/2009
129	Africa	5/3/2007
130	Africa	9/11/2007
131	Africa	19/12/2005
132	Africa	5/6/2009
133	Africa	21/10/2012
134	Africa	1/3/2015
135	Africa	18/12/2008
136	Africa	1/4/2009
137	Africa	13/11/2008
138	Africa	19/9/2014
139	Africa	1/1/2009
140	Africa	1/7/2010
141	Africa	20/8/2008
142	Africa	20/2/2014
143	Africa	4/7/2014
144	Africa	1/5/2009
145	Africa	1/3/2008
146	Africa	17/12/2009
147	Africa	19/10/2009
148	Africa	10/10/2012
149	Africa	30/10/2009
150	Africa	21/10/2009
151	Africa	12/5/2010
152	Africa	26/11/2013
153	Africa	1/9/2010
154	Africa	6/9/2012
155	Africa	6/2/2015
156	Africa	19/12/2014
157	Africa	NA
158	Africa	NA
159	Africa	NA
160	America	1/3/2005
161	America	15/2/2006
162	America	16/4/2012
163	America	1/9/2005
164	America	17/3/2006
165	America	28/6/2006
166	America	11/11/2006
167	America	15/3/2006
168	America	1/5/2006
169	America	19/5/2009
170	America	23/8/2006
171	America	1/10/2010
172	America	28/1/2011
173	America	23/4/2007
174	America	14/9/2007
175	America	1/10/2010
176	America	21/9/2012
177	America	11/10/2012
178	America	16/5/2007
179	America	30/1/2007
180	America	25/2/2007
181	America	13/3/2007
182	America	30/10/2007
183	America	5/5/2007
184	America	22/10/2007
185	America	2/11/2009
186	America	13/8/2007
187	America	27/6/2007
188	America	1/5/2008
189	America	18/9/2008
190	America	23/7/2007
191	America	4/8/2007
192	America	2/8/2007
193	America	17/9/2007
194	America	28/4/2008
195	America	11/10/2007
196	America	19/10/2010
197	America	1/11/2007
198	America	20/10/2012
199	America	NA
200	America	NA
201	America	NA
202	America	20/3/2012
203	America	2/11/2012
204	America	19/4/2013
205	America	20/5/2013
206	America	12/4/2013
207	America	5/11/2007
208	America	11/11/2007
209	America	6/3/2008
210	America	19/9/2008
211	America	9/3/2008
212	America	3/11/2008
213	America	1/9/2009
214	America	3/7/2008
215	America	28/8/2008
216	America	17/8/2009
217	America	6/11/2009
218	America	30/10/2008
219	America	10/8/2009
220	America	20/1/2009
221	America	19/5/2010
222	America	16/4/2009
223	America	6/11/2009
224	America	5/11/2009
225	America	23/11/2009
226	America	26/4/2010
227	America	10/4/2013
228	America	7/2/2013
229	America	NA
230	America	19/5/2010
231	America	3/7/2013
232	America	23/9/2013
233	America	7/4/2011
234	America	30/8/2013
235	America	NA
236	America	29/4/2010
237	America	21/4/2010
238	America	17/4/2013
239	America	11/4/2013
240	America	27/10/2010
241	America	10/5/2006
242	America	10/12/2010
243	America	18/4/2013
244	America	9/4/2010
245	America	10/2/2010
246	America	6/11/2009
247	America	27/9/2013
248	America	19/5/2010
249	America	6/11/2010
250	America	19/10/2010
251	America	NA
252	America	1/9/2010
253	America	8/9/2009
254	America	10/4/2015
255	America	6/6/2014
256	America	12/6/2014
257	America	3/7/2014
258	America	5/8/2014
259	America	24/10/2014
260	America	31/10/2014
261	America	5/11/2014
262	America	18/5/2015
263	America	1/6/2015
264	America	NA
265	America	NA
266	America	NA
267	America	NA
268	America	NA
269	America	4/11/2011
270	America	7/2/2006
271	America	29/4/2008
272	America	29/4/2008
273	America	8/10/2007
274	America	29/4/2008
275	America	4/5/2008
276	America	5/5/2010
277	America	19/4/2012
278	America	29/4/2008
279	America	24/11/2011
280	America	18/6/2012
281	America	22/11/2006
282	America	11/3/2007
283	America	25/9/2007
284	America	12/11/2008
285	America	5/3/2008
286	America	19/11/2008
287	America	17/8/2009
288	America	20/3/2009
289	America	11/11/2010
290	America	30/4/2010
291	America	2/11/2007
292	America	7/5/2013
293	America	30/11/2009
294	America	28/4/2008
295	America	5/5/2009
296	America	26/11/2008
297	America	19/7/2012
298	America	29/11/2013
299	America	NA
300	America	25/4/2012
301	America	29/3/2010
302	America	1/9/2011
303	America	NA
304	America	17/7/2014
305	America	17/7/2014
306	America	27/5/2009
307	America	1/9/2010
308	America	7/8/2009
309	America	13/2/2009
310	America	27/12/2010
311	America	17/10/2012
312	America	3/9/2011
313	America	24/3/2013
314	America	20/10/2013
315	America	7/7/2014
316	America	2/9/2015
317	America	16/2/2017
318	Europe	10/12/2010
319	Europe	13/5/2013
320	Europe	3/4/2013
321	Europe	26/4/2011
322	Europe	27/7/2011
323	Europe	22/5/2013
324	Europe	24/10/2007
325	Europe	15/2/2006
326	Europe	26/5/2006
327	Europe	8/6/2010
328	Europe	5/7/2006
329	Europe	19/9/2011
330	Europe	6/12/2013
331	Europe	1/12/2005
332	Europe	28/3/2012
333	Europe	10/3/2005
334	Europe	2/6/2005
335	Europe	20/2/2012
336	Europe	24/4/2006
337	Europe	29/6/2015
338	Europe	NA
339	Europe	19/10/2007
340	Europe	1/12/2006
341	Europe	8/10/2008
342	Europe	14/6/2008
343	Europe	1/9/2008
344	Europe	21/9/2015
345	Europe	20/11/2007
346	Europe	16/6/2012
347	Europe	3/7/2009
348	Europe	1/7/2005
349	Europe	2/6/2006
350	Europe	31/8/2005
351	Europe	25/4/2008
352	Europe	16/6/2006
353	Europe	7/6/2006
354	Europe	14/9/2006
355	Europe	14/6/2006
356	Europe	17/2/2009
357	Europe	23/10/2013
358	Europe	18/5/2007
359	Europe	7/11/2011
360	Europe	1/9/2008
361	Europe	1/7/2008
362	Europe	11/6/2014
363	Europe	22/9/2013
364	Europe	11/11/2015
365	Europe	6/10/2016
366	Europe	21/12/2006
367	Europe	26/12/2006
368	Europe	6/9/2007
369	Europe	10/11/2006
370	Europe	12/12/2006
371	Europe	8/4/2007
372	Europe	24/4/2007
373	Europe	15/5/2007
374	Europe	22/11/2007
375	Europe	1/5/2008
376	Europe	6/7/2007
377	Europe	28/12/2007
378	Europe	23/3/2010
379	Europe	23/3/2010
380	Europe	5/5/2010
381	Europe	22/6/2010
382	Europe	23/10/2010
383	Europe	31/7/2005
384	Europe	16/3/2007
385	Europe	29/12/2005
386	Europe	8/6/2006
387	Europe	12/5/2006
388	Europe	23/1/2007
389	Europe	11/12/2007
390	Europe	6/2/2008
391	Europe	NA
392	Europe	28/2/2008
393	Europe	13/4/2009
394	Europe	16/5/2011
395	Europe	15/1/2013
396	Europe	26/4/2013
397	Europe	5/5/2010
398	Europe	17/10/2013
399	Europe	13/12/2016
400	Europe	1/9/2007
401	Europe	10/12/2010
402	Europe	7/7/2006
403	Europe	6/10/2006
404	Europe	21/8/2006
405	Europe	3/10/2009
406	Europe	29/3/2011
407	Europe	19/3/2013
408	Europe	1/1/2008
409	Europe	31/1/2007
410	Europe	9/12/2005
411	Europe	21/9/2014
412	Europe	NA
413	Europe	4/5/2012
414	Europe	30/5/2006
415	Europe	NA
416	Europe	25/2/2007
417	Europe	2/9/2014
418	Europe	20/10/2006
419	Europe	28/9/2011
420	Europe	1/10/2010
421	Europe	6/5/2008
422	Europe	6/9/2013
423	Europe	14/11/2005
424	Europe	20/5/2011
425	Europe	5/7/2006
426	Europe	25/5/2007
427	Europe	8/11/2010
428	Europe	3/6/2008
429	Europe	23/6/2008
430	Europe	21/6/2006
431	Europe	14/5/2012
432	Europe	25/4/2013
433	Europe	27/8/2014
434	Europe	4/7/2005
435	Europe	19/7/2007
436	Europe	11/12/2007
437	Europe	11/3/2008
438	Europe	18/7/2008
439	Europe	7/6/2013
440	Europe	22/9/2008
441	Europe	8/10/2008
442	Europe	23/7/2009
443	Europe	20/7/2009
444	Europe	11/3/2011
445	Europe	5/12/2008
446	Europe	15/12/2005
447	Europe	14/6/2005
448	Europe	18/10/2006
449	Europe	31/10/2012
450	Europe	15/11/2012
451	Europe	4/2/2014
452	Europe	10/8/2012
453	Europe	28/12/2011
454	Europe	6/4/2006
455	Europe	23/3/2011
456	Europe	24/5/2007
457	Europe	15/7/2005
458	Europe	12/9/2007
459	Europe	12/4/2006
460	Europe	2/4/2007
461	Europe	28/4/2008
462	Europe	12/3/2007
463	Europe	7/4/2011
464	Europe	25/5/2011
465	Europe	14/7/2011
466	Europe	22/10/2010
467	Europe	5/11/2013
468	Europe	17/2/2012
469	Europe	17/4/2012
470	Europe	NA
471	Europe	22/5/2015
472	Europe	NA
473	Europe	19/9/2015
474	Europe	22/2/2009
475	Europe	10/4/2009
476	Europe	27/8/2009
477	Europe	16/2/2010
478	Europe	8/2/2010
479	Europe	2/9/2014
480	Europe	14/11/2013
481	Europe	28/10/2014
482	Europe	7/12/2014
483	Oceania	26/6/2006
484	Oceania	25/6/2007
485	Oceania	14/3/2007
486	Oceania	19/11/2010
487	Oceania	15/6/2009
488	Oceania	17/6/2008
489	Oceania	30/7/2009
490	Oceania	20/6/2010
491	Oceania	11/5/2011
492	Oceania	31/7/2012
493	Oceania	28/11/2011
494	Oceania	26/11/2015
495	Oceania	9/4/2011
496	Oceania	16/11/2011
497	Oceania	22/3/2005
498	Oceania	27/5/2010
499	Oceania	19/6/2010
500	Oceania	6/9/2012
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	font-family:"avenir next", Arial, sans-serif;
	font-size: 12px;
	color: #696969;
	margin: 0;
	}

	.axis path, .axis line {
	stroke: darkgrey;
	}

	.hist.label {
	font-size: 10px;
	}
	</style>
	</head>

	<body>
	<div id="vis"></div>

	<script>
	var margin = {top:70, right:50, bottom:40, left:30},
	width = 300 - margin.left - margin.right,
	height = 250 - margin.top - margin.bottom;

	var parseDate = d3.timeParse("%d/%m/%Y");
	var formatDateIntoYear = d3.timeFormat("%Y");

	// x scale for time
	var x = d3.scaleTime()
	.range([0, width])
	.clamp(true);

	// y scale for histogram
	var y = d3.scaleLinear()
	.range([height, 0]);


	// load data
	d3.csv("data.csv", prepare, function(data) {

	x.domain(d3.extent(data, function(d) { return d.date; }));

	// set parameters for histogram
	var histogram = d3.histogram()
	.value(function(d) { return d.date; })
	.domain(x.domain())
	.thresholds(x.ticks(d3.timeYear));

	// nest data by region
	var nest = d3.nest()
	.key(function(d) { return d.region; })
	.entries(data);

	// apply histogram generator to each region's values
	var regions = nest.map(function(d) {
	return {
	key: d.key,
	values: histogram(d.values)
	}
	});

	// calculate local y-max for each region
	var localMax = regions.map(function(d) {
	return {
	region: d.key,
	max: d3.max(d.values, function(s) {
	return s.length;
	})
	}
	})

	// find global max
	y.domain([0, d3.max(localMax, function(d) { return d.max; })])


	// for each region, set up a svg with axis and label
	var svg = d3.select("#vis").selectAll("svg")
	.data(regions)
	.enter()
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	svg.append("text")
	.attr("class", "region label")
	.attr("x", margin.left)
	.attr("y", margin.top/2)
	.attr("font-size", "1.2em")
	.text(function(d) { return d.key; })

	var hist = svg.append("g")
	.attr("class", "hist")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	hist.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0" + "," + height + ")")
	.call(d3.axisBottom(x)
	.tickValues(x.domain())
	.tickFormat(formatDateIntoYear)
	);

	// draw histogram bars
	var bars = hist.selectAll(".bar")
	.data(function(d) { return d.values; })
	.enter()
	.append("g")
	.attr("class", "bar")
	.attr("transform", function(s) {
	return "translate(" + x(s.x0) + "," + y(s.length) + ")";
	});

	bars.append("rect")
	.attr("class", "bar")
	.attr("x", 1)
	.attr("width", function(s) { return x(s.x1) - x(s.x0); })
	.attr("height", function(s) { return height - y(s.length); })
	.attr("fill", "#c9c9c9");

	bars.append("text")
	.attr("class", "hist label")
	.attr("dy", ".75em")
	.attr("y", -12)
	.attr("x", function(s) { return (x(s.x1) - x(s.x0))/2; })
	.attr("text-anchor", "middle")
	.text(function(s) {
	if (s.length > 0) {
	return s.length;
	}
	})
	.style("fill", "charcoal");
	});

	function prepare(d) {
	d.date = parseDate(d.date);
	return d;
	}


	</script>
	</body>