Climate Change Topic Modeling - Topic 6

<!DOCTYPE html>
<html lang='en'>
  <head>
      <meta charset="utf-8">
      <title> Climate Streamplot - Topic 6</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 6 - Cars &#38; Vehicles / Fuels </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>

chart("topic6_stream_R.csv", "BuPu");

var datearray = [];
      var colorrange = [];

function chart(csvpath, color) {

if (color == "blue") {
        colorrange = ['#00441b','#006d2c','#238b45','#41ae76','#66c2a4','#99d8c9','#e5f5f9','#ccece6'];
      }
      else if (color == "dark") {
        colorrange = ['#084081','#0868ac','#2b8cbe','#4eb3d3','#7bccc4','#a8ddb5','#ccebc5'];
      }
      else if (color == "orange") {
        colorrange = ["#7f0000","#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
      }
      else if (color == "BuPu") {
        colorrange = ["#4d004b","#810f7c","#88419d","#8c6bb1","#8c96c6","#9ebcda","#bfd3e6"]
      }

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 nest = d3.nest()
          .key(function(d) { return d.key; });

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/9196fa786d874c448167cb136a7abf0d>Topic #7</a></p>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js