Assignment 3

<!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;
			}

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

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

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

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

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

</style>
	</head>
	<body>

var w = 1000;
      var h = 800;
      var barPadding = 5;
			var barMax = 8000;
			var color = "Blue";
			var focusColor = "Magenta";
			var borderColor = "Black";
			var baseUrl = "https://localhost:99/module3/assignment/c77367730574c9cec756/";

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

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

var myCountry = d3.select("#myCountries")
          .append("svg")
          .attr("width", 170)
          .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!).
  				});

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

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

var country = myCountry.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", 0)
  					.attr("y", function(d, i) {
  						return i * (h / data.length);
  					})
  					.attr("width", function(d) {
  						return d[year]/barMax;
  					})
  					.attr("height", h / data.length - barPadding)
            .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", h / data.length - barPadding)
						.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-40;
             })
             .attr("y", function(d, i) {
               return i * (h / data.length) + 20;
             });

country.enter().append("text")
              .text(function(d) {
                return d.Country;
              })
							.attr("height", h / data.length - barPadding)
							.style("fill", color)
							.on("mouseover", function(d,i) { setFocus(i);})
							.on("mouseout", function(d,i) { unFocus(i);})
							.attr("id", function(d,i) {
								return "country" + i;
							})
              .attr("x", function(d, i) {
                return 30;
              })
              .attr("y", function(d, i) {
                return i * (h / data.length) + 20;
              });

imgs.enter().append("svg:image")
								.style("float", "left")
								.attr("height", h / data.length - barPadding)
								.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 i * (h / data.length);
	              });

imgBorders.enter().append("rect")
								.attr("id", function(d,i) {
									return "border" + i;
								})
		  				  .attr("x", "30")
		  					.attr("y", function(d, i) {
		  						return i * (h / data.length);
		  					})
								.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();
          country.exit().remove();
					imgs.exit().remove();
					imgBorders.exit().remove();

// update data
          rects
            .transition()
            .duration(750)
            .attr("width", function(d) {
  						return d[year]/barMax;
  					})
            .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);
            });

country
            .text(function(d) {
              return d.Country;
            });

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("#" + countryName).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("#" + countryName).style("fill", color)
				d3.select("#" + imgName).style("fill", color)
				d3.select("#" + borderName).style("stroke", borderColor)
			}

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

var startYear = "1990";
      window.onload = draw(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