Terror attacks per country per year

README.md

Source: Global Terrorism Database (GTD)

Data and data wrangling process via this gist: https://gist.github.com/chris-creditdesign/e07ff4ab3d879396f2a1

Build with d3.js

area-chart.js

d3Edge.areaChart = function module() {
	var svg;
	//	Default values 
	var margin = {top: 0, right: 0, bottom: 0, left: 0};
	var width = 300 - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

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

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



	function exports(_selection) {
		_selection.each(function() {
			
			_selection.append("rect")
				.attr("x", margin.left)
				.attr("y", margin.top)
				.attr("width", width)
				.attr("height", height)
				.style("fill","#eee");

			svg = _selection.append("g")
					.attr("transform", "translate(" + margin.left + "," + margin.top + ")");;
		});
	}

	exports.margin = function(_margin) {
		if (!arguments.length) {
			return margin
		};

		margin = _margin;
		return this;
	};	

	exports.width = function(_width) {
		if (!arguments.length) {
			return width
		};

		width = _width - margin.left - margin.right;
		xScale.range([0, width]);

		return this;
	};

	exports.height = function(_height) {
		if (!arguments.length) {
			return height
		};

		height = _height - margin.top - margin.bottom;
		yScale.range([height, 0]);

		return this;
	};

	exports.drawAreaChart = function (_data) {
		var maxYear = 	d3.max(_data.map(function(d) { 
							return d3.max(d.values, function (d) {
								return d.year;
							});
						}));

		var minYear =	d3.min(_data.map(function(d) { 
							return d3.min(d.values, function (d) {
								return d.year;
							});
						}));

		var maxAttacks = d3.max(_data.map(function(d) { 
							return d3.max(d.values, function (d) {
								return d.y0;
							});
						}));

		
		xScale.domain([minYear, maxYear]);
		yScale.domain([0, (maxAttacks * 1.1)]);

		var area = d3.svg.area()
			.x(function(d) { return xScale(d.year); })
			.y0(function(d) { return yScale(d.y0); })
			.y1(function(d) { return yScale(d.y0 + d.y); });

		var xAxis = d3.svg.axis()
			.scale(xScale)
			.tickFormat(d3.format("d"))
			.orient("bottom");

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

		var countries = svg.selectAll(".country")
							.data(_data)
		    			  .enter()
		    				.append("g")
		    				.attr("class", "country");
		
		countries.append("path")
			.attr("class", "area")
			.attr("d", function(d) { return area(d.values); })
			.attr("fill", "#ccc")
			.attr("stroke", "none");

		countries.append("text")
			.datum(function(d) {
				return {name: d.country, value: d.values[d.values.length - 1]};
			})
			.attr("transform", function(d) { return "translate(" + (xScale(d.value.year) + 10) + "," + yScale(d.value.y0 + d.value.y / 2) + ")"; })
			.attr("x", -6)
			.attr("dy", ".35em")
			.text(function(d) { return d.name; })
			.attr("opacity", 0);

		countries.on("mouseenter", function (argument) {
			d3.select(this)
				.select("text")
				.attr("opacity", 1);
		}).on("mouseleave", function (argument) {
			d3.select(this)
				.select("text")
				.attr("opacity", 0);
		})

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

		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
		  .append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", -margin.left)
			.attr("x", -(height/2))
			.attr("dy", "0.7em")
			.style("text-anchor", "middle")
			.text("Terrorist Incidents");

		};


	return exports;
}

data-manager.js

//Define our data manager module.
d3Edge.dataManager = function module() {
	var exports = {};
	var dispatch = d3.dispatch('dataReady');

	var stack = d3.layout.stack()
    	.values(function(d) { return d.values; });

	//Create a method to load the csv file, and apply cleaning function asynchronously.
	exports.loadCsvData = function(_file) {

		//Create the csv request using d3.csv.
		var loadCsv = d3.csv(_file);

		loadCsv.get(function (_err, _response) {
			
			var array_of_countries = [];

			_response.forEach(function (d) {
				var myObject = {}
				myObject.values = [];

				myObject.country = d.country;

				for (var prop in d) {
					if (prop != "country") {
						var myDateObject = {}
						myDateObject.year = +prop;
						myDateObject.y = +d[prop]
						myObject.values.push(myDateObject);
					}
				}

				array_of_countries.push(myObject);
			});
			
			countries_stacked = stack(array_of_countries);

			//Dispatch our custom dataReady event passing in the stacked data.
			dispatch.dataReady(countries_stacked);
		});

	};

	d3.rebind(exports, dispatch, 'on');

	return exports;
};

edge.js

//Define the namespace for our API.
var d3Edge = {};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Global Terrorism Database</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="./edge.js" charset="utf-8"></script>
	<script src="./data-manager.js" charset="utf-8"></script>
	<script src="./area-chart.js" charset="utf-8"></script>
	<script src="./index.js" charset="utf-8"></script>
	<style>
		body {
			color: #333;
			font-family: helvetica;
		}

		h1 {
			margin-bottom: 0;
		}

		.outer-wrapper {
			width: 940px;
			height: 500px;
			padding: 0 10px;
		}

		.container {
			display: inline-block;
		}


		.axis, .country {
			font-size: 12px;
		}

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

		.x path {
			display: none;
		}

		path.area:hover {
			fill: darkred;
		}

		.ticks text {
			display: none;
		}


	</style>
</head>
<body>
<div class="outer-wrapper">
	<div class="container" id="chart"></div>
</div>

index.js

function draw(dataURL, target) {
	var margin = {top: 25, right: 200, bottom: 30, left: 60};
	var width = 950;
	var height = 500;

	var dataManager = d3Edge.dataManager();

	var areaChart = d3Edge.areaChart()
						.margin(margin)
						.width(width)
						.height(height);
	
	d3.selectAll(target)
		.append('svg')
		.attr('width', width)
		.attr('height', height)
		.call(areaChart);

	dataManager.loadCsvData(dataURL);

	dataManager.on('dataReady', function (data) {
		areaChart.drawAreaChart(data);
	});

}

function init () {
	draw("/chris-creditdesign/raw/e07ff4ab3d879396f2a1/gtd_country_year.csv", "#chart");
}

window.onload = init;