ohdebby · April 13, 2017 16:55
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">

  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;;
    font-size: 12px;
    width: 960px;
    height: 500px;
    margin: 20px auto;
  }
  .states {
    stroke: #fff;
    fill: none;
    pointer-events: none;
  }
  .counties {
    stroke: #fff;
    fill: none;
    stroke-width: .3px;
  }
 .tooltip {   
 	position: absolute;           
 	text-align: left;           
 	padding: 5px;             
 	font: 12px sans-serif;        
 	background: white;
  opacity: 0.9;
 	border: 0px;      
 	border-radius: 8px;           
 	pointer-events: none;         
 }
  .tooltip h3 {
    margin: 0px 0px 8px;
  }
 </style>

 <body>

 </body>

 <script src="http://d3js.org/d3.v4.js" charset="utf-8"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>

 <script type="text/javascript">
  
 var width = 960,
    height = 500;

 var color = d3.scaleThreshold()
  .range(["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"])
 	.domain([0,5,10,15,20,25,30,35,40]);
 var radius = d3.scaleSqrt()
    .range([0,20])
    .domain([0,10000]);

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

 var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");

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

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

  deathsByFips = {};
  deaths.forEach(function(d) {
    d.Deaths = +d.Deaths;
    d.Population = +d.Population;
    d["Crude Rate"] = +(d["Crude Rate"].replace(" (Unreliable)", ""));
    deathsByFips[+d["County Code"]] = d;
  });

  var format = d3.format(".2%");
  var commas = d3.format(",");

  var path = d3.geoPath()
    .projection(d3.geoAlbersUsa());

  var subset = topojson.feature(us, us.objects.counties).features.filter(function(d) {
    return d.id in deathsByFips;
  });

  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(subset)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { 
        return color(deathsByFips[d.id]["Crude Rate"]);
      })
      .on("mouseover", function(d) {
        var val = deathsByFips[d.id];
        var fill_color = color(val["Crude Rate"]);
        tooltip.html("");
        tooltip.style("visibility", "visible")
          .style("border", "3px solid " + fill_color);

        tooltip.append("h3").text(val.County);
        tooltip.append("div")
          .text("Population: " + commas(val["Population"]));
        tooltip.append("div")
          .text("Suicides: " + commas(val["Deaths"]));
        tooltip.append("div")
          .text("Suicides per 100,000: " +(val["Crude Rate"]));

        d3.selectAll(".counties path")
          .style("opacity", 1)
           .style("stroke", null);
        d3.select(this)
          .style("opacity", 1)
          .style("stroke", "#222")
          .raise();
      })
      .on("mousemove", function() {
        return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px");
      })
      .on("mouseout", function() {
        tooltip.style("visibility", "hidden")
        d3.selectAll(".counties path")
          .style("opacity", 5);
        d3.selectAll(".states")
          .style("opacity", 5);
      });

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);

  svg.append("text")
    .style("font-weight", "bold")
    .attr("x", width - 176)
    .attr("y", height - 152)
    .text("Suicides per 100,000");

  var legend = svg.selectAll(".legend")
    .data(color.domain().reverse())
    .enter().append("g")
    .attr("transform", function(d,i) {
      return "translate(" + (width-139) + "," + (height - 144 + 16 * i) + ")";
    })

  legend.append("rect")
    .attr("width", 12)
    .attr("height", 12)
    .style("fill", function(d) {
      return color(d);
    });

  legend.append("text")
    .attr("x", 16)
    .attr("y", 11)
    .style("font-size", "12px")
    .text(function(d) {
      return d.toFixed(0);
    });
 }

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

	<style type="text/css">

	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;;
	font-size: 12px;
	width: 960px;
	height: 500px;
	margin: 20px auto;
	}
	.states {
	stroke: #fff;
	fill: none;
	pointer-events: none;
	}
	.counties {
	stroke: #fff;
	fill: none;
	stroke-width: .3px;
	}
	.tooltip {
	position: absolute;
	text-align: left;
	padding: 5px;
	font: 12px sans-serif;
	background: white;
	opacity: 0.9;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}
	.tooltip h3 {
	margin: 0px 0px 8px;
	}
	</style>

	<body>

	</body>

	<script src="http://d3js.org/d3.v4.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script type="text/javascript">

	var width = 960,
	height = 500;

	var color = d3.scaleThreshold()
	.range(["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"])
	.domain([0,5,10,15,20,25,30,35,40]);
	var radius = d3.scaleSqrt()
	.range([0,20])
	.domain([0,10000]);

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

	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden");

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

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

	deathsByFips = {};
	deaths.forEach(function(d) {
	d.Deaths = +d.Deaths;
	d.Population = +d.Population;
	d["Crude Rate"] = +(d["Crude Rate"].replace(" (Unreliable)", ""));
	deathsByFips[+d["County Code"]] = d;
	});

	var format = d3.format(".2%");
	var commas = d3.format(",");

	var path = d3.geoPath()
	.projection(d3.geoAlbersUsa());

	var subset = topojson.feature(us, us.objects.counties).features.filter(function(d) {
	return d.id in deathsByFips;
	});

	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(subset)
	.enter().append("path")
	.attr("d", path)
	.style("fill", function(d) {
	return color(deathsByFips[d.id]["Crude Rate"]);
	})
	.on("mouseover", function(d) {
	var val = deathsByFips[d.id];
	var fill_color = color(val["Crude Rate"]);
	tooltip.html("");
	tooltip.style("visibility", "visible")
	.style("border", "3px solid " + fill_color);

	tooltip.append("h3").text(val.County);
	tooltip.append("div")
	.text("Population: " + commas(val["Population"]));
	tooltip.append("div")
	.text("Suicides: " + commas(val["Deaths"]));
	tooltip.append("div")
	.text("Suicides per 100,000: " +(val["Crude Rate"]));

	d3.selectAll(".counties path")
	.style("opacity", 1)
	.style("stroke", null);
	d3.select(this)
	.style("opacity", 1)
	.style("stroke", "#222")
	.raise();
	})
	.on("mousemove", function() {
	return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px");
	})
	.on("mouseout", function() {
	tooltip.style("visibility", "hidden")
	d3.selectAll(".counties path")
	.style("opacity", 5);
	d3.selectAll(".states")
	.style("opacity", 5);
	});

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
	.attr("class", "states")
	.attr("d", path);

	svg.append("text")
	.style("font-weight", "bold")
	.attr("x", width - 176)
	.attr("y", height - 152)
	.text("Suicides per 100,000");

	var legend = svg.selectAll(".legend")
	.data(color.domain().reverse())
	.enter().append("g")
	.attr("transform", function(d,i) {
	return "translate(" + (width-139) + "," + (height - 144 + 16 * i) + ")";
	})

	legend.append("rect")
	.attr("width", 12)
	.attr("height", 12)
	.style("fill", function(d) {
	return color(d);
	});

	legend.append("text")
	.attr("x", 16)
	.attr("y", 11)
	.style("font-size", "12px")
	.text(function(d) {
	return d.toFixed(0);
	});
	}

	</script>