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: lightyellow;
				margin-left: 400px;
				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;
			}

		</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 = 355;
			var width = 600;

			// Set up the range here - my output sizes for my bars - from 0 to width.
			var widthScale = d3.scale.linear()
								.range([ 0, 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", 25)
					.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)";
					});


					d3.selectAll("rect")
					                        .attr('fill',function(d,i){
					                        if (i == 0){
					                            return "#00994B";
					                        }
					                        else {
					                            return "#52BB7A";
					                        }});

					                });


		</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: lightyellow;
	margin-left: 400px;
	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;
	}

	</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 = 355;
	var width = 600;

	// Set up the range here - my output sizes for my bars - from 0 to width.
	var widthScale = d3.scale.linear()
	.range([ 0, 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", 25)
	.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)";
	});


	d3.selectAll("rect")
	.attr('fill',function(d,i){
	if (i == 0){
	return "#00994B";
	}
	else {
	return "#52BB7A";
	}});

	});


	</script>

	</body>
	</html>