Drone Strikes in Pakistan by District

This visualization was created using data from the Bureau of Investigative Journalism. To learn more about the United States drone program, head to their website here: https://www.thebureauinvestigates.com/projects/drone-war

<!doctype html>
<html>
<head>
<title>Drones in Pakistan</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
</body>
<script>
	
var width = 700
var height = 600
var xTranslate = -4475
var yTranslate = 2700
var scaleStart = 4000

// Create a more versatile promiseWrapper that can take multiple types of data, including geoJSON and CSV files. The XHR object is the request type (d3.json, d3.csv, etc) for processing the data, the d is the data string URL itself.

var promiseWrapper = (xhr, d) => new Promise(resolve => xhr(d, (p) => resolve(p)))

// Feed it the data, on resolve call the function to draw the map.

Promise.all([promiseWrapper(d3.json,"pakistanDistricts.geojson"),promiseWrapper(d3.csv,"droneData.csv")]).then(resolve =>{
	createMap(resolve[0],resolve[1])
})

function createMap(districts,drones){
	
	var tooltip = d3.select("body").append("div")
		.attr("id","tooltip")
		.classed("showing",true)
		.style("opacity",0)
		.classed("showing",true)
	
	var svg = d3.select("body").append("svg")
		.attr("width",width)
		.attr("height",height)

var g = d3.select("svg").append("g")

// DRAW OUR Districts //
	
	var projection = d3.geoMercator()
		.scale(scaleStart)
		.translate([xTranslate,yTranslate])
	
	var geoPath = d3.geoPath()
		.projection(projection);
	
	g.selectAll("path")
		.data(districts.features) // Must access the features array
		.enter()
		.append("path")
		.attr("d", geoPath)
		.attr("class","districts")
		.attr("id", function(d){
			var str = d.properties.districts
			return str.replace(/\s+/g, '')
		})
		.attr("totalKilled",0)
		.attr("totalStrikes",0)
		.on("mouseover", showData)
		.on("mouseleave", hideData)
	
	
	// ADD Drone data
				
	var minKilled = 0;
	var totalKilled = 0;
	var totalStrikes = 0;
	
	function parseDroneData(data){
		var districtStrikes = 0;
		data.forEach(function(d){
			var str = d.district.replace(/\s+/g, '')
			var district = `#${str}`
			var numKilled = parseInt(d.minKilled)
			totalKilled = totalKilled + numKilled;
			if (district != "#Unknown"){
				totalStrikes++
				var districtPath = d3.select(district)
				var currentKilled = districtPath.attr("totalKilled")
				var currentStrikes = d3.select(district).attr("totalStrikes")
				var updateKilled = parseInt(currentKilled) + parseInt(numKilled)
				var updateStrikes = parseInt(currentStrikes) + 1
				districtPath.attr("totalKilled", updateKilled)
				districtPath.attr("totalStrikes", updateStrikes)
			}
		})	
	}
	
	parseDroneData(drones)
	console.log(totalStrikes,totalKilled)
	
	// Get kill or strike extent
	
	var allDist = document.getElementsByClassName("districts")
	var killTop = d3.max(allDist, function(d,i){
		return parseInt(d.getAttribute("totalKilled"))
	})

var redScale = d3.scaleLinear().domain([0,killTop]).range(["white","#BA0514"])
	
	function labelDistricts(){
		var hitRegions = d3.selectAll("path.districts").filter(function(d){
			return d3.select(this).attr("totalStrikes") != 0
		})
		.style("fill", function(){ return redScale(parseInt(d3.select(this).attr("totalKilled")))})
		
		
		var distNames = []
		
		hitRegions.each(function(d){
			var distName = d.properties.districts
			var thisCenter = geoPath.centroid(d)
			thisCenter.push(distName)
			distNames.push(thisCenter)
		})
		
		g.selectAll("text")
			.data(distNames)
			.enter()
			.append("text")
			.attr("x", d => d[0])
			.attr("y", d => d[1])
			.text(d => d[2])
	}

labelDistricts();
	
	
	
	d3.selectAll("path.districts")
	
	g.append("text").attr("x", width/2 - 90)
		.attr("y", 40).text("Drone Strikes in Pakistan by District")
		.attr("id","title")
	
	g.append("text").attr("x", width/2 - 90)
		.attr("y", 60).text("2004 - 2017")
		.attr("id","subtitle")
	
	d3.select("body").append("div")
		.attr("id","legend")
		.html("<b>Info:</b><br>Figures are based on <a href='https://www.thebureauinvestigates.com/stories/2017-01-01/drone-wars-the-full-data'>data</a> from the Bureau of Investigative Journalism. Minimum casualty and strike figures are shown for the period between June 2004 and September 2017. The data does not include other types of airstrikes. Districts where no strikes occured are not labeled.")
	
	function showData(d){
		tooltip.html("<b>Strikes</b>: "+d3.select(this).attr("totalStrikes")+"<br><b>Killed</b>: "+d3.select(this).attr("totalKilled"))
		var coordinates = [0,0]
		coordinates = d3.mouse(this);
		var x = coordinates[0]
		var y = coordinates[1]
		tooltip.style("left",x + 30 + "px")
		tooltip.style("top", y + "px")
		d3.select("#tooltip").transition().duration(250).style("opacity",1)
	}
	
	function hideData(d){
	d3.select("#tooltip").transition().duration(250).style("opacity",0)
	}	
	
}
</script>
</html>

https://d3js.org/d3.v4.min.js