block by kcsluis 23dc3560f56187ad3540

Dot Map

Full Screen

index.html

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
/*	svg {
		border: 1px solid #f0f;
	}*/
	body {
		font-family: 'arial', sans-serif;
		font-size: 9px;
		width: 960px;
		margin: 30px auto;
	}
	h1 {
		font-size: 36px;
	}
	.gCounty {
		fill: #ddd;
		stroke: white;
		stroke-width: 0.3px;
	}
	.gState {
		fill: none;
		stroke: #fff;
	}
	</style>
</head>

<body>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 20, left: 20};
var width = 960 - margin.left - margin.right,
	height = 540 - margin.top - margin.bottom;
  
var svg = d3.select("body").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
	.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var projection = d3.geo.albersUsa();

var path = d3.geo.path()
	.projection(projection);

var color = d3.scale.threshold()
	.domain([1, 10, 100, 500, 1000])
	.range(["#fefefe", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
	// five breaks, six colors

queue()
	.defer(d3.json, "us.json")
	.defer(d3.csv, "guns_history.csv")
	.await(ready);

function ready(error, us, guns) {
	if (error) throw error;

	var gunsByFips = {};
	guns.forEach( function (d) {
		d.count3 = +d.count3;
		gunsByFips[d.FIPS] = d.count3;
	});

	var countyFeatures = topojson.feature(us, us.objects.counties).features;
	var stateFeatures = topojson.feature(us, us.objects.states).features;
	// converts topojson into geojson
	// use mapshaper.org for converting shapefiles (shp) into topojson files 

	svg.append("g")
		.attr("class", "countyFeatureContainer")
	.selectAll("path")
		.data(countyFeatures)
		.enter()
		.append("path")
		.attr("class", "gCounty")
		.attr("d", path);

	svg.append("g")
		.attr("class", "circleContainer")
	.selectAll("path")
		.data(countyFeatures)
		.enter()
		.append("circle")
		.attr("class", "gCircle")
		.attr("opacity", 0.33)
		.attr("transform", function (d) {
			var centroid = path.centroid(d);
			return "translate(" + centroid + ")";
		})
		.attr("r", function (d) {
			return Math.sqrt(gunsByFips[d.id])/2;
		});

	svg.append("g")
		.attr("class", "stateFeatureContainer")
	.selectAll("path")
		.data(stateFeatures)
		.enter()
		.append("path")
		.attr("class", "gState")
		.attr("d", path);

};

</script>