Global Terrorism Database - visualised

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

barchart.js

d3Edge.barChart = 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 country = "";

	var xScale = d3.scale.ordinal()
		.rangeRoundBands([0, width], .3);

	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.country = function(_country) {
		if (!arguments.length) {
			return country
		};

		country = _country;
		return this;
	};

	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.rangeRoundBands([0, width], .3);

		return this;
	};

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

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

		return this;
	};

	exports.drawBarChart = function(_data) {

		xScale.domain(_data.map(function(d) { return d.key; }));
		yScale.domain([0, (d3.max(_data, function(d) { return d.totalKill; }) * 1.1) ]);

		var xAxis = d3.svg.axis()
			.scale(xScale)
			.tickValues(xScale.domain().filter(function(d, i) { 
				return !(i % 5); 
			}))
			.orient("bottom");

		var xAxisTicks = d3.svg.axis()
			.scale(xScale)
			.orient("bottom");

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

		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis)
		  .append("text")
			.attr("y", -height)
			.attr("x", width/2)
			.attr("dy", "-0.56em")
			.attr("font-size","14px")
			.style("text-anchor", "middle")
			.text(country);

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

		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("Fatalities");

		svg.selectAll(".bar")
			.data(_data)
		  .enter().append("rect")
			.attr("class", "bar")
			.attr("x", function(d) { return xScale(d.key); })
			.attr("width", xScale.rangeBand())
			.attr("y", function(d) { return yScale(d.totalKill); })
			.attr("height", function(d) { return height - yScale(d.totalKill); })
		  .append("title")
		  	.text(function(d) { return d.key + ": " + d.totalKill + " fatalities"; });

	};

	return exports;

};

data-functions.js

function processData (d) {
	var total = 0;
	d.values.forEach(function (d) {
		total += +d.nkill;
	});
	d.totalKill = total;
	d.date = +d.key;
}

var nestData = d3.nest()
	.key(function(d) { return d.iyear; });

data-manager.js

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

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

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

		loadCsv.get(function (_err, _response) {

			nestedData = _nestData.entries(_response);
			
			nestedData.forEach(function (d) {
				_processData(d);
			});

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

	};

	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-functions.js" charset="utf-8"></script>
	<script src="./data-manager.js" charset="utf-8"></script>
	<script src="./barchart.js" charset="utf-8"></script>
	<script src="./index.js" charset="utf-8"></script>
	<style>
		body {
			/*background-color: #eee;*/
			color: #333;
			font-family: helvetica;
		}

		h1 {
			margin-bottom: 0;
		}

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

		.container {
			display: inline-block;
		}

		.bar {
			fill: darkred;
		}

		.axis {
			font-size: 10px;
		}

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

		.x path {
			display: none;
		}

		.ticks text {
			display: none;
		}

	</style>
</head>
<body>
<div class="outer-wrapper">
	<h1>Deaths caused by terrorism</h1>
	<div class="container" id="gb"></div>
	<div class="container" id="usa"></div>
	<div class="container" id="iraq"></div>
	<div class="container" id="pakistan"></div>
</div>

index.js

function draw(dataURL, target) {
	var margin = {top: 25, right: 10, bottom: 30, left: 50};
	var width = 450;
	var height = 220;

	var dataManager = d3Edge.dataManager();
	var barChart = d3Edge.barChart()
						.margin(margin)
						.width(width)
						.height(height);
	
	dataManager.loadCsvData(dataURL, nestData, processData);

	dataManager.on('dataReady', function (data) {
		barChart.country(data[0].values[0].country_txt);
		barChart.drawBarChart(data);
	});

	d3.selectAll(target)
		.append('svg')
		.attr('width', width)
		.attr('height', height)
		.call(barChart);
}

function init () {
	draw("/chris-creditdesign/raw/e07ff4ab3d879396f2a1/gtd_gb.csv", "#gb");
	draw("/chris-creditdesign/raw/e07ff4ab3d879396f2a1/gtd_usa.csv", "#usa");
	draw("/chris-creditdesign/raw/e07ff4ab3d879396f2a1/gtd_i.csv", "#iraq");
	draw("/chris-creditdesign/raw/e07ff4ab3d879396f2a1/gtd_p.csv", "#pakistan");
}

window.onload = init;