All examples By author By category About

walkerjeffd

Full window Github gist

timeseries-uncertainty

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="timechart.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  fill: steelblue;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

rect.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
}

</style>
</head>

<body>
  <div id="controls">
    <input id="slider1" type="range" min="0" max="100" value="50">
    <input id="slider2" type="range" min="0" max="100" value="50">
  </div>
  <div id="viz"></div>
  <script>
    var startDate = new Date("2001-10-01"),
        rHour = -0.0406079999999997,
        rDay = 0.1;
    var days = d3.range(0, 366, 1),
        hours = d3.range(0, 24, 1);
    var data = compute(+d3.select('#slider1').property('value')/100,
                  	    +d3.select('#slider2').property('value')/100);
    
    d3.select('#slider1').on('input', render);
    
    d3.select('#slider2').on('input', render);
    
		function render () {
      data = compute(+d3.select('#slider1').property('value')/100,
                  	 +d3.select('#slider2').property('value')/100);
      console.log(data[0]);
      chart.data([{
          key: 'obs',
          label: 'Obs',
          color: 'forestgreen',
          opacity: 0.5,
          primary: true,
          values: data
      }]);
      d3.select('#viz').call(chart);
    }
    var chart = timeChart()
    	.data([{
        key: 'obs',
        label: 'Obs',
        color: 'forestgreen',
        opacity: 0.5,
        primary: true,
        values: data
      }]);
    
    d3.select('#viz').call(chart);

var area = d3.svg.area()
    .x(function (d) { return x(xAccessor(d)); })
    .y0(function (d) { return y(d.max); })
    .y1(function (d) { return y(d.min); })
    .interpolate('step-after');

var line = d3.svg.line()
    .x(function (d) { return x(xAccessor(d)); })
    .y(function (d) { return y(yAccessor(d)); })
    .interpolate('step-after');

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 80])
    .on('zoom', zoomed);

function chart (el) {
    if (el.selectAll('svg').empty()) {

svg = el
        .append('svg')
          .attr('height', height + margin.top + margin.bottom)
          .attr('width', width + margin.left + margin.right)
        .append('g')
          .attr('transform', 'translate(' + margin.left + ',' +
                                            margin.top + ')');

svg.append('clipPath')
          .attr('id', 'clip')
        .append('rect')
          .attr('x', 0)
          .attr('y', 0)
          .attr('width', width)
          .attr('height', height);

svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')');

svg.append('g')
        .attr('class', 'y axis')
        .append('text')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '.71em')
          .style('text-anchor', 'end')
          .text(yLabel);

container = svg.append('g')
        .attr('class', 'data')
        .attr('clip-path', 'url(#clip)');

container.append('g').attr('class', 'areas');
      container.append('g').attr('class', 'lines');
      container.append('g').attr('class', 'points');
      container.append('g').attr('class', 'ref-lines');

focus = svg.append('g')
          .attr('class', 'focus')
          .style('display', 'none');

focus.append('circle')
          .style('fill', 'none')
          .style('stroke', 'steelblue')
          .attr('r', 4.5);

focus.append('text')
          .attr('x', 9)
          .attr('dy', '.35em');

svg.append('rect')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'pane')
        .on('mouseover', function () { focus.style('display', null); })
        .on('mouseout', function () { focus.style('display', 'none'); })
        .on('mousemove', mousemove)
        .call(zoom);
    }

zoomed();
  }

function zoomed() {
    if (data) {
      var xExtent = data.map(function (d) {
        return d3.extent(d.values, xAccessor);
      });
      xExtent = d3.extent(_.flatten(xExtent));

// clamp x-axis zoom
      if (x.domain()[0] < xExtent[0]) {
        zoom.translate([zoom.translate()[0] - x(xExtent[0]) + x.range()[0],
                        zoom.translate()[1]]);
      } else if (x.domain()[1] > xExtent[1]) {
        zoom.translate([zoom.translate()[0] - x(xExtent[1]) + x.range()[1],
                        zoom.translate()[1]]);
      }

y.domain(yExtent);

onZoom(x.domain());

svg.select('.x.axis')
        .call(xAxis);

svg.select('.y.axis')
          .call(yAxis);

var areas = container.select('g.areas')
        .selectAll('.area')
        .data(data.filter(function (d) { return d.showBand; }));

areas.enter().append('path')
        .attr('class', 'area')
        .attr('fill', 'gray')
        .style('opacity', 0.25);

areas.attr('d', function (d, i) {
        return area(d.values, i);
      });

areas.exit().remove();

var gLines = container.select('g.lines')
        .selectAll('.line')
        .data(data);

gLines.enter().append('path')
        .attr('class', 'line');

gLines.attr('d', function (d, i) {
          return line(d.values, i);
        })
        .style('stroke', function (d) {
          return d.color || 'orangered';
        })
        .style('opacity', function (d) {
          return d.opacity || 0.5;
        });

gLines.exit().remove();
      
      
      var gPoints = container.select('g.points')
        .selectAll('.point')
        .data(data[0].values);

gPoints.enter().append('circle')
        .attr('class', 'point');

gPoints.attr('cx', function (d) { return x(xAccessor(d)); })
	      .attr('cy', function (d) { return y(yAccessor(d)); })
      	.attr('r', function (d) { return Math.pow(Math.max(0, -10*yAccessor(d))+1, 2);})
      	.attr('opacity', function (d) { return (Math.random()+2)*y(yAccessor(d)); })
        .attr('fill', 'deepskyblue');

gPoints.exit().remove();
    }
  }

function mousemove() {
    var mouseDate = x.invert(d3.mouse(this)[0]);

// filter series
    var filtered = data.filter(function (d) {
      return mouseDate >= d.extent[0] && mouseDate <= d.extent[1];
    });

if (filtered.length > 0) {
      var series = filtered[0];
      var i = bisectDate(series.values, mouseDate, 1);

var d;
      if (i === 0) {
        d = series.values[0];
      } else {
        var d0 = series.values[i - 1],
            d1 = series.values[i];

// d = mouseDate - xAccessor(d0) > xAccessor(d1) - mouseDate ? d1 : d0;
        d = d0;
      }
      focus.attr('transform',
                 'translate(' + x(mouseDate) + ',' +
                                y(yAccessor(d)) + ')');
      var text = dateFormat(mouseDate) + ' | ' + numberFormat(yAccessor(d));

focus.style('display', null);
      focus.select('text').text(text);

var textWidth = focus.node().getBBox().width,
          mouseX = d3.mouse(this)[0],
          xWidth = x.range()[1];

// flip/flop text side
      if (textWidth + mouseX > xWidth) {
        focus.select('text')
          .attr('text-anchor', 'end')
          .attr('x', -9);
      } else {
        focus.select('text')
          .attr('text-anchor', 'start')
          .attr('x', 9);
      }
    } else {
      focus.style('display', 'none');
    }
  }

chart.width = function (_) {
    if (!arguments.length) {
      return width;
    }
    width = _ - margin.left - margin.right;
    x.range([0, width]);
    return chart;
  };

chart.height = function (_) {
    if (!arguments.length) {
      return height;
    }
    height = _ - margin.top - margin.bottom;
    y.range([height, 0]);
    return chart;
  };

chart.x = function (_) {
    if (!arguments.length) {
      return xAccessor;
    }
    xAccessor = _;
    bisectDate = d3.bisector(xAccessor).left;
    return chart;
  };

chart.y = function (_) {
    if (!arguments.length) {
      return yAccessor;
    }
    yAccessor = _;
    return chart;
  };

chart.yLabel = function (_) {
    if (!arguments.length) {
      return yLabel;
    }
    yLabel = _;
    return chart;
  };

chart.data = function (__) {
    if (!arguments.length) {
      return data;
    }
    data = __;

var oldTranslate = zoom.translate(),
        oldScale = zoom.scale();

data.forEach(function (d) {
      d.extent = d3.extent(d.values, xAccessor);
    });

x.domain(d3.extent(_.flatten(_.pluck(data, 'extent'))));
    zoom
      .x(x)
      .translate(oldTranslate)
      .scale(oldScale);
    return chart;
  };

chart.onZoom = function (_) {
    if (!arguments.length) {
      return onZoom;
    }
    onZoom = _;
    return chart;
  };

return chart;
}
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js