All examples By author By category About

abbhakan

Full window Github gist

Assignment 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Greenhouse gas emissions</title>
    <link rel="stylesheet" href="d3.slider.css" />
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <script type="text/javascript" src="d3.slider.js"></script>
		<style type="text/css">

body {
				background-color: white;
			}

svg {
				background-color: white;
			}

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

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

.y.axis path,
			.y.axis line {
				opacity: 0;
			}

.slider {
        float: left;
        width: 1000px;
        margin-left: 200px;
      }

.chart {
        float: left;
        width:1200px;
      }

.countries {
        float: left;
        width: 100px;
      }

.flags {
				float: left;
				width: 60px;
			}

.selectedYear {
        display: block;
        position: absolute;
        top:400px;
        left:600px;
        font-size: 7em;
      }

</style>
	</head>
	<body>

<h1>Greenhouse gas emissions</h1>

<p>Greenhouse gas emissions from 1990 - 2012 by OECD country. The unit is in houndred thousands tonnes of CO2 equivalent. Source: <a href="https://www.oecd-ilibrary.org/environment/data/oecd-environment-statistics/greenhouse-gas-emissions_data-00594-en">OECD</a>, 2015</p>

var w = 1000;
      var h = 800;
			var padding = [ 20, 10, 20, 100 ];  //Top, right, bottom, left
      var barPadding = 5;
			var offsetX = 140;
			//var barMax = 8000;
			var color = "Blue";
			var focusColor = "Magenta";
			var borderColor = "Black";
			var baseUrl = "https://localhost:99/module4/assignment/bb491f4a6945d9c6b169/";

// Check if running on localhost or not
			var host = window.location.host;
			if (host.indexOf("localhost") == -1)
			{
					baseUrl = "https://bl.ocks.org/abbhakan/raw/bb491f4a6945d9c6b169/";
			}

var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

var xScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("top");

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

var svg = d3.select("#myChart")
          .append("svg")
          .attr("width", w)
          .attr("height", h);

var myFlags = d3.select("#myFlags")
          .append("svg")
          .attr("width", 60)
          .attr("height", h);

function draw(year) {

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

data.sort(function(a, b) {
  					//return d3.descending(a["1990"], b["1990"]);

//If your numeric values aren't sorting properly,
  					//try commenting out the line above, and instead using:
  					//
  					return d3.descending(+a[year], +b[year]);
  					//
  					//Data coming in from the CSV is saved as strings (text),
  					//so the + signs here force JavaScript to treat those
  					//strings instead as numeric values, thereby fixing the
  					//sort order (hopefully!).
  				});

widthScale.domain([ 0, d3.max(data, function(d) {
						return +d[year];
					}) ]);

heightScale.domain(data.map(function(d) { return d.Country; } ));

xScale.domain([ 0, d3.max(data, function(d) {
						return +d[year]/1000;
					}) ]);

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

var labels = svg.selectAll("text")
            .data(data);

var imgs = myFlags.selectAll("images")
						.data(data);

var imgBorders = myFlags.selectAll("rect")
						.data(data);

// enter data
          rects.enter().append("rect")
						.attr("id", function(d,i) {
							return "rect" + i;
						})
  				  .attr("x", offsetX)
  					.attr("y", function(d) {
							return heightScale(d.Country).toString();
  					})
  					.attr("width", function(d) {
							return widthScale(d[year]);
  					})
  					.attr("height", heightScale.rangeBand())
            .style("fill", color)
						.on("mouseover", function(d,i) { setFocus(i);})
						.on("mouseout", function(d,i) { unFocus(i);})
            .append("title")
  					.text(function(d) {
  						return d.Country + "'s emission is " + d3.round(d[year]/1000);
  					});

labels.enter().append("text")
             .text(function(d) {
                 return d3.round(d[year]/1000);
             })
						.attr("height", heightScale.rangeBand())
						.style("fill", color)
						.style("text-anchor", "end")
						.on("mouseover", function(d,i) { setFocus(i);})
						.on("mouseout", function(d,i) { unFocus(i);})
						.attr("id", function(d,i) {
							return "label" + i;
							})
             .attr("x", function(d, i) {
               return w - 870;
             })
             .attr("y", function(d,i) {
								return heightScale(d.Country) + 15;
             });

svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(" + (padding[3] + offsetX - 100) + "," + padding[0] + ")")
						.call(xAxis);

svg.append("g")
						.attr("class", "y axis")
						.style("fill", color)
						.attr("transform", "translate(" + (padding[3] - 5 ) + ",0)")
						.call(yAxis);

imgs.enter().append("svg:image")
								.style("float", "left")
								.attr("height", heightScale.rangeBand())
								.on("mouseover", function(d,i) { setFocus(i);})
								.on("mouseout", function(d,i) { unFocus(i);})
								.attr("id", function(d,i) {
									return "img" + i;
								})
                .attr("xlink:href", function(d, i) { return baseUrl + "" + d.Country + "S.png";})
								.attr("width", "30")
                .attr("height", "20")
                .attr("x", "30")
								.attr("y", function(d, i) {
	                return heightScale(d.Country);;
	              });

imgBorders.enter().append("rect")
							.attr("id", function(d,i) {
								return "border" + i;
							})
	  				  .attr("x", "30")
	  					.attr("y", function(d, i) {
								return heightScale(d.Country);
	  					})
							.attr("width", "30")
              .attr("height", "20")
	            .style("stroke", borderColor)
							.style("fill", "none")
							.on("mouseover", function(d,i) { setFocus(i);})
							.on("mouseout", function(d,i) { unFocus(i);});

// remove data
          rects.exit().remove();
          labels.exit().remove();
					imgs.exit().remove();
					imgBorders.exit().remove();

// update data
          rects
            .transition()
            .duration(750)
						.attr("y", function(d) {
							return heightScale(d.Country);
  					})
            .attr("width", function(d) {
							return widthScale(d[year]);
  					})
            .select("title").text(function(d) {
              return d.Country + "'s emission is " + d3.round(d[year]/1000);
            });

labels
            .text(function(d) {
                return d3.round(d[year]/1000);
            });

svg.selectAll("x.axis")
		            .call(xAxis);

svg.selectAll("y.axis")
		            .call(yAxis);

imgs
						.attr("xlink:href", function(d, i) { return baseUrl + "" + d.Country + "S.png";});

})

};

function setFocus(index)
			{
				var rectName = "rect" + index;
				var labelName = "label" + index;
				var countryName = "country" + index;
				var imgName = "img" + index;
				var borderName = "border" + index;
				d3.select("#" + rectName).style("fill", focusColor)
				d3.select("#" + labelName).style("fill", focusColor)
				d3.select("#" + imgName).style("fill", focusColor)
				d3.select("#" + borderName).style("stroke", focusColor)
			}

function unFocus(index)
			{
				var rectName = "rect" + index;
				var labelName = "label" + index;
				var countryName = "country" + index;
				var imgName = "img" + index;
				var borderName = "border" + index;
				d3.select("#" + rectName).style("fill", color)
				d3.select("#" + labelName).style("fill", color)
				d3.select("#" + imgName).style("fill", color)
				d3.select("#" + borderName).style("stroke", borderColor)
			}

function initAxis() {

}

function onLoad(year) {
				initAxis();
				draw(year);
			}

function update(value) {
        draw(value);
      };

var startYear = "1990";
      window.onload = onLoad(startYear);
      d3.select("#mySlidertext").text(startYear);

d3.select("#mySlider").call(d3.slider().axis(true).min(1990).max(2012).step(1).on("slide", function(evt, value) {
        d3.select("#mySlidertext").text(value);
        update(value.toString());
      }));

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js