timeline - comparing trends

An example of how to compare trends of several time series.

Question: a trend of +10 over 100 things is higher or lower than a trend of +5 over 10 things ?

Response: it depends ... if you are interested in the raw trend, then the first trend is higher (+10 > +5); but if you are interested in the relative trend, then the second trend is higher (+10/100 < +5/10)

In the above viz, the left graph concerns raw data, and the right graph deals with relative data. If you want to compare raw trends, look at the left graph; and if you want to compare relative trends, look at the right one.

Relative values (dots on the rigth graph) are the raw values divided by the mean of their respective serie. The mean is used because it has interesting mathematical/computationnal properties over other possible ways to divide values (such as min, max, median, ...). In the statistical world, data divided by their respective mean are called reduced (reduced value, reduced trend, ..., but the reduced standard deviation is called coefficient of variation).

Usages :

in the left graph, Drag & Drop a point to see the overall impact (on its trend, its related reduced values, and its related reduced trend)
in the left graph, Drag & Drop a timeline (to change each vaue of the related time serie), and see the impact on the related reduced trend;

Notes:

trend line computed using least square method

Acknowledgments:

done with D3 v3.5.5
blockbuilder.org

forked from Kcnarf's block: timeline - comparing trends

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
  body {
    position: relative;
    background-color: #ddd;
    margin: auto;
  }
  
  #under-construction {
    display: none;
    position: absolute;
    top: 200px;
    left: 300px;
    font-size: 40px;
  }
  
  #flow {
    position: absolute;
    top: 234px;
    left: 469px;
    font-size: 30px;
    color: darkgrey;
  }
  
  #controls {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  
  .viz {
    position: absolute;
    background-color: white;
    border-radius: 10px;
    top: 5px;
    height: 490px;
  }
  .viz#raw {
    left: 5px;
  }
  .viz#reduced {
    right: 5px;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }
  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }
  
  .grid>line, .grid>.intersect {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
  }
  
  .legend {
    font-size: 12px;
  }
  
  .dot {
    fill: lightsteelblue;
    stroke: white;
    stroke-width: 3px;
  }
  .dot.serie2 {
    fill: darkseagreen;
  }
  .dot.reduced {
    opacity: 0.5;
  }
  .dot.draggable:hover, .dot.dragging {
    fill: pink;
    cursor: ns-resize;
  }
  
	
  .timeline {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
   	opacity: 0.1;
  }
  .timeline.serie2 {
    stroke: darkseagreen;
  }
  .timeline.draggable:hover, .timeline.dragging {
  	stroke: pink;
    opacity: 1;
    cursor: ns-resize;
  }

.trend {
    stroke: steelblue;
    stroke-width: 2px;
  }
  .trend.serie2 {
    stroke: green;
  }

</style>
<body>
  <div class="viz" id="raw">
    <div id="controls">
      <button onclick="makeSameTrend();">[un]make same trend</button>
    </div>
  </div>
  <div class="viz" id="reduced"></div>
  <div id="flow">
  	&#8614;
  </div>
  <div id="under-construction">
    UNDER CONSTRUCTION
  </div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
  var timeSerie = [];
  var mean1 = 0;
  var mean2 = 0;
  var sameTrend = false;
  
  var WITH_TRANSITION = true;
  var WITHOUT_TRANSITION = false
	var duration = 500;
  
  var vizMargin = 5,
      flowWidth = 10
  		legendHeight = 0,
  		xAxisLabelHeight = 10,
  		yAxisLabelWidth = 10,
  		margin = {top: 20, right: 20, bottom: 20, left: 20},
      svgWidth = 960/2 - 2*vizMargin - flowWidth,
      svgHeight = 500 - 2*vizMargin,
      width = svgWidth - margin.left - margin.right - yAxisLabelWidth,
      height = svgHeight - margin.top - margin.bottom - xAxisLabelHeight - legendHeight;

var xAxisDef = d3.svg.axis()
  	.scale(x)
  	.ticks(11);
  
  var yAxisDef = d3.svg.axis()
  	.scale(y)
  	.orient("left");
  
  var reducedYAxisDef = d3.svg.axis()
  	.scale(reducedY)
  	.orient("left");
  
  var svg = d3.select("#raw").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
  	.append("g")
  		.attr("transform", "translate(" + [margin.left, margin.top] + ")");

function dragged1(d) {
    d.y1 += y.invert(d3.event.dy)
    d3.select(this).attr("cy", y(d.y1));
    updateMeans(WITHOUT_TRANSITION);
    updateDots(WITHOUT_TRANSITION);
    updateTimelines(WITHOUT_TRANSITION);
    updateTrends(WITHOUT_TRANSITION);
  }
  
  function dragged2(d) {
    d.y2 += y.invert(d3.event.dy)
    d3.select(this).attr("cy", y(d.y2));
    updateMeans(WITHOUT_TRANSITION);
    updateDots(WITHOUT_TRANSITION);
    updateTimelines(WITHOUT_TRANSITION);
    updateTrends(WITHOUT_TRANSITION);
  }

function dragEnded(d) {
    d3.select(this).classed("dragging", false);
  }

</script>

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