claudialexa · March 21, 2016 20:22
diff --git a/global-terrorism-incidents.csv b/global-terrorism-incidents.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- mod of Mike Bostock's block http://bl.ocks.org/mbostock/3020685 -->
 <meta charset="utf-8">
 <style>

 body {
  font: 12px sans-serif;
  padding: 50px;
 }

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

 button {
  background: #ccc;
  margin: 5px;

 }
 .selected {
  background: orange;
 }

 .layer {
  fill: white;
 }

 </style>
 <body>

  <h1>Countries with the Most Terrorist Attacks, 2000-2014</h1>

  <p>Terrorist attacks have increased by 8000% since the 1970s due to an increase in the scale of the attacks and ideology behind the movements. From 1970 until 1995, suicide attacks were non-existent. Modern terrorist groups are more likely to use Medieval practices outlined in religious texts than their predecessors, making for violence that had rarely been seen in the past twenty years. Modern terrorists are also no longer restricted to national borders as they were in Latin America in the 80s and 90s. Islamic Extremists' cells expand well beyond their headquarters, expanding terror along the entire Middle East.</p>

  <button id="stream">Stream</button> <button id="stacked" class="selected">Stack</button>

  <div id="chart"></div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <script>

 var originaldata;

 var formatDate = d3.time.format("Year %Y");

 var fullheight = 620, fullwidth = 960;
 var margin = {top: 20, right: 170, bottom: 50, left: 40},    width = fullwidth - margin.left - margin.right,
    height = fullheight - margin.top - margin.bottom;

 var xScale = d3.time.scale()
    .range([0, width]);

 var yScale = d3.scale.linear()
    .range([height, 0]);

 var color = d3.scale.category20();

 var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(10);

 var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

 var stack = d3.layout.stack()
    .offset("zero") // try "silhouette" next, that's a streamgraph!
    //.order("inside-out")  // try this and see what you think
    .values(function(d) { return d.values; })
    .x(function(d) { return formatDate.parse(d.Year);})
    .y(function(d) { return +d.Incidents_total; });

  // exactly the same except for offset:

 var stream = d3.layout.stack()
    .offset("silhouette") // try "silhouette" next, that's a streamgraph!
    //.order("inside-out")  // try this and see what you think
    .values(function(d) { return d.values; })
    .x(function(d) { return formatDate.parse(d.Year);})
    .y(function(d) { return +d.Incidents_total; });

 // what's another way we can DRY this out? how about just updating the "offset" when we do the redraw below...

 var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return xScale(formatDate.parse(d.Year)); })
    .y0(function(d) { return yScale(d.y0); })
    .y1(function(d) { return yScale(d.y0 + d.y); });


 var svg = d3.select("#chart").append("svg")
    .attr("width", fullwidth)
    .attr("height", fullheight)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 d3.csv("global-terrorism-incidents.csv", setup);

 function setup(error, data) {

  if (error) { console.log(error) };

  originaldata = data; // assign to a global so i can use it in other function

  var dataset =  d3.nest()
    .key(function(d) {
      return d.Country;
    })
    // .sortKeys(d3.descending)  // alphabetic order from top layer
    .sortValues(function (a, b) { return formatDate.parse(a.Year) - formatDate.parse(b.Year)})
    .entries(data);

  console.log(dataset);

  // set up the UI function:

  d3.selectAll("button").on("click", function() {
    var method = d3.select(this).attr("id"); // this is stream or stacked
    d3.selectAll("button").classed("selected", false);
    d3.select(this).classed("selected", true);
    redraw(dataset, method);
  });

  // default first view: create the axes, so you transition them in the redraw.

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  redraw(dataset, "stacked");  // method is either stacked or stream

  var countryNames = d3.map(data,function(d) {
  return d.Country;
 }).keys();

  // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });

  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width+ 60)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d) {return color(d)});

  // draw legend text
  legend.append("text")
      .attr("x", width + 80)
      .attr("y", +9)
      .attr("dy", ".1em")
      .style("text-anchor", "start")
      .text(function(d, i) { return countryNames[i]; });

 }

 function redraw(dataset, method) {

  var layers;

  if (method == "stacked") {
    layers = stack(dataset); // this operation also modifies the dataset
  } else {
    layers = stream(dataset); // this operation also modifies the dataset
  }

  console.log("layers", layers);  // it adds a y and y0 to the data values.

  // reset these AFTER doing the layer stacking.

  xScale.domain(d3.extent(originaldata, function(d) { return formatDate.parse(d.Year); }));
  yScale.domain([0, d3.max(originaldata, function(d) { return d.y0 + d.y; })]);


  var layers = svg.selectAll(".layer")
      .data(layers, function(d) {return d.key;});

  layers.enter().append("path")
      .attr("class", "layer")
      .append("title")
      .text(function(d) {
        return d.key; // country is the key
      });

  layers.transition().duration(1000)
    .attr("d", function(d) { return area(d.values); })
    .style("fill", function(d, i) { return color(i); });

  layers.exit().remove();

  // transition your axes.
  d3.select(".x.axis").transition().call(xAxis);
  d3.select(".y.axis").transition().call(yAxis); // there is no visible change actually

 }


 </script>
Country	Year	Incidents_total
Afghanistan	Year 2009	502
Afghanistan	Year 2010	540
Afghanistan	Year 2011	422
Afghanistan	Year 2012	1469
Afghanistan	Year 2013	1442
Afghanistan	Year 2014	1820
Algeria	Year 2009	108
Algeria	Year 2010	100
Algeria	Year 2011	15
Algeria	Year 2012	41
Algeria	Year 2013	22
Algeria	Year 2014	13
Bangladesh	Year 2009	28
Bangladesh	Year 2010	22
Bangladesh	Year 2011	14
Bangladesh	Year 2012	18
Bangladesh	Year 2013	138
Bangladesh	Year 2014	129
CAR	Year 2009	5
CAR	Year 2010	13
CAR	Year 2011	3
CAR	Year 2012	4
CAR	Year 2013	20
CAR	Year 2014	93
Colombia	Year 2009	139
Colombia	Year 2010	136
Colombia	Year 2011	94
Colombia	Year 2012	115
Colombia	Year 2013	147
Colombia	Year 2014	230
Congo	Year 2009	54
Congo	Year 2010	18
Congo	Year 2011	16
Congo	Year 2012	25
Congo	Year 2013	22
Congo	Year 2014	109
Egypt	Year 2009	2
Egypt	Year 2010	2
Egypt	Year 2011	18
Egypt	Year 2012	49
Egypt	Year 2013	316
Egypt	Year 2014	346
France	Year 2009	9
France	Year 2010	3
France	Year 2011	8
France	Year 2012	65
France	Year 2013	12
France	Year 2014	12
Greece	Year 2009	115
Greece	Year 2010	49
Greece	Year 2011	11
Greece	Year 2012	22
Greece	Year 2013	53
Greece	Year 2014	26
India	Year 2009	673
India	Year 2010	662
India	Year 2011	642
India	Year 2012	611
India	Year 2013	694
India	Year 2014	859
Iraq	Year 2009	1137
Iraq	Year 2010	1179
Iraq	Year 2011	1307
Iraq	Year 2012	1438
Iraq	Year 2013	2852
Iraq	Year 2014	3925
Israel	Year 2009	36
Israel	Year 2010	14
Israel	Year 2011	51
Israel	Year 2012	66
Israel	Year 2013	37
Israel	Year 2014	293
Libya	Year 2009	0
Libya	Year 2010	0
Libya	Year 2011	2
Libya	Year 2012	58
Libya	Year 2013	293
Libya	Year 2014	729
Nigeria	Year 2009	42
Nigeria	Year 2010	63
Nigeria	Year 2011	175
Nigeria	Year 2012	616
Nigeria	Year 2013	345
Nigeria	Year 2014	713
Pakistan	Year 2009	666
Pakistan	Year 2010	711
Pakistan	Year 2011	1011
Pakistan	Year 2012	1651
Pakistan	Year 2013	2213
Pakistan	Year 2014	2146
Philippines	Year 2009	230
Philippines	Year 2010	205
Philippines	Year 2011	149
Philippines	Year 2012	247
Philippines	Year 2013	652
Philippines	Year 2014	597
Russia	Year 2009	152
Russia	Year 2010	251
Russia	Year 2011	188
Russia	Year 2012	151
Russia	Year 2013	144
Russia	Year 2014	46
Somalia	Year 2009	122
Somalia	Year 2010	129
Somalia	Year 2011	184
Somalia	Year 2012	318
Somalia	Year 2013	334
Somalia	Year 2014	862
Sudan	Year 2009	26
Sudan	Year 2010	28
Sudan	Year 2011	38
Sudan	Year 2012	40
Sudan	Year 2013	46
Sudan	Year 2014	157
Syria	Year 2009	0
Syria	Year 2010	0
Syria	Year 2011	49
Syria	Year 2012	177
Syria	Year 2013	279
Syria	Year 2014	326
Thailand	Year 2009	298
Thailand	Year 2010	253
Thailand	Year 2011	181
Thailand	Year 2012	286
Thailand	Year 2013	477
Thailand	Year 2014	423
Ukraine	Year 2009	2
Ukraine	Year 2010	4
Ukraine	Year 2011	3
Ukraine	Year 2012	8
Ukraine	Year 2013	5
Ukraine	Year 2014	889
United Kingdom	Year 2009	22
United Kingdom	Year 2010	57
United Kingdom	Year 2011	47
United Kingdom	Year 2012	51
United Kingdom	Year 2013	137
United Kingdom	Year 2014	103
Yemen	Year 2009	23
Yemen	Year 2010	112
Yemen	Year 2011	118
Yemen	Year 2012	312
Yemen	Year 2013	424
Yemen	Year 2014	760
	<!DOCTYPE html>
	<!-- mod of Mike Bostock's block http://bl.ocks.org/mbostock/3020685 -->
	<meta charset="utf-8">
	<style>

	body {
	font: 12px sans-serif;
	padding: 50px;
	}

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

	button {
	background: #ccc;
	margin: 5px;

	}
	.selected {
	background: orange;
	}

	.layer {
	fill: white;
	}

	</style>
	<body>

	<h1>Countries with the Most Terrorist Attacks, 2000-2014</h1>

	<p>Terrorist attacks have increased by 8000% since the 1970s due to an increase in the scale of the attacks and ideology behind the movements. From 1970 until 1995, suicide attacks were non-existent. Modern terrorist groups are more likely to use Medieval practices outlined in religious texts than their predecessors, making for violence that had rarely been seen in the past twenty years. Modern terrorists are also no longer restricted to national borders as they were in Latin America in the 80s and 90s. Islamic Extremists' cells expand well beyond their headquarters, expanding terror along the entire Middle East.</p>

	<button id="stream">Stream</button> <button id="stacked" class="selected">Stack</button>

	<div id="chart"></div>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>

	var originaldata;

	var formatDate = d3.time.format("Year %Y");

	var fullheight = 620, fullwidth = 960;
	var margin = {top: 20, right: 170, bottom: 50, left: 40}, width = fullwidth - margin.left - margin.right,
	height = fullheight - margin.top - margin.bottom;

	var xScale = d3.time.scale()
	.range([0, width]);

	var yScale = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category20();

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	var stack = d3.layout.stack()
	.offset("zero") // try "silhouette" next, that's a streamgraph!
	//.order("inside-out") // try this and see what you think
	.values(function(d) { return d.values; })
	.x(function(d) { return formatDate.parse(d.Year);})
	.y(function(d) { return +d.Incidents_total; });

	// exactly the same except for offset:

	var stream = d3.layout.stack()
	.offset("silhouette") // try "silhouette" next, that's a streamgraph!
	//.order("inside-out") // try this and see what you think
	.values(function(d) { return d.values; })
	.x(function(d) { return formatDate.parse(d.Year);})
	.y(function(d) { return +d.Incidents_total; });

	// what's another way we can DRY this out? how about just updating the "offset" when we do the redraw below...

	var area = d3.svg.area()
	.interpolate("cardinal")
	.x(function(d) { return xScale(formatDate.parse(d.Year)); })
	.y0(function(d) { return yScale(d.y0); })
	.y1(function(d) { return yScale(d.y0 + d.y); });


	var svg = d3.select("#chart").append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("global-terrorism-incidents.csv", setup);

	function setup(error, data) {

	if (error) { console.log(error) };

	originaldata = data; // assign to a global so i can use it in other function

	var dataset = d3.nest()
	.key(function(d) {
	return d.Country;
	})
	// .sortKeys(d3.descending) // alphabetic order from top layer
	.sortValues(function (a, b) { return formatDate.parse(a.Year) - formatDate.parse(b.Year)})
	.entries(data);

	console.log(dataset);

	// set up the UI function:

	d3.selectAll("button").on("click", function() {
	var method = d3.select(this).attr("id"); // this is stream or stacked
	d3.selectAll("button").classed("selected", false);
	d3.select(this).classed("selected", true);
	redraw(dataset, method);
	});

	// default first view: create the axes, so you transition them in the redraw.

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	redraw(dataset, "stacked"); // method is either stacked or stream

	var countryNames = d3.map(data,function(d) {
	return d.Country;
	}).keys();

	// draw legend
	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });

	// draw legend colored rectangles
	legend.append("rect")
	.attr("x", width+ 60)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", function(d) {return color(d)});

	// draw legend text
	legend.append("text")
	.attr("x", width + 80)
	.attr("y", +9)
	.attr("dy", ".1em")
	.style("text-anchor", "start")
	.text(function(d, i) { return countryNames[i]; });

	}

	function redraw(dataset, method) {

	var layers;

	if (method == "stacked") {
	layers = stack(dataset); // this operation also modifies the dataset
	} else {
	layers = stream(dataset); // this operation also modifies the dataset
	}

	console.log("layers", layers); // it adds a y and y0 to the data values.

	// reset these AFTER doing the layer stacking.

	xScale.domain(d3.extent(originaldata, function(d) { return formatDate.parse(d.Year); }));
	yScale.domain([0, d3.max(originaldata, function(d) { return d.y0 + d.y; })]);


	var layers = svg.selectAll(".layer")
	.data(layers, function(d) {return d.key;});

	layers.enter().append("path")
	.attr("class", "layer")
	.append("title")
	.text(function(d) {
	return d.key; // country is the key
	});

	layers.transition().duration(1000)
	.attr("d", function(d) { return area(d.values); })
	.style("fill", function(d, i) { return color(i); });

	layers.exit().remove();

	// transition your axes.
	d3.select(".x.axis").transition().call(xAxis);
	d3.select(".y.axis").transition().call(yAxis); // there is no visible change actually

	}


	</script>