D3 Interactive Streamgraph Iteration 3 - Trouble with the Time Domain for Tooltips by micahstubbs

My effort to adapt WillTurman’s block http://bl.ocks.org/WillTurman/4631136 to my dataset.

Not successful yet. The tooltip date range seems to be constrained to the first year in the dataset, rather than the entire 19 year 1992 to 2011 span. Also, something is off with the axes.

##Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

##Data Tooltip

It isn’t necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.

If there is a simpler way to do this, I’d love to see an example, as I couldn’t find any other examples of this out there.

##Vertical Line Tooltip

I think the vertical line adds a little bit of visual orientation to the streamgraph.

##Colors

I left a few alternate color ranges in the code (which are essentially taken straight from colorbrewer), in case orange doesn’t sit well.

index.html

<!-- inspired by //bl.ocks.org/WillTurman/4631136 -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.chart { 
  background: #fff;
}

p {
  font: 12px helvetica;
}


.axis path, .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

button {
  position: absolute;
  right: 50px;
  top: 10px;
}

</style>
<body>
<h1>Oil & Gas Production Interactive Streamgraph - Iteration 3</h1>
<p>Production data from well 3501522889 of the US Department of Energy's former <a href="//www.rmotc.doe.gov/">Rocky Mountain Oilfield Testing Center</a></p>
<script src="https://d3js.org/d3.v3.js"></script>


<div class="chart">
</div>

<script>

chart("single-well.csv", "blue-green-qualitative");

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


function chart(csvpath, color) {

if (color == "blue") {
  colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; // ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
  colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
  colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
else if (color == "blue-green-qualitative") {
  colorrange = ["#b2df8a", "#1f78b4", "#a6cee3"];
}
strokecolor = colorrange[0];

var format = d3.time.format("%m/%d/%Y");

var margin = {top: 20, right: 40, bottom: 30, left: 30};
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", "85px")
    .style("left", "60px");

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height-10, 0]);

var z = d3.scale.ordinal()
    .range(colorrange);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(20); // d3.time.years

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.dateObject; })
    .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.dateObject); })
    .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.dateObject = format.parse(d.date);
    d.value = +d.value;
  });

  var layers = stack(nest.entries(data));
  //x.domain([format.parse("03/01/1992"),format.parse("09/01/2011")])
  x.domain(d3.extent(data, function(d) { return d.dateObject; }));
  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"));

  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.getMonth() + invertedx.getDate() + invertedx.getFullYear();
      var selected = (d.values);
      for (var k = 0; k < selected.length; k++) {
        datearray[k] = selected[k].dateObject
        datearray[k] = datearray[k].getMonth() + datearray[k].getDate() + datearray[k].getFullYear();
      }

      mousedate = datearray.indexOf(invertedx);
      pro = d.values[mousedate].value;
      hoverDate = d.values[mousedate].dateObject;

      d3.select(this)
      .classed("hover", true)
      .attr("stroke", strokecolor)
      .attr("stroke-width", "0.5px"), 
      tooltip.html( "<p>" + d.key + "<br>" + pro + " bbls" + "<br>" + hoverDate + "</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 + " bbls" + "<br>" + hoverDate +  "</p>" ).style("visibility", "hidden");
  })
   
  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .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 + "px" )})
      .on("mouseover", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});
});
}
</script>