D3 Examples - Climate Change Topic Modeling

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang='en'>
  <head>
      <meta charset="utf-8">
      <title> Climate Streamplot - Topic 5</title>
      <script src="https://d3js.org/d3.v3.js"></script>
      <style type = 'text/css'>
​
            body {
              font-family:  "Palatino Linotype", "Book Antiqua", Palatino, serif;
              background-color: white;
              padding: 50px;
            }
​
            h1 {
              font-size: 28px;
              position: relative;
              left: 100;
              color: #525252;
            }
            h2 {
              font-size: 20px;
              position: relative;
              left: 100;
              color: darkgrey;
            }
​
            .chart { 
              background: #fff;
            }
​
            p {
              font-family:  "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 18px;
              margin: 10px 0 0 50px;
​
            }
            .tooltip {
              font-family:  "Palatino Linotype", "Book Antiqua", Palatino, serif;
            }
​
            .axis path, .axis line {
              fill: none;
              stroke: #000;
              stroke-width: 2px;
              shape-rendering: crispEdges;
            }
​
            button {
              position: absolute;
              right: 50px;
              top: 10px;
            }
      </style>
  </head>
<body>
<h2 style="margin-left:3em;">Climate Change Topic Streamplot</h2>
<h1 style="margin-left:2em;">Topic 5 - Global Atmosphere / Emissions </h1>
<p> Using articles from the NY Times and Dynamic Topic Modelling to assess how the discussion of 'climate change' and 'global warming' have changed over time. </p>
​
​
<div class="chart"></div>
​
<script type = 'text/javascript'>
​
      chart("topic5_stream_R.csv", "green");
​
      var datearray = [];
      var colorrange = [];
​
​
      function chart(csvpath, color) {
​
      if (color == "blue") {
        colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
      }
      else if (color == "pink") {
        colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
      }
      else if (color == "orange") {
        colorrange = ["#7f0000","#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
      }
      else if (color == 'YlOrRd') {
        colorrange = ["#800026","#bd0026","#e31a1c","#fc4e2a","#fd8d3c","#feb24c","#fed976","#ffeda0"]
      }
      else if (color == 'green') {
        colorrange = ["#00441b","#006d2c","#238b45","#41ab5d","#74c476","#a1d99b","#c7e9c0","#e5f5e0","#f7fcf5"]
      }
​
      strokecolor = colorrange[0];
​
      var format = d3.time.format("%Y");
​
      var margin = {top: 20, right: 100, bottom: 30, left: 100};
      var width = document.body.clientWidth - margin.left - margin.right;
      var height = 400 - margin.top - margin.bottom;
​
      var tooltip = d3.select("body")
          .append("div")
          .attr("class", "remove")
          .style("position", "absolute")
          .style("z-index", "20")
          .style("visibility", "hidden")
          .style("top", "625px")
          .style("left", "180px");
​
      var x = d3.time.scale()
          .range([0, width]);
​
      var y = d3.scale.linear()
          .range([height-10, 2]);
​
      var z = d3.scale.ordinal()
         .range(colorrange);
​
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .ticks(d3.time.twoyears);
​
      var yAxis = d3.svg.axis()
          .scale(y);
​
      var yAxisr = d3.svg.axis()
          .scale(y);
​
      var stack = d3.layout.stack()
          .offset("silhouette")
          .values(function(d) { return d.values; })
          .x(function(d) { return d.date; })
          .y(function(d) { return d.value; });
​
      var nest = d3.nest()
          .key(function(d) { return d.key; });
​
      var area = d3.svg.area()
          .interpolate("cardinal")
          .x(function(d) { return x(d.date); })
          .y0(function(d) { return y(d.y0); })
          .y1(function(d) { return y(d.y0 + d.y); });
​
      var svg = d3.select(".chart").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
      var graph = d3.csv(csvpath, function(data) {
        data.forEach(function(d) {
          d.date = format.parse(d.date);
          d.value = +d.value;
        });
​
        var layers = stack(nest.entries(data));
​
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
​
        svg.selectAll(".layer")
            .data(layers)
          .enter().append("path")
            .attr("class", "layer")
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d, i) { return z(i); });
​
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
​
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + width + ", 0)")
            .call(yAxis.orient("right"));
​
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis.orient("left"))
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
              .attr("x",-height/2)  //smaller divider moves up
              .attr("dy", ".71em")
              .style("text-anchor", "middle")
              .text("Probaility of Word | Topic")
              .attr("font-family","serif")
              .attr("font-size","16px");;
​
        svg.selectAll(".layer")
          .attr("opacity", 1)
          .on("mouseover", function(d, i) {
            svg.selectAll(".layer").transition()
            .duration(250)
            .attr("opacity", function(d, j) {
              return j != i ? 0.6 : 1;
          })})
​
          .on("mousemove", function(d, i) {
            mousex = d3.mouse(this);
            mousex = mousex[0];
            var invertedx = x.invert(mousex);
            invertedx = invertedx.getYear() ;
            var selected = (d.values);
            for (var k = 0; k < selected.length; k++) {
              datearray[k] = selected[k].date
              datearray[k] = datearray[k].getYear() ;
            }
​
            var tooltips = d3.select('svg').append('g');
​
            mousedate = datearray.indexOf(invertedx);
            pro = d.values[mousedate].value;
​
            d3.select(this)
            .classed("hover", true)
            .attr("stroke", strokecolor)
            .attr("stroke-width", "1.5px"), 
            tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
            
          })
          .on("mouseout", function(d, i) {
           svg.selectAll(".layer")
            .transition()
            .duration(250)
            .attr("opacity", "1");
            d3.select(this)
            .classed("hover", false)
            .attr("stroke-width", "0px"), 
            tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
        })
          .on("click", function(d, i) {
            svg.selectAll(".layer").transition()
            .duration(250)
            .attr("opacity", function(d, j) {
              return j != i ? 0.6 : 1;
          });
        })
        //   .on("click", function(d, i) {
        //     d3.select(this)
        //       .transition()
        //       .duration(250)
        //       .style('fill', function(d, i) {
        //       if(this.style.fill = 'red') {
        //         return z(this);
        //       } else {
        //         return 'red';
        //   } });
        // });
          
        var vertical = d3.select(".chart")
              .append("div")
              .attr("class", "remove")
              .style("position", "absolute")
              .style("z-index", "19")
              .style("width", "1px")
              .style("height", "350px")
              .style("top", "230px")
              .style("bottom", "30px")
              .style("left", "0px")
              .style("background", "#fff");
​
        d3.select(".chart")
            .on("mousemove", function(){  
               mousex = d3.mouse(this);
               mousex = mousex[0] + 5;
               vertical.style("left", (mousex+50) + "px" )})
            .on("mouseover", function(){  
               mousex = d3.mouse(this);
               mousex = mousex[0] + 5;
               vertical.style("left", (mousex+50) + "px")});
      });
       }
    </script>
    <br>
    <br>
    <p align = "right", style="font-size:93%;"><a style="color:#969696;", href=https://bl.ocks.org/WillTurman/4631136/>Inspired by https://bl.ocks.org/WillTurman/4631136</a></p>
    <p align = "right", style="font-size:93%;"><a style="color:#969696;", href=https://bl.ocks.org/natemiller/raw/a8b5c9c849f371e0fc26d41150fc6403/>Topic #6</a></p>
  </body>
  </body>
</html>
​
​
    