jashcny/guncrime.csv

## guncrime.csv

          
            District
            State
            GunDeaths
            Ownership
            DeathRate

            
              West
              Alaska
              144
              61.7
              19.8

            
              South
              Alabama
              860
              48.9
              17.6

            
              West
              Arizona
              941
              32.3
              14.1

            
              South
              Arkansas
              501
              58
              16.8

            
              West
              California
              3026
              20.1
              7.7

            
              West
              Colorado
              619
              34.3
              11.5

            
              Northeast
              Connecticut
              161
              16.6
              4.4

            
              South
              Delaware
              100
              5.3
              10.3

            
              South
              Florida
              2442
              32.5
              11.9

            
              South
              Georgia
              1184
              31.6
              12.6

            
              West
              Hawaii
              38
              45.1
              2.6

            
              West
              Idaho
              227
              57
              14.1

            
              Midwest
              Illinois
              1117
              26.2
              8.6

            
              Midwest
              Indiana
              857
              33.8
              13

            
              Midwest
              Iowa
              253
              33.8
              8

            
              Midwest
              Kansas
              331
              32.3
              11.4

            
              South
              Kentucky
              622
              42.4
              13.7

            
              South
              Louisiana
              886
              44.5
              19.3

            
              Northeast
              Maine
              158
              22.6
              10.9

            
              South
              Maryland
              578
              20.7
              9.7

            
              Northeast
              Massachusetts
              213
              22.6
              3.1

            
              Midwest
              Michigan
              1190
              28.8
              12

            
              Midwest
              Minnesota
              427
              36.7
              7.6

            
              South
              Mississippi
              525
              42.8
              17.8

            
              Midwest
              Missouri
              880
              27.1
              14.4

            
              West
              Montana
              172
              52.3
              16.7

            
              Midwest
              Nebraska
              168
              19.8
              9

            
              West
              Nevada
              395
              37.5
              13.8

            
              South
              New Hampshire
              93
              14.4
              6.4

            
              Northeast
              New Jersey
              506
              11.3
              5.7

            
              West
              New Mexico
              326
              49.9
              15.5

            
              Northeast
              New York
              863
              10
              4.2

            
              South
              North Carolina
              1223
              28.7
              12.1

            
              Midwest
              North Dakota
              86
              47.9
              11.8

            
              Midwest
              Ohio
              1289
              19.6
              11

            
              South
              Oklahoma
              632
              31.2
              16.5

            
              West
              Oregon
              463
              26.6
              11

            
              Northeast
              Pennsylvania
              1451
              27.1
              11.2

            
              Northeast
              Rhode Island
              56
              5.8
              5.2

            
              South
              South Carolina
              745
              44.4
              15.2

            
              Midwest
              South Dakota
              80
              35
              10

            
              South
              Tennessee
              1030
              39.4
              15.4

            
              South
              Texas
              2778
              35.7
              10.6

            
              West
              Utah
              339
              31.9
              12.6

            
              Northeast
              Vermont
              65
              28.8
              9.2

            
              South
              Virginia
              833
              29.3
              10.2

            
              West
              Washington
              632
              27.7
              8.7

            
              South
              West Virginia
              280
              54
              14.3

            
              Midwest
              Wisconsin
              570
              34.7
              9.7

            
              West
              Wyoming
              102
              53.8
              16.7

## index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Gun violence</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

		@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic);
    @import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-family: 'Lato', sans-serif;
				font-size: 30px;
				margin-left: 400px;
				margin-bottom: 50px;
			}

			p {
				font-family: 'Roboto', sans-serif;
				font-size: 16px;
				margin-left: 240px;
			}

			#p1 {
         margin-left: 240px;
			}


			#source {
         margin-top: 50px;
			}

			svg {
				background-color: rgb(238,238,238)	;
				margin-left: 255px;
				margin-top: 40px;
				margin-bottom: 100px;
			}


			circle:hover {
				stroke: white;
				stroke-width: 3px;
			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<h1>Gun Death Rates VS. Gun Ownership By State</h1>

		<p id="p1">Notes:</p>
		<p>(1) Each bubble in this chart represents a state, with gun ownership and overall gun death rates plotted on the xAxis and yAxis.</p>
		<p>(2) Gun deaths are the annual average rate per 100,000 residents from 2004 through 2010, provided by the CDC.</p>
		<p>(3) Ownership rates are from a randomized survey conducted in 2013 by Harvard University. </p>
		<p>(4) The size of state bubbles correspond to numbers of overall gun deaths.
		<p id="source">Sources:</p>
		<p> U.S. Centers for Disease Control and Prevention; “Gun ownership and social gun culture,” Injury Prevention, Kalesan et al; The Oregonian.</p>
		<script type="text/javascript">
		// Scott is "cheating" and not using the full pattern for margins.
		// It is better to use the object style with margin.top, margin.right, etc.

			var fullWidth = 950;
			var fullHeight =730;

			var margin = {top:50, left:100, right:60, bottom: 70};  //Top, right, bottom, left

			// what do you need to do to make the width and height for the chart?
			var height = fullHeight - margin.top - margin.bottom // minus what?
			var width = fullWidth -margin.left - margin.right// minus what?

 // fix this to a nice value.

			// fill in the margin values here.
			var xScale = d3.scale.linear()
								.range([0, width]);

			// top to bottom:
			var yScale = d3.scale.linear()
								.range([ height,0 ]);


			var sizeScale = d3.scale.linear()
		    	      .range([6,36]);

			//  Custom tick count if you want it.
			// Create your axes here.
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							 // fix this to a good number of ticks for your scale later.
							.tickFormat(function(d) {
								return d + "%"
							});


			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")


			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullWidth)
						.attr("height", fullHeight)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


			d3.csv("guncrime.csv", function(data) {

				// look at the data file and pick 2 columns to contrast with each other.

				xScale.domain([
					d3.min(data, function(d) {
						return +d.Ownership;
						// pick a data value to plot on x axis
					})-1,
					d3.max(data, function(d){
						return +d.Ownership;
					})+1
				]);

				yScale.domain([
					d3.min(data, function(d) {
						return +d.DeathRate;
						// pick a data value to plot for y axis

					})-1,
					d3.max(data,function(d){
						return +d.DeathRate;
					})+1
				]);


					sizeScale.domain(
						d3.extent(data, function(d) {
							return +d.GunDeaths;
							// pick a data value to plot on x axis
						}));

				var circles = svg.selectAll("circle")
						.data(data)
						.enter()
						.append("circle")
						.classed("dots",true);
							                                      	// fill in the rest of the data, enter, append here.

				// add a class to the circles - ".dots".

				// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

				circles.attr("cx", function(d) {
					return xScale(+d.Ownership);
						// return the value to use for your x scale here
					})
					.attr("cy", function(d) {
						return yScale(+d.DeathRate);
						// return the value to use for your y scale here
					})
					.attr("r",function(d) {
       return sizeScale(+d.GunDeaths);
})

	// you might want to increase your dotRadius
					.style("fill", function(d){
						if (d.District === "Northeast") {
							return "rgba(17,179,240,0.8)";
						} else if (d.District === "South") {
							return "rgba(255,110,101,0.8)";
						} else if (d.District === "Midwest") {
							return "rgba(64,187,126,0.8)";
						} else {
							return "rgba(255,204,1,0.8)";
							}
					})
					// add a fill rule with a special case for one of the countries
					.append("title")
					.text(function(d) {
						return d.State + "'s overall gun death rate is " + d.DeathRate + " per 100,000 population" +", and " + "the gun ownership is " + d.Ownership +"%";
						// fill in a text string here for your cheap tooltip
					});

				// fix these translates so they use your margin and height width as needed
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);
						// fill in the name of your xaxis function here ).

				svg.append("g")
					.attr("class", "y axis")
					//.attr("transform", "translate(" + (padding[3]) + ",0)")
					.call( yAxis);
						// fill in the name of your yaxis function here).

				svg.append("text")
	     	.attr("class", "xlabel")
	     	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
	                         (height + margin.bottom) + ")")
	     	.style("text-anchor", "middle")
	     	.attr("dy", "-20")
				.attr("dx","-70")
				.attr("font-size","15px")
	    	.text("Gun Ownership");

				svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 20 - margin.left) // you may need to adjust this
        .attr("x", 20 - (height / 2)) // you may need to adjust
        .attr("dy", "1em")
				.attr("font-size","15px")
        .style("text-anchor", "middle")
        .text("Overall gun death rate");

        svg.append("circle")
				   .attr("cx",60)
					 .attr("cy",40)
					 .style("fill","rgba(17,179,240,0.8)")
					 .attr("r",6)

         svg.append("text")
				 .attr("x",75)
				 .attr("y",45)
				 .attr("font-size","16px")
				 .attr("font-weight","bold")
				 .style("text-anchor", "left")
				 .text("Northeast");

				 svg.append("circle")
 				   .attr("cx",60)
 					 .attr("cy",70)
					 .style("fill","rgba(255,110,101,0.8)")
 					 .attr("r",6)

          svg.append("text")
 				 .attr("x",75)
 				 .attr("y",75)
 				 .attr("font-size","16px")
 				 .attr("font-weight","bold")
 				 .style("text-anchor", "left")
 				 .text("South");

				 	svg.append("circle")
						 .attr("cx",60)
						 .attr("cy",100)
						 .attr("r",6)
						 .style("fill","rgba(64,187,126,0.8)")

					 svg.append("text")
					 .attr("x",75)
					 .attr("y",105)
					 .attr("font-size","16px")
					 .attr("font-weight","bold")
					 .style("text-anchor", "left")
					 .text("Midwest");

					 svg.append("circle")
							.attr("cx",60)
							.attr("cy",130)
							.attr("r",6)
							.style("fill","rgba(255,204,1,0.8)")

						svg.append("text")
						.attr("x",75)
						.attr("y",135)
						.attr("font-size","16px")
						.attr("font-weight","bold")
						.style("text-anchor", "left")
						.text("West");

			});


		</script>

	</body>
</html>
District	State	GunDeaths	Ownership	DeathRate
West	Alaska	144	61.7	19.8
South	Alabama	860	48.9	17.6
West	Arizona	941	32.3	14.1
South	Arkansas	501	58	16.8
West	California	3026	20.1	7.7
West	Colorado	619	34.3	11.5
Northeast	Connecticut	161	16.6	4.4
South	Delaware	100	5.3	10.3
South	Florida	2442	32.5	11.9
South	Georgia	1184	31.6	12.6
West	Hawaii	38	45.1	2.6
West	Idaho	227	57	14.1
Midwest	Illinois	1117	26.2	8.6
Midwest	Indiana	857	33.8	13
Midwest	Iowa	253	33.8	8
Midwest	Kansas	331	32.3	11.4
South	Kentucky	622	42.4	13.7
South	Louisiana	886	44.5	19.3
Northeast	Maine	158	22.6	10.9
South	Maryland	578	20.7	9.7
Northeast	Massachusetts	213	22.6	3.1
Midwest	Michigan	1190	28.8	12
Midwest	Minnesota	427	36.7	7.6
South	Mississippi	525	42.8	17.8
Midwest	Missouri	880	27.1	14.4
West	Montana	172	52.3	16.7
Midwest	Nebraska	168	19.8	9
West	Nevada	395	37.5	13.8
South	New Hampshire	93	14.4	6.4
Northeast	New Jersey	506	11.3	5.7
West	New Mexico	326	49.9	15.5
Northeast	New York	863	10	4.2
South	North Carolina	1223	28.7	12.1
Midwest	North Dakota	86	47.9	11.8
Midwest	Ohio	1289	19.6	11
South	Oklahoma	632	31.2	16.5
West	Oregon	463	26.6	11
Northeast	Pennsylvania	1451	27.1	11.2
Northeast	Rhode Island	56	5.8	5.2
South	South Carolina	745	44.4	15.2
Midwest	South Dakota	80	35	10
South	Tennessee	1030	39.4	15.4
South	Texas	2778	35.7	10.6
West	Utah	339	31.9	12.6
Northeast	Vermont	65	28.8	9.2
South	Virginia	833	29.3	10.2
West	Washington	632	27.7	8.7
South	West Virginia	280	54	14.3
Midwest	Wisconsin	570	34.7	9.7
West	Wyoming	102	53.8	16.7
	<!DOCTYPE html>
	<!-- A modified example from Scott Murray's Knight d3 course. -->

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Gun violence</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic);
	@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-family: 'Lato', sans-serif;
	font-size: 30px;
	margin-left: 400px;
	margin-bottom: 50px;
	}

	p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin-left: 240px;
	}

	#p1 {
	margin-left: 240px;
	}


	#source {
	margin-top: 50px;
	}

	svg {
	background-color: rgb(238,238,238) ;
	margin-left: 255px;
	margin-top: 40px;
	margin-bottom: 100px;
	}


	circle:hover {
	stroke: white;
	stroke-width: 3px;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Gun Death Rates VS. Gun Ownership By State</h1>

	<p id="p1">Notes:</p>
	<p>(1) Each bubble in this chart represents a state, with gun ownership and overall gun death rates plotted on the xAxis and yAxis.</p>
	<p>(2) Gun deaths are the annual average rate per 100,000 residents from 2004 through 2010, provided by the CDC.</p>
	<p>(3) Ownership rates are from a randomized survey conducted in 2013 by Harvard University. </p>
	<p>(4) The size of state bubbles correspond to numbers of overall gun deaths.
	<p id="source">Sources:</p>
	<p> U.S. Centers for Disease Control and Prevention; “Gun ownership and social gun culture,” Injury Prevention, Kalesan et al; The Oregonian.</p>
	<script type="text/javascript">
	// Scott is "cheating" and not using the full pattern for margins.
	// It is better to use the object style with margin.top, margin.right, etc.

	var fullWidth = 950;
	var fullHeight =730;

	var margin = {top:50, left:100, right:60, bottom: 70}; //Top, right, bottom, left

	// what do you need to do to make the width and height for the chart?
	var height = fullHeight - margin.top - margin.bottom // minus what?
	var width = fullWidth -margin.left - margin.right// minus what?

	// fix this to a nice value.

	// fill in the margin values here.
	var xScale = d3.scale.linear()
	.range([0, width]);

	// top to bottom:
	var yScale = d3.scale.linear()
	.range([ height,0 ]);


	var sizeScale = d3.scale.linear()
	.range([6,36]);

	// Custom tick count if you want it.
	// Create your axes here.
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	// fix this to a good number of ticks for your scale later.
	.tickFormat(function(d) {
	return d + "%"
	});


	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")


	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullWidth)
	.attr("height", fullHeight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	d3.csv("guncrime.csv", function(data) {

	// look at the data file and pick 2 columns to contrast with each other.

	xScale.domain([
	d3.min(data, function(d) {
	return +d.Ownership;
	// pick a data value to plot on x axis
	})-1,
	d3.max(data, function(d){
	return +d.Ownership;
	})+1
	]);

	yScale.domain([
	d3.min(data, function(d) {
	return +d.DeathRate;
	// pick a data value to plot for y axis

	})-1,
	d3.max(data,function(d){
	return +d.DeathRate;
	})+1
	]);


	sizeScale.domain(
	d3.extent(data, function(d) {
	return +d.GunDeaths;
	// pick a data value to plot on x axis
	}));

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.classed("dots",true);
	// fill in the rest of the data, enter, append here.

	// add a class to the circles - ".dots".

	// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

	circles.attr("cx", function(d) {
	return xScale(+d.Ownership);
	// return the value to use for your x scale here
	})
	.attr("cy", function(d) {
	return yScale(+d.DeathRate);
	// return the value to use for your y scale here
	})
	.attr("r",function(d) {
	return sizeScale(+d.GunDeaths);
	})

	// you might want to increase your dotRadius
	.style("fill", function(d){
	if (d.District === "Northeast") {
	return "rgba(17,179,240,0.8)";
	} else if (d.District === "South") {
	return "rgba(255,110,101,0.8)";
	} else if (d.District === "Midwest") {
	return "rgba(64,187,126,0.8)";
	} else {
	return "rgba(255,204,1,0.8)";
	}
	})
	// add a fill rule with a special case for one of the countries
	.append("title")
	.text(function(d) {
	return d.State + "'s overall gun death rate is " + d.DeathRate + " per 100,000 population" +", and " + "the gun ownership is " + d.Ownership +"%";
	// fill in a text string here for your cheap tooltip
	});

	// fix these translates so they use your margin and height width as needed
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	// fill in the name of your xaxis function here ).

	svg.append("g")
	.attr("class", "y axis")
	//.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call( yAxis);
	// fill in the name of your yaxis function here).

	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
	(height + margin.bottom) + ")")
	.style("text-anchor", "middle")
	.attr("dy", "-20")
	.attr("dx","-70")
	.attr("font-size","15px")
	.text("Gun Ownership");

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 20 - margin.left) // you may need to adjust this
	.attr("x", 20 - (height / 2)) // you may need to adjust
	.attr("dy", "1em")
	.attr("font-size","15px")
	.style("text-anchor", "middle")
	.text("Overall gun death rate");

	svg.append("circle")
	.attr("cx",60)
	.attr("cy",40)
	.style("fill","rgba(17,179,240,0.8)")
	.attr("r",6)

	svg.append("text")
	.attr("x",75)
	.attr("y",45)
	.attr("font-size","16px")
	.attr("font-weight","bold")
	.style("text-anchor", "left")
	.text("Northeast");

	svg.append("circle")
	.attr("cx",60)
	.attr("cy",70)
	.style("fill","rgba(255,110,101,0.8)")
	.attr("r",6)

	svg.append("text")
	.attr("x",75)
	.attr("y",75)
	.attr("font-size","16px")
	.attr("font-weight","bold")
	.style("text-anchor", "left")
	.text("South");

	svg.append("circle")
	.attr("cx",60)
	.attr("cy",100)
	.attr("r",6)
	.style("fill","rgba(64,187,126,0.8)")

	svg.append("text")
	.attr("x",75)
	.attr("y",105)
	.attr("font-size","16px")
	.attr("font-weight","bold")
	.style("text-anchor", "left")
	.text("Midwest");

	svg.append("circle")
	.attr("cx",60)
	.attr("cy",130)
	.attr("r",6)
	.style("fill","rgba(255,204,1,0.8)")

	svg.append("text")
	.attr("x",75)
	.attr("y",135)
	.attr("font-size","16px")
	.attr("font-weight","bold")
	.style("text-anchor", "left")
	.text("West");

	});


	</script>

	</body>
	</html>