D3 Examples - Assignment 3

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;
            }
​
      .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>
​
        <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 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>
​
    