jashcny/emission.csv

## emission.csv

          
            species
            emissions

            
              Beef Cattle
              2495

            
              Dairy Cattle
              2128

            
              Pigs
              668

            
              Buffalo
              618

            
              Chickens
              612

            
              Small Ruminants
              474

            
              Other Poultry
              72

## index.html
<!DOCTYPE html>
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Global estimates of emissions by species</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;
			}

			svg {
				background-color: white;
				margin-left: 350px;
				margin-top: 50px;
			}

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

      #text {
				font-family: 'Lato', sans-serif;
				font-size: 20px;
				margin-left: 300px;
				margin-right: 200px;
				text-align: justify;
			}

      #notes {
				font-family: 'Lato', sans-serif;
				font-size: 16px;
				font-style: italic;
				margin-left: 300px;
				margin-top: 40px;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
			}

			rect:hover {
				fill: #A21D21 ;
			}


		</style>
	</head>
	<body>

		<h1>Global estimates of emissions by species</h1>

    <div id="text">
    <p>According to a report from Environmental Working Group, if a four-person family skips meat and cheese one day a week, it's like taking car off the road for five weeks.</p>
		<p>The process of rearing, processing, transportation and cooking livestock products affect climate change by releasing carbon dioxide (CO2), methane (CH4) and nitrous oxide (N2O).</p>
		<p>The bar chart below shows the global estimates of emissions by species. It is obviously that Beef cattle produces the largest amounts
		of emissions. </p>
		</div>
		<div id="notes">
	  <p>Notes:</p>
		<p>(1) This graph icludes emissions attributed to edible products and to other goods and services, such as draught power and wool.</p>
		<p>(2) Beef cattle producing meat and non-edible outputs.</p>
		<p>(3) Dairy cattle producing milk and meat as well as non-edible outputs.</p>
		<p>(4) Source: Global Livestock Environmental Assessment Model</p>
  	</div>


		<script type="text/javascript">


			var height = 400;
			var width = 800;
			var margin = {top:20,right:10,bottom:30,left:0};


			var widthScale = d3.scale.linear()
											.range([ margin.left, width-margin.right-margin.left-300 ]);


							var xAxis = d3.svg.axis()
															.scale(widthScale)
															.orient("bottom")
															.ticks(8);

			// Set up the range here - my output sizes for my bars - from 0 to width.


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


			d3.csv("emission.csv", function(error, data) {

				if (error) {
					console.log(error);
				}

				data.sort(function(a, b) {
					return d3.descending(+a.emissions, +b.emissions); // make numeric
				});

				// set up the domain here, from the data i read in. I'm starting at 0, not min.
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.emissions;
				}) ]);

				var rects = svg.selectAll("rect")
						.data(data)
						.enter()
						.append("rect");

				rects.attr("x", 0)
					.attr("y", function(d, i) {
							// this is a hack to space the bars - we can do it was axes later.
						return i * 55;   // just spacing the bars - notice from the top!
					})
					.attr("width", function(d) {
						return widthScale(+d.emissions); // use your scale here:
					})
					.attr("height", 20)
					.append("title")  // this is a simple (bad) tooltip
					.text(function(d) {
						return d.species + "'s Global estimates of emissions: " + d.emissions + " Million tones (CO2 -eq) ";
					});

					var label = svg.selectAll("text")
				             					.data(data)
				           						.enter()
				           					  	.append("text")
				             					.attr("class", "labels");

				       			label.attr("x", function (d) {
				                		 console.log("in text: " + d);
				                 	 return (widthScale(d.emissions) + 10);
				             })
				          		     .attr("y", function (d, i) {
				               		  return i * 55 + 15;
				             })
				         		     .text(function (d) {
				                 return d.species + " : " + d.emissions + " million tonnes（CO2 -eq）";
				             })
				          			   .attr("font-family", "sans-serif")
				          			   .attr("font-size", "12px")
				        				 .attr("fill", "#000000");


					d3.selectAll("rect")
					                        .attr('fill',function(d,i){
					                        if (i == 0){
					                            return "#005B82";
					                        }
					                        else {
					                            return "#A6DDF8";
					                        }});


            	svg.append("g")
            		.attr("class","x axis")
            		.attr("transform", "translate(0," + (height - margin.bottom) + ")")
            		.call(xAxis);

					                });


		</script>

	</body>
</html>
	species	emissions
	Beef Cattle	2495
	Dairy Cattle	2128
	Pigs	668
	Buffalo	618
	Chickens	612
	Small Ruminants	474
	Other Poultry	72
	<!DOCTYPE html>
	<!-- Modified version of Scott Murray's file from Knight D3 course -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Global estimates of emissions by species</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;
	}

	svg {
	background-color: white;
	margin-left: 350px;
	margin-top: 50px;
	}

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

	#text {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	margin-left: 300px;
	margin-right: 200px;
	text-align: justify;
	}

	#notes {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-style: italic;
	margin-left: 300px;
	margin-top: 40px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	}

	rect:hover {
	fill: #A21D21 ;
	}


	</style>
	</head>
	<body>

	<h1>Global estimates of emissions by species</h1>

	<div id="text">
	<p>According to a report from Environmental Working Group, if a four-person family skips meat and cheese one day a week, it's like taking car off the road for five weeks.</p>
	<p>The process of rearing, processing, transportation and cooking livestock products affect climate change by releasing carbon dioxide (CO2), methane (CH4) and nitrous oxide (N2O).</p>
	<p>The bar chart below shows the global estimates of emissions by species. It is obviously that Beef cattle produces the largest amounts
	of emissions. </p>
	</div>
	<div id="notes">
	<p>Notes:</p>
	<p>(1) This graph icludes emissions attributed to edible products and to other goods and services, such as draught power and wool.</p>
	<p>(2) Beef cattle producing meat and non-edible outputs.</p>
	<p>(3) Dairy cattle producing milk and meat as well as non-edible outputs.</p>
	<p>(4) Source: Global Livestock Environmental Assessment Model</p>
	</div>


	<script type="text/javascript">


	var height = 400;
	var width = 800;
	var margin = {top:20,right:10,bottom:30,left:0};




	var widthScale = d3.scale.linear()
	.range([ margin.left, width-margin.right-margin.left-300 ]);


	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom")
	.ticks(8);

	// Set up the range here - my output sizes for my bars - from 0 to width.


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


	d3.csv("emission.csv", function(error, data) {

	if (error) {
	console.log(error);
	}

	data.sort(function(a, b) {
	return d3.descending(+a.emissions, +b.emissions); // make numeric
	});

	// set up the domain here, from the data i read in. I'm starting at 0, not min.
	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.emissions;
	}) ]);

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", 0)
	.attr("y", function(d, i) {
	// this is a hack to space the bars - we can do it was axes later.
	return i * 55; // just spacing the bars - notice from the top!
	})
	.attr("width", function(d) {
	return widthScale(+d.emissions); // use your scale here:
	})
	.attr("height", 20)
	.append("title") // this is a simple (bad) tooltip
	.text(function(d) {
	return d.species + "'s Global estimates of emissions: " + d.emissions + " Million tones (CO2 -eq) ";
	});

	var label = svg.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("class", "labels");

	label.attr("x", function (d) {
	console.log("in text: " + d);
	return (widthScale(d.emissions) + 10);
	})
	.attr("y", function (d, i) {
	return i * 55 + 15;
	})
	.text(function (d) {
	return d.species + " : " + d.emissions + " million tonnes（CO2 -eq）";
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("fill", "#000000");


	d3.selectAll("rect")
	.attr('fill',function(d,i){
	if (i == 0){
	return "#005B82";
	}
	else {
	return "#A6DDF8";
	}});


	svg.append("g")
	.attr("class","x axis")
	.attr("transform", "translate(0," + (height - margin.bottom) + ")")
	.call(xAxis);

	});


	</script>

	</body>
	</html>