aliavni · April 20, 2016 23:41
diff --git a/guns.csv b/guns.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">

  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  svg {
    /* border: 1px solid #f0f; */
  }

  .county {
    fill:#d0d0d0;
  }

  .county.has-guns {
    fill: steelblue;
  }

  .gun-circle {
    fill: orange;
    opacity: 0.75;
  }



 </style>

 <body>

 </body>

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


 <script type="text/javascript">

 var width = 960,
    height = 500;

 var path = d3.geo.path();

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

 function ready(error, us, data) {
  if (error) return console.warn(error);

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

  var topo = topojson.feature(us, us.objects.counties).features;

  svg.selectAll(".county")
    .data(topo)
    .enter()
    .append("path")
    .attr("class",function(d) {
      var gunsForCounty = gunsByFips[d.id];
      if (gunsForCounty>0) return "county has-guns";
      return "county";
    })
    .attr("d", path);

  var radius = d3.scale.sqrt()
      .domain([0, d3.max(data, function(d) { return d.count3 })])
      .range([0, 5]);




  svg.append("g")
      .attr("class", "gun-bubbles")
    .selectAll(".gun-circle")
      .data(topo)
    .enter()
      .append("circle")
      .attr("class", "gun-circle")
      .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
      // .attr("r", function(d) { return gunsByFips[d.id] });
      .attr("r", function(d) {
        // console.log("d.id", d.id, "gunsByFips[d.id]", gunsByFips[d.id]);
        return d.id in gunsByFips ? radius(gunsByFips[d.id]) : 0
        // return gunsByFips[d.id] === 0 ? 0 : radius(gunsByFips[d.id])
      })

 }

 </script>
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font-family: arial, sans;
	font-size: 14px;
	width: 960px;
	margin: 40px auto;
	}
	svg {
	/* border: 1px solid #f0f; */
	}

	.county {
	fill:#d0d0d0;
	}

	.county.has-guns {
	fill: steelblue;
	}

	.gun-circle {
	fill: orange;
	opacity: 0.75;
	}



	</style>

	<body>

	</body>

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


	<script type="text/javascript">

	var width = 960,
	height = 500;

	var path = d3.geo.path();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

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

	function ready(error, us, data) {
	if (error) return console.warn(error);

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

	var topo = topojson.feature(us, us.objects.counties).features;

	svg.selectAll(".county")
	.data(topo)
	.enter()
	.append("path")
	.attr("class",function(d) {
	var gunsForCounty = gunsByFips[d.id];
	if (gunsForCounty>0) return "county has-guns";
	return "county";
	})
	.attr("d", path);

	var radius = d3.scale.sqrt()
	.domain([0, d3.max(data, function(d) { return d.count3 })])
	.range([0, 5]);




	svg.append("g")
	.attr("class", "gun-bubbles")
	.selectAll(".gun-circle")
	.data(topo)
	.enter()
	.append("circle")
	.attr("class", "gun-circle")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	// .attr("r", function(d) { return gunsByFips[d.id] });
	.attr("r", function(d) {
	// console.log("d.id", d.id, "gunsByFips[d.id]", gunsByFips[d.id]);
	return d.id in gunsByFips ? radius(gunsByFips[d.id]) : 0
	// return gunsByFips[d.id] === 0 ? 0 : radius(gunsByFips[d.id])
	})

	}

	</script>