timeline - seasonality detection (II)

This block is an experimentation of how to detect if a timeline has a seasonality component, and how to detect the lenght of the season (if any).

Seasonality means that the time serie has a periodic component, repeating the same pattern on each period. For example, sales of a store may have a week-based seasonality: sales increase on saturday, while there is no sale at all on sunday.

Graphically speaking, detecting a seasonality is (quite) easy: just look for a repeating pattern. Note that it could be difficult if the pattern has a long period, or/and the order of magnitude of the seasonilaty is low (ie. lowest and highest values are not so far from the season's mean, but in this case there might be no seasonality at all ! ).

Computationnaly speaking, one can use the correlogram. This diagram represents all the coefficients of autocorrelation of the time serie (go to this block for detailed explanations of what is a coefficient of autocorrelation, and how to compute it). With the help of this diagram, one can identify season's lenght, if any.

Usages :

in the left graph, Drag & Drop points to update the timeline and create seasons of your choice (below the graph are some shortcuts)
decrease the order of magnitude of the seasonality component to see that when this order is small, then it becomes difficult to detect a season: coefficient of correlation for each lag are constantly high (see below comment for details);
similarily with the previous comment, increase the trend of the timeline to see that the higher is the trend, the more difficult it is to detect a season; each coefficient of correlation is high because their corresponding lagged time serie and the original time serie behave the same way (they have the same trend), and the seasonality component becomes less important;
go to this block in order to understand that detrending the time serie before computing the correlogram is a must have because it nullifies the previous comment, allowing to detect very small seasonnality order of magnitude;

Notes:

another block experiments detrending before computing the correlogram
another block experiments autocorrelation
another block experiments time series correlation
another block deals with the impact of seasonality when computing the trend of a timeline

Acknowledgments:

done with D3 v3.5.5
blockbuilder.org

<!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;
  }
  
  .controls {
    position: absolute;
    font: 11px arial;
  }
  #controls1 {
    top: 300px;
    left: 10px;
  }
  #controls2 {
    top: 300px;
    left: 450px;
  }
  #controls3 {
    top: 300px;
    right: 10px;
    text-align: right;
  }
  
  .viz {
    position: absolute;
    background-color: white;
    border-radius: 10px;
    left: 5px;
  }
  .viz#timelines {
    top: 5px;
  }
  .viz#correlation {
    top: 355px;
  }
  
  .flow {
    position: absolute;
    font-size: 30px;
    color: darkgrey;
    top: 320px;
    right: 435px;
  }
  
  .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: steelblue;
    stroke: white;
    stroke-width: 3px;
  }
  .dot.draggable:hover, .dot.dragging {
    fill: pink;
    cursor: ns-resize;
  }
	
  .timeline {
    fill: none;
    stroke: lightsteelblue;
    stroke-width: 2px;
  }
  .timeline.draggable:hover, .timeline.dragging {
  	stroke: pink;
    opacity: 1;
    cursor: ns-resize;
  }
  
  .correlation-bar {
    fill: grey;
  }

</style>
<body>
  <div id="timelines" class="viz">
    <div id="controls1" class="controls">
      update time serie with a seasonality's length of <a href="#" onclick="updateSeasonalityPeriod(2);">2</a> /<a href="#" onclick="updateSeasonalityPeriod(3);">3</a> / <a href="#" onclick="updateSeasonalityPeriod(4);">4</a> / <a href="#" onclick="updateSeasonalityPeriod(5);">5</a> / <a href="#" onclick="updateSeasonalityPeriod(6);">6</a> / <a href="#" onclick="updateSeasonalityPeriod(7);">7</a> / <a href="#" onclick="updateSeasonalityPeriod(8);">8</a> / <a href="#" onclick="updateSeasonalityPeriod(9);">9</a> / <a href="#" onclick="updateSeasonalityPeriod(10);">10</a> periods
    </div>
    <div id="controls2" class="controls">
      <a href="#" onclick="increaseSeasonOrderOfMagnitude();">increase</a> / <a href="#"  onclick="decreaseSeasonOrderOfMagnitude();">decrease</a> seasonality's order of magnitude
    </div>
    <div id="controls3" class="controls">
      <a href="#" onclick="increaseTrend();">increase</a> / <a href="#"  onclick="decreaseTrend();">decrease</a> timeline's trend
    </div>
  </div>
  <div id="correlation" class="viz"></div>
  <div id="flow" class="flow">&#8615;</div>
  <div id="under-construction">
    UNDER CONSTRUCTION
  </div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  var timeSerie = [];
  var randomness = [];
  var currentSeasonLength = 4;
  var currentSeasonOrderOfMagnitude = 8;
  var currentTrend = 1.4;
  var shouldDetrend = false;
  
  var WITH_TRANSITION = true;
  var WITHOUT_TRANSITION = false;
	var duration = 500;
  var NEW_RANDOMNESS = true;
  var PRESERVE_RANDOMNESS = false;
  
  var timelineVizDimension = {width: 960, height:340},
      correlationVizDimension = {width: 960, height:160},
      vizMargin = 5,
      flowWidth = 20
  		legendHeight = 20,
  		xAxisLabelHeight = 10,
  		yAxisLabelWidth = 10,
      correlationLeftShift = 110,
  		margin = {top: 20, right: 20, bottom: 20, left: 20},
      timelineSvgWidth = timelineVizDimension.width - 2*vizMargin,
      timelineSvgHeight = timelineVizDimension.height - 2*vizMargin - flowWidth/2,
      correlationSvgWidth = correlationVizDimension.width - 2*vizMargin,
      correlationSvgHeight = correlationVizDimension.height - 2*vizMargin - flowWidth/2,
      timelineWidth = timelineSvgWidth - margin.left - margin.right - yAxisLabelWidth,
      timelineHeight = timelineSvgHeight - margin.top - margin.bottom - xAxisLabelHeight - 1.5*legendHeight,
      correlationWidth = correlationSvgWidth - margin.left - margin.right - yAxisLabelWidth - correlationLeftShift,
      correlationHeight = correlationSvgHeight - margin.top - margin.bottom;

var drag = d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", dragStarted)
      .on("drag", dragged1)
      .on("dragend", dragEnded);
  
  var x = d3.scale.linear()
				.domain([0, 20])
				.range([0, timelineWidth]);
  var y = d3.scale.linear()
  			.domain([0, 50])
				.range([0, -timelineHeight]);
  
  var xCorrelation = d3.scale.linear()
  			.domain([1, 11])
				.range([0, correlationWidth]);
  var yCorrelation = d3.scale.linear()
  			.domain([-1, 1])
				.range([0, -correlationHeight]);

var xAxisDef = d3.svg.axis()
  	.scale(x)
  	.ticks(20);
  var yAxisDef = d3.svg.axis()
  	.scale(y)
  	.orient("left");
  
  var xAxisCorrelationDef = d3.svg.axis()
  	.scale(xCorrelation)
  	.tickValues([2,3,4,5,6,7,8,9,10])
  	.tickFormat("");
	var yAxisCorrelationDef = d3.svg.axis()
  	.scale(yCorrelation)
  	.ticks(5)
  	.orient("left");;
  
  var svg = d3.select("#timelines").append("svg")
      .attr("width", timelineSvgWidth)
      .attr("height", timelineSvgHeight)
  	.append("g")
  		.attr("transform", "translate(" + [margin.left, margin.top] + ")");

function dragged1(d) {
    d.y += y.invert(d3.event.dy);
    
    updateDots(WITHOUT_TRANSITION);
    updateTimelines(WITHOUT_TRANSITION);
    updateAutocorrelations(WITHOUT_TRANSITION);
  }

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

</script>

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