guns from chicago

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="spinner.css">
<style type="text/css">
	div.container {
		width:960px;
		height: 320px;
		margin: 20px auto;
	}

h1 {
		font-size:30px;
		font-family: serif;
		text-align:center;
		margin-top:25px;
	}

h2 {
		font-family: sans-serif;
		font-size:16px;
		text-align:center;
		font-weight:100;
		margin-top: -10px;
	}

a {
		color: #f58c5e;
	}

body {
		background: #fff;
	}

path.county {
		fill: #efefef;
		stroke: #efefef;
	}

path.gun {
		fill: #ddd;
		stroke: #ddd;
	}

circle {
		fill: #f58c5e;
		opacity: .75;
		stroke: #eee;
	}

path.state {
		fill:none;
		stroke:#fff;
	}

text.state-name {
		text-transform: uppercase;
		font-family: sans-serif;
		font-weight: 300;
		font-size:10px;
	}
</style>

<body>
	<h1>Where 50,000 Guns Recovered in Chicago Came From</h1>
	<h2>A recreation of <a href="https://www.nytimes.com/interactive/2013/01/29/us/where-50000-guns-in-chicago-came-from.html?_r=0" target="_blank">this</a> NY Time's visualization created by Kevin Quely and Tim Wallace</h2>
	<div class="container">
		<div id="cssload-pgloading">
			<div class="cssload-loading"></div>
		</div>
	</div>
	<script src="d3.min.js" charset="utf-8"></script>
	<script src="queue.min.js"></script>
	<script src="topojson.min.js"></script>
	<script src="chroma.js"></script>
	<script>

var width = 960,
			height = 520;
		
		var container = d3.select('div.container');

var svg = container.append('svg')
			.attr('width', width)
			.attr('height', height);

var path = d3.geo.path();

ready = function(err, us, guns, stateFips) {
			var stateData = topojson.feature(us, us.objects.states).features;
			var countyData = topojson.feature(us, us.objects.counties).features;

var stateMap = {};
			stateFips.forEach(function(d){
				stateMap[+d.numeric_Code] = d.usps_Code;
			});

var rScale = d3.scale.log().base(Math.E).domain([minCount, maxCount]).range([0,10]);
			svg.selectAll('path.county')
				.data(countyData)
				.enter()
				.append('path')
				.attr('class', 'county')
				.classed('gun', function(d) {
					return gunsByFips[d.id] > 0;
				})
				.attr('d', path);

svg.selectAll('path.state')
				.data(stateData)
				.enter()
				.append('path')
					.attr('class', 'state')
					.attr('d', path)
					.attr('id', function(d) { return d.id; });

countyData = countyData.filter(function(d){
				return !isNaN(rScale(gunsByFips[d.id]));
			});

svg.selectAll('circle')
				.data(countyData)
				.enter()
				.append('circle')
				.attr("transform", function(d) { return path.centroid(d) !="NaN,NaN" ? "translate(" + path.centroid(d) + ")" : ""; })
				.attr('r', function(d){
					var r = rScale(gunsByFips[d.id]);
					if( gunsByFips[d.id]==maxCount ) {
						r *=7;
					}
					return r;
				});

svg.selectAll('text.state-name')
				.data(stateData)
				.enter()
				.append('text')
					.attr("transform", function(d) { 
						var center = path.centroid(d);
						return center !="NaN,NaN" ? "translate(" + center + ")" : ""; 
					})
					.attr('class', 'state-name')
					.text(function(d){
						return stateMap[d.id];
					});
			d3.select("#cssload-pgloading").remove();
		};

queue()
			.defer(d3.json, 'us.json')
			.defer(d3.csv, 'guns-history.csv')
			.defer(d3.tsv, 'state-fips.tsv')
			.await(ready);

</script>
</body>