Climate Change Topic Modelling

After obtaining articles from the New York Times that included the phrases 'climate change' and 'global warming' between 1988 - 2016, Dynamic Topic Modeling was applied to search for shifts in the discussion of climate change over time. Analyses were performed using the Python package 'gensim', which provides a wrapper for a C+ based program based on that originally developed by David Blei (https://radimrehurek.com/gensim/models/wrappers/dtmmodel.html). A total of 8 coherent topics were identified and labled. The top 10 words from each year were then identified and used to generate streamplots using d3.js.

Streamplots aren't the perfect visualization, but they do provide a useful means of assessing the general importance of particular words within each topic and how the use of those words, within that topic, and within the broader umbrella of "Climate Change' has shifted over time.

<!DOCTYPE html>
<html lang='en'>
  <head>
      <meta charset="utf-8">
      <title> Climate Streamplot - Topic 1</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 1 - Science / Nature / Species  </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("topic1_stream_R.csv", "yelblu");

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

function chart(csvpath, color) {

if (color == "blue") {
        colorrange = ['#00441b','#006d2c','#238b45','#41ae76','#66c2a4','#99d8c9','#e5f5f9','#ccece6'];
      }
      else if (color == "yelblu") {
        colorrange = ['#084081','#0868ac','#2b8cbe','#4eb3d3','#7bccc4','#a8ddb5','#ccebc5'];
      }
      else if (color == "orange") {
        colorrange = ["#7f0000","#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
      }

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/07507ddbe4b4da3b3604f4e4654a522a/>Topic #2</a></p>
    <br>
    <br>
    <p style="font-size:93%;">Brief methods: New York Times (NYT) articles were accessed through the NYT API using the search terms 'climate change' and 'global warming' for the years January 1988 through March 2016. After tokenizing the data, removing very common words, and words that only occurred a single time, a Dynamic Topic Modeling analysis was performed using the Python package 'gensim'. Eight different topics and the words most associated with those topics over time were identified. Visualizations of the topics themselves, and the words associated with them, were created to aid in identifying how the discussion of global climate has shifted. Dynamic Topic Modeling is an exploratory analysis tool, attempting to identify latent or hidden features in text data. As such the results should be viewed as suggesting areas of additional emphasis rather than any causal or diffinitive  relationships. Additionally, these data were drawn from the New York Times. Text from other publications would likely show different, but likely interesting patterns. </p>
  </body>
</html>

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

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