Assignment 4

Australia.png

AustraliaS.png

Austria.png

AustriaS.png

Belgium.png

BelgiumS.png

Canada.png

CanadaS.png

Czech Republic.png

Czech RepublicS.png

d3.slider.css

.d3-slider {
    position: relative;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    border: 1px solid #aaaaaa;
    z-index: 2;
}

.d3-slider-horizontal {
    height: .8em;
}  

.d3-slider-range {
  background:#2980b9;
  left:0px;
  right:0px;
  height: 0.8em;
  position: absolute;
}

.d3-slider-range-vertical {
  background:#2980b9;
  left:0px;
  right:0px;
  position: absolute;
  top:0;
}

.d3-slider-vertical {
    width: .8em;
    height: 100px;
}      

.d3-slider-handle {
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #eee;
    background: linear-gradient(to bottom, #eee 0%, #ddd 100%);
    z-index: 3;
}

.d3-slider-handle:hover {
    border: 1px solid #999999;
}

.d3-slider-horizontal .d3-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.d3-slider-axis {
    position: relative;
    z-index: 1;    
}

.d3-slider-axis-bottom {
    top: .8em;
}

.d3-slider-axis-right {
    left: .8em;
}

.d3-slider-axis path {
    stroke-width: 0;
    fill: none;
}

.d3-slider-axis line {
    fill: none;
    stroke: #aaa;
    shape-rendering: crispEdges;
}

.d3-slider-axis text {
    font-size: 11px;
}

.d3-slider-vertical .d3-slider-handle {
    left: -.25em;
    margin-left: 0;
    margin-bottom: -.6em;      
}

d3.slider.js

/*
    D3.js Slider
    Inspired by jQuery UI Slider
    Copyright (c) 2013, Bjorn Sandvik - http://blog.thematicmapping.org
    BSD license: http://opensource.org/licenses/BSD-3-Clause
*/
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['d3'], factory);
  } else if (typeof exports === 'object') {
    if (process.browser) {
      // Browserify. Import css too using cssify.
      require('./d3.slider.css');
    }
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require('d3'));
  } else {
    // Browser globals (root is window)
    root.d3.slider = factory(root.d3);
  }
}(this, function (d3) {
return function module() {
  "use strict";

  // Public variables width default settings
  var min = 0,
      max = 100,
      step = 0.01,
      animate = true,
      orientation = "horizontal",
      axis = false,
      margin = 50,
      value,
      active = 1,
      snap = false,
      scale;

  // Private variables
  var axisScale,
      dispatch = d3.dispatch("slide", "slideend"),
      formatPercent = d3.format(".2%"),
      tickFormat = d3.format(".0"),
      handle1,
      handle2 = null,
      divRange,
      sliderLength;

  function slider(selection) {
    selection.each(function() {

      // Create scale if not defined by user
      if (!scale) {
        scale = d3.scale.linear().domain([min, max]);
      }

      // Start value
      value = value || scale.domain()[0];

      // DIV container
      var div = d3.select(this).classed("d3-slider d3-slider-" + orientation, true);
      
      var drag = d3.behavior.drag();
      drag.on('dragend', function () {
        dispatch.slideend(d3.event, value);
      })

      // Slider handle
      //if range slider, create two
      // var divRange;

      if (toType(value) == "array" && value.length == 2) {
        handle1 = div.append("a")
          .classed("d3-slider-handle", true)
          .attr("xlink:href", "#")
          .attr('id', "handle-one")
          .on("click", stopPropagation)
          .call(drag);
        handle2 = div.append("a")
          .classed("d3-slider-handle", true)
          .attr('id', "handle-two")
          .attr("xlink:href", "#")
          .on("click", stopPropagation)
          .call(drag);
      } else {
        handle1 = div.append("a")
          .classed("d3-slider-handle", true)
          .attr("xlink:href", "#")
          .attr('id', "handle-one")
          .on("click", stopPropagation)
          .call(drag);
      }
      
      // Horizontal slider
      if (orientation === "horizontal") {

        div.on("click", onClickHorizontal);
        
        if (toType(value) == "array" && value.length == 2) {
          divRange = d3.select(this).append('div').classed("d3-slider-range", true);

          handle1.style("left", formatPercent(scale(value[ 0 ])));
          divRange.style("left", formatPercent(scale(value[ 0 ])));
          drag.on("drag", onDragHorizontal);

          var width = 100 - parseFloat(formatPercent(scale(value[ 1 ])));
          handle2.style("left", formatPercent(scale(value[ 1 ])));
          divRange.style("right", width+"%");
          drag.on("drag", onDragHorizontal);

        } else {
          handle1.style("left", formatPercent(scale(value)));
          drag.on("drag", onDragHorizontal);
        }
        
        sliderLength = parseInt(div.style("width"), 10);

      } else { // Vertical

        div.on("click", onClickVertical);
        drag.on("drag", onDragVertical);
        if (toType(value) == "array" && value.length == 2) {
          divRange = d3.select(this).append('div').classed("d3-slider-range-vertical", true);

          handle1.style("bottom", formatPercent(scale(value[ 0 ])));
          divRange.style("bottom", formatPercent(scale(value[ 0 ])));
          drag.on("drag", onDragVertical);

          var top = 100 - parseFloat(formatPercent(scale(value[ 1 ])));
          handle2.style("bottom", formatPercent(scale(value[ 1 ])));
          divRange.style("top", top+"%");
          drag.on("drag", onDragVertical);

        } else {
          handle1.style("bottom", formatPercent(scale(value)));
          drag.on("drag", onDragVertical);
        }
        
        sliderLength = parseInt(div.style("height"), 10);

      }
      
      if (axis) {
        createAxis(div);
      }


      function createAxis(dom) {

        // Create axis if not defined by user
        if (typeof axis === "boolean") {

          axis = d3.svg.axis()
              .ticks(Math.round(sliderLength / 100))
              .tickFormat(tickFormat)
              .orient((orientation === "horizontal") ? "bottom" :  "right");

        }

        // Copy slider scale to move from percentages to pixels
        axisScale = scale.ticks ? scale.copy().range([0, sliderLength]) : scale.copy().rangePoints([0, sliderLength], 0.5);
          axis.scale(axisScale);

          // Create SVG axis container
        var svg = dom.append("svg")
            .classed("d3-slider-axis d3-slider-axis-" + axis.orient(), true)
            .on("click", stopPropagation);

        var g = svg.append("g");

        // Horizontal axis
        if (orientation === "horizontal") {

          svg.style("margin-left", -margin + "px");

          svg.attr({
            width: sliderLength + margin * 2,
            height: margin
          });

          if (axis.orient() === "top") {
            svg.style("top", -margin + "px");
            g.attr("transform", "translate(" + margin + "," + margin + ")");
          } else { // bottom
            g.attr("transform", "translate(" + margin + ",0)");
          }

        } else { // Vertical

          svg.style("top", -margin + "px");

          svg.attr({
            width: margin,
            height: sliderLength + margin * 2
          });

          if (axis.orient() === "left") {
            svg.style("left", -margin + "px");
            g.attr("transform", "translate(" + margin + "," + margin + ")");
          } else { // right          
            g.attr("transform", "translate(" + 0 + "," + margin + ")");
          }

        }

        g.call(axis);

      }

      function onClickHorizontal() {
        if (toType(value) != "array") {
          var pos = Math.max(0, Math.min(sliderLength, d3.event.offsetX || d3.event.layerX));
          moveHandle(scale.invert ? 
                      stepValue(scale.invert(pos / sliderLength))
                    : nearestTick(pos / sliderLength));
        }
      }

      function onClickVertical() {
        if (toType(value) != "array") {
          var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.offsetY || d3.event.layerY));
          moveHandle(scale.invert ? 
                      stepValue(scale.invert(pos / sliderLength))
                    : nearestTick(pos / sliderLength));
        }
      }

      function onDragHorizontal() {
        if ( d3.event.sourceEvent.target.id === "handle-one") {
          active = 1;
        } else if ( d3.event.sourceEvent.target.id == "handle-two" ) {
          active = 2;
        }
        var pos = Math.max(0, Math.min(sliderLength, d3.event.x));
        moveHandle(scale.invert ? 
                    stepValue(scale.invert(pos / sliderLength))
                  : nearestTick(pos / sliderLength));
      }

      function onDragVertical() {
        if ( d3.event.sourceEvent.target.id === "handle-one") {
          active = 1;
        } else if ( d3.event.sourceEvent.target.id == "handle-two" ) {
          active = 2;
        }
        var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.y))
        moveHandle(scale.invert ? 
                    stepValue(scale.invert(pos / sliderLength))
                  : nearestTick(pos / sliderLength));
      }

      function stopPropagation() {
        d3.event.stopPropagation();
      }

    });

  }

  // Move slider handle on click/drag
  function moveHandle(newValue) {
    var currentValue = toType(value) == "array"  && value.length == 2 ? value[active - 1]: value,
        oldPos = formatPercent(scale(stepValue(currentValue))),
        newPos = formatPercent(scale(stepValue(newValue))),
        position = (orientation === "horizontal") ? "left" : "bottom";
    if (oldPos !== newPos) {

      if (toType(value) == "array" && value.length == 2) {
        value[ active - 1 ] = newValue;
        if (d3.event) {
          dispatch.slide(d3.event, value );
        };
      } else {
        if (d3.event) {
          dispatch.slide(d3.event.sourceEvent || d3.event, value = newValue);
        };
      }

      if ( value[ 0 ] >= value[ 1 ] ) return;
      if ( active === 1 ) {
        if (toType(value) == "array" && value.length == 2) {
          (position === "left") ? divRange.style("left", newPos) : divRange.style("bottom", newPos);
        }

        if (animate) {
          handle1.transition()
              .styleTween(position, function() { return d3.interpolate(oldPos, newPos); })
              .duration((typeof animate === "number") ? animate : 250);
        } else {
          handle1.style(position, newPos);
        }
      } else {
        
        var width = 100 - parseFloat(newPos);
        var top = 100 - parseFloat(newPos);

        (position === "left") ? divRange.style("right", width + "%") : divRange.style("top", top + "%");
        
        if (animate) {
          handle2.transition()
              .styleTween(position, function() { return d3.interpolate(oldPos, newPos); })
              .duration((typeof animate === "number") ? animate : 250);
        } else {
          handle2.style(position, newPos);
        }
      }
    }
  }

  // Calculate nearest step value
  function stepValue(val) {

    if (val === scale.domain()[0] || val === scale.domain()[1]) {
      return val;
    }

    var alignValue = val;
    if (snap) {
      alignValue = nearestTick(scale(val));
    } else{
      var valModStep = (val - scale.domain()[0]) % step;
      alignValue = val - valModStep;

      if (Math.abs(valModStep) * 2 >= step) {
        alignValue += (valModStep > 0) ? step : -step;
      }
    };

    return alignValue;

  }

  // Find the nearest tick
  function nearestTick(pos) {
    var ticks = scale.ticks ? scale.ticks() : scale.domain();
    var dist = ticks.map(function(d) {return pos - scale(d);});
    var i = -1,
        index = 0,
        r = scale.ticks ? scale.range()[1] : scale.rangeExtent()[1];
    do {
        i++;
        if (Math.abs(dist[i]) < r) {
          r = Math.abs(dist[i]);
          index = i;
        };
    } while (dist[i] > 0 && i < dist.length - 1);

    return ticks[index];
  };

  // Return the type of an object
  function toType(v) {
    return ({}).toString.call(v).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
  };

  // Getter/setter functions
  slider.min = function(_) {
    if (!arguments.length) return min;
    min = _;
    return slider;
  };

  slider.max = function(_) {
    if (!arguments.length) return max;
    max = _;
    return slider;
  };

  slider.step = function(_) {
    if (!arguments.length) return step;
    step = _;
    return slider;
  };

  slider.animate = function(_) {
    if (!arguments.length) return animate;
    animate = _;
    return slider;
  };

  slider.orientation = function(_) {
    if (!arguments.length) return orientation;
    orientation = _;
    return slider;
  };

  slider.axis = function(_) {
    if (!arguments.length) return axis;
    axis = _;
    return slider;
  };

  slider.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return slider;
  };

  slider.value = function(_) {
    if (!arguments.length) return value;
    if (value) {
      moveHandle(stepValue(_));
    };
    value = _;
    return slider;
  };

  slider.snap = function(_) {
    if (!arguments.length) return snap;
    snap = _;
    return slider;
  };

  slider.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    return slider;
  };

  d3.rebind(slider, dispatch, "on");

  return slider;

}
}));

Denmark.png

DenmarkS.png

Estonia.png

EstoniaS.png

Finland.png

FinlandS.png

France.png

FranceS.png

Germany.png

GermanyS.png

gistfile1.txt

Test

Greece.png

GreeceS.png

GreenhouseEmissions.csv

Hungary.png

HungaryS.png

Iceland.png

IcelandS.png

index.html

<!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="http://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="http://www.oecd-ilibrary.org/environment/data/oecd-environment-statistics/greenhouse-gas-emissions_data-00594-en">OECD</a>, 2015</p>

		<div id="myFlags" class="flags"></div>
    <div id="myCountries" class="countries"></div>
    <div id="myChart" class="chart" ></div>
    <div id="mySlider" class="slider"></div>
    <span id="mySlidertext" class="selectedYear">0</span>

		<script type="text/javascript">

      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 = "http://localhost:99/module4/assignment/bb491f4a6945d9c6b169/";

			// Check if running on localhost or not
			var host = window.location.host;
			if (host.indexOf("localhost") == -1)
			{
					baseUrl = "http://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>

Ireland.png

IrelandS.png

Italy.png

ItalyS.png

Japan.png

JapanS.png

Latvia.png

LatviaS.png

Lithuania.png

LithuaniaS.png

Luxembourg.png

LuxembourgS.png

Netherlands.png

NetherlandsS.png

New Zealand.png

New ZealandS.png

Norway.png

NorwayS.png

Poland.png

PolandS.png

Portugal.png

PortugalS.png

Russia.png

RussiaS.png

Slovak Republic.png

Slovak RepublicS.png

Slovenia.png

SloveniaS.png

Spain.png

SpainS.png

Sweden.png

SwedenS.png

Switzerland.png

SwitzerlandS.png

Turkey.png

TurkeyS.png

United Kingdom.png

United KingdomS.png

United States.png

United StatesS.png