malcolm-decuire/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
This is a scatter-plot of NRA contributions vs Firearms Deaths per 100K people. Notice TX & TN. I like how CA & NY are right near the $20K for NRA contributions. Contributions are mostly at the state level e.g. state candidates.
Summary: Below are links to datasets regarding NRA contributions & Gun-deaths per 100K people for each state. The intuition I'm going for is this: "what if NRA contributions & Gun deaths are related"

NRA Contributions: http://classic.followthemoney.org//press/ReportView.phtml?r=499
Gun Deaths: https://docs.google.com/spreadsheets/d/1GZP1oymvWHEoRnJjP-XdKfmVIqQX2JXy2DgWuVQ3faw/edit?hl=en#gid=10


## data.csv
State	Contributions	Deaths
Alaska	0	2.24
Arizona	2,772	3.53
California	17,000	3.25
Colorado	100	1.51
Delaware	100	3.09
Georgia	3,750	3.93
Hawaii	5,250	0.07
Illinois	18,000	1.14
Indiana	3,050	3.29
Iowa	14,753	0.71
Kansas	8,650	2.78
Louisiana	2,796	10.16
Maine	5,000	0.9
Michigan	800	5.06
Minnesota	500	0.82
Mississippi	12,500	7.46
Missouri	7,350	4.64
Montana	2,534	0.76
Nevada	15,500	3.07
New Mexico	4,500	2.98
New York	18,000	4.12
North Carolina	3,750	3.87
North Dakota	7,500	0.93
Ohio	3,600	3.54
Oklahoma	500	3.64
Oregon	11,250	1.05
Pennsylvania	21,812	3.97
Rhode Island	13,875	0.57
South Carolina	500	5.41
South Dakota	2,500	0.68
Tennessee	41,596	3.92
Texas	42,250	2.91
Utah	10,000	0.97
Vermont	3,500	0.75
Virginia	11,500	2.58
Washington	68,300	1.25
West Virginia	1,500	2.87
Wisconsin	21,325	1.47

## data.tsv

          
            State
            Contributions
            Deaths

            
              Alaska
              0
              2.24

            
              Arizona
              2772
              3.53

            
              California
               17000
              3.25

            
              Colorado
               100
              1.51

            
              Delaware
              100
              3.09

            
              Georgia
              3750
               3.93

            
              Hawaii
              5250 
              0.07

            
              Illinois
              18000
                1.14

            
              Indiana
              3050
               3.29

            
              Iowa
               14753
              0.71

            
              Kansas
              8650
              2.78

            
              Louisiana 
              2796
              10.16

            
              Maine
              5000
              0.9

            
              Michigan
              800
              5.06

            
              Minnesota
              500
              0.82

            
              Mississippi
              12500
              7.46

            
              Missouri
              7350
              4.64

            
              Montana
              2534
              0.76

            
              Nevada
              15500
              3.07

            
              New Mexico
              4500
              2.98

            
              New York
              18000
              4.12

            
              North Carolina
              3750
              3.87

            
              North Dakota
              7500
              0.93

            
              Ohio
               3600 
              3.54

            
              Oklahoma
              500
              3.64

            
              Oregon
              11250
               1.05

            
              Pennsylvania 
              21812
              3.97

            
              Rhode Island 
              13875
              0.57

            
              South Carolina
              500
              5.41

            
              South Dakota
              2500
               0.68

            
              Tennessee
              41596  
              3.92

            
              Texas
               42250
              2.91

            
              Utah
               10000
              0.97

            
              Vermont
              3500
              0.75

            
              Virginia
              11500
              2.58

            
              Washington
               68300
              1.25

            
              West Virginia
              1500
              2.87

            
              Wisconsin
              21325
              1.47

## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

<style>
body {
  font: 11px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 2000px;
  height: 1000px;
  pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

/*
 * value accessor - returns the value to encode for a given data object.
 * scale - maps value to a visual display encoding, such as a pixel position.
 * map function - maps from data value to display value
 * axis - sets up axis
 */

// setup x
var xValue = function(d) { return d.Contributions;}, // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// setup y
var yValue = function(d) { return d.Deaths;}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");

// setup fill color
var cValue = function(d) { return d.State;},
    color = d3.scale.category10();

// add the graph canvas to the body of the webpage
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 + ")");

// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

// load data
d3.tsv("data.tsv", function(error, data) {

  // change string (from CSV) into number format
  data.forEach(function(d) {
    d.Contributions = +d.Contributions;
    d.Deaths = +d.Deaths;
//    console.log(d);
  });

  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

  // x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Conntributions");

  // y-axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Deaths");

  // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));})
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["State"] + "<br/> (" + xValue(d)
	        + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

  // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) {
        return "translate("+ (i * 20 + 137) + ", 6)";
      });

  // draw legend colored rectangles
  var boxSize = 17;
  legend.append("rect")
      .attr("x", 0)
      .attr("width", boxSize)
      .attr("height", boxSize)
      .style("fill", color);

  // draw legend text
  legend.append("text")
      .attr("x", -8.2)
      .attr("y", 19)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .attr("transform","rotate(-43)")
      .text(function(d) { return d;})
});

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	State Contributions Deaths
	Alaska 0 2.24
	Arizona 2,772 3.53
	California 17,000 3.25
	Colorado 100 1.51
	Delaware 100 3.09
	Georgia 3,750 3.93
	Hawaii 5,250 0.07
	Illinois 18,000 1.14
	Indiana 3,050 3.29
	Iowa 14,753 0.71
	Kansas 8,650 2.78
	Louisiana 2,796 10.16
	Maine 5,000 0.9
	Michigan 800 5.06
	Minnesota 500 0.82
	Mississippi 12,500 7.46
	Missouri 7,350 4.64
	Montana 2,534 0.76
	Nevada 15,500 3.07
	New Mexico 4,500 2.98
	New York 18,000 4.12
	North Carolina 3,750 3.87
	North Dakota 7,500 0.93
	Ohio 3,600 3.54
	Oklahoma 500 3.64
	Oregon 11,250 1.05
	Pennsylvania 21,812 3.97
	Rhode Island 13,875 0.57
	South Carolina 500 5.41
	South Dakota 2,500 0.68
	Tennessee 41,596 3.92
	Texas 42,250 2.91
	Utah 10,000 0.97
	Vermont 3,500 0.75
	Virginia 11,500 2.58
	Washington 68,300 1.25
	West Virginia 1,500 2.87
	Wisconsin 21,325 1.47
State	Contributions	Deaths
Alaska	0	2.24
Arizona	2772	3.53
California	17000	3.25
Colorado	100	1.51
Delaware	100	3.09
Georgia	3750	3.93
Hawaii	5250	0.07
Illinois	18000	1.14
Indiana	3050	3.29
Iowa	14753	0.71
Kansas	8650	2.78
Louisiana	2796	10.16
Maine	5000	0.9
Michigan	800	5.06
Minnesota	500	0.82
Mississippi	12500	7.46
Missouri	7350	4.64
Montana	2534	0.76
Nevada	15500	3.07
New Mexico	4500	2.98
New York	18000	4.12
North Carolina	3750	3.87
North Dakota	7500	0.93
Ohio	3600	3.54
Oklahoma	500	3.64
Oregon	11250	1.05
Pennsylvania	21812	3.97
Rhode Island	13875	0.57
South Carolina	500	5.41
South Dakota	2500	0.68
Tennessee	41596	3.92
Texas	42250	2.91
Utah	10000	0.97
Vermont	3500	0.75
Virginia	11500	2.58
Washington	68300	1.25
West Virginia	1500	2.87
Wisconsin	21325	1.47
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">

	<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
	<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

	<style>
	body {
	font: 11px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	.tooltip {
	position: absolute;
	width: 2000px;
	height: 1000px;
	pointer-events: none;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	/*
	* value accessor - returns the value to encode for a given data object.
	* scale - maps value to a visual display encoding, such as a pixel position.
	* map function - maps from data value to display value
	* axis - sets up axis
	*/

	// setup x
	var xValue = function(d) { return d.Contributions;}, // data -> value
	xScale = d3.scale.linear().range([0, width]), // value -> display
	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");

	// setup y
	var yValue = function(d) { return d.Deaths;}, // data -> value
	yScale = d3.scale.linear().range([height, 0]), // value -> display
	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	// setup fill color
	var cValue = function(d) { return d.State;},
	color = d3.scale.category10();

	// add the graph canvas to the body of the webpage
	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 + ")");

	// add the tooltip area to the webpage
	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// load data
	d3.tsv("data.tsv", function(error, data) {

	// change string (from CSV) into number format
	data.forEach(function(d) {
	d.Contributions = +d.Contributions;
	d.Deaths = +d.Deaths;
	// console.log(d);
	});

	// don't want dots overlapping axis, so add in buffer to data domain
	xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
	yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

	// x-axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Conntributions");

	// y-axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Deaths");

	// draw dots
	svg.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", 3.5)
	.attr("cx", xMap)
	.attr("cy", yMap)
	.style("fill", function(d) { return color(cValue(d));})
	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(200)
	.style("opacity", .9);
	tooltip.html(d["State"] + "<br/> (" + xValue(d)
	+ ", " + yValue(d) + ")")
	.style("left", (d3.event.pageX + 5) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	});

	// draw legend
	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) {
	return "translate("+ (i * 20 + 137) + ", 6)";
	});

	// draw legend colored rectangles
	var boxSize = 17;
	legend.append("rect")
	.attr("x", 0)
	.attr("width", boxSize)
	.attr("height", boxSize)
	.style("fill", color);

	// draw legend text
	legend.append("text")
	.attr("x", -8.2)
	.attr("y", 19)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.attr("transform","rotate(-43)")
	.text(function(d) { return d;})
	});

	</script>
	</body>
	</html>