D3 Examples - Assignment 4

xxxxxxxxxx
 
<!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>
​
        <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 = "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>
​
    