timeline - seasonality detection (I)

If you suspect a time serie has a seasonality component, this is an example of how to validate/invalidate this hypothesis.

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 autocorrelation technique. Correlation is a technique that allows to determine if 2 time series are correlated (ie. if they behave in the same way). Autocorrelation is the same technique applied to only 1 time serie: it allows to compare the correlation between a time serie and the same time serie shifted by a certain amount of time. Hence, if you suspect a seasonality of 7 days, then the autocorrelation between the time serie and the same time serie shifted by 7 days will validate (autocorrelation near 1) or invalidate (autocorrelation near 0) the seasonality.

Usages :

in the left graph, Drag & Drop points to update the timeline and create seasons of your choice (below the graph are some shortcuts)
then test for a particular seasonality period, and see how the coefficient of correlation behaves;
decrease the order of magnitude of the season component to see that when this order is small, then it becomes difficult to detect a season; this is because the coefficient of correlation is constantly high; even for the test of a suspected season's length that is not the real one.

Notes:

another block explains 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;
    top: 420px;
    right: 10px;
    font: 11px arial;
    text-align: right;
  }
  
  .viz {
    position: absolute;
    background-color: white;
    border-radius: 10px;
  }
  .viz#timelines {
    top: 5px;
    left: 5px;
  }
  .viz#correlation-plot {
    top: 5px;
    right: 5px;
  }
  .viz#correlation {
    top: 385px;
    right: 5px;
  }
  
  .flow {
    position: absolute;
    font-size: 30px;
    color: darkgrey;
  }
  .flow#flow1 {
    top: 310px;
    left: 470px;
  }
  .flow#flow2 {
    top: 350px;
    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;
  }
  .shift text {
    font-size: 12px;
  }
  .shift path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges; 
  }
  
  .dot {
    fill: steelblue;
    stroke: white;
    stroke-width: 3px;
  }
  .dot.correlated {
    stroke: none;
    opacity: 0.5;
  }
  .dot.draggable:hover, .dot.dragging {
    fill: pink;
    cursor: ns-resize;
  }
	
  .timeline {
    fill: none;
    stroke: lightsteelblue;
    stroke-width: 2px;
  }
  .timeline.lagged {
    opacity: 0.5;
  }
  .timeline.draggable:hover, .timeline.dragging {
  	stroke: pink;
    opacity: 1;
    cursor: ns-resize;
  }
  
  .trend {
    stroke: steelblue;
    stroke-width: 2px;
  }
  .trend.lagged {
    stroke: green;
  }
  .trend.correlated {
    stroke: grey;
  }
  
  #correlation-bar {
    fill: grey;
  }

</style>
<body>
  <div id="timelines" class="viz">
    <div id="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
      <br/>
      <br/>
      test for a seasonality's length of <a href="#" onclick="testSeasonalityPeriod(2);">2</a> / <a href="#" onclick="testSeasonalityPeriod(3);">3</a> / <a href="#" onclick="testSeasonalityPeriod(4);">4</a> / <a href="#" onclick="testSeasonalityPeriod(5);">5</a> / <a href="#" onclick="testSeasonalityPeriod(6);">6</a> / <a href="#" onclick="testSeasonalityPeriod(7);">7</a> / <a href="#" onclick="testSeasonalityPeriod(8);">8</a> / <a href="#" onclick="testSeasonalityPeriod(9);">9</a> / <a href="#" onclick="testSeasonalityPeriod(10);">10</a> periods
      <br/>
      <br/>
      <a href="#" onclick="disperse();">increase</a> / <a href="#"  onclick="concentrate();">decrease</a> seasonality's order of magnitude
      <br/>
    </div>
  </div>
  <div id="correlation-plot" class="viz"></div>
  <div id="correlation" class="viz"></div>
  <div id="flow1" class="flow">&#8614;</div>
  <div id="flow2" 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 laggedTimeSerie = [];
  var correlatedSerie = [];
  var suspectedSeasonLength = 4;
  
  var WITH_TRANSITION = true;
  var WITHOUT_TRANSITION = false
	var duration = 500;
  
  var timelineVizDimension = {width: 960/2, height:500},
      correlationPlotVizDimension = {width: 960/2, height:370},
      correlationVizDimension = {width: 960/2, height:130},
      vizMargin = 5,
      flowWidth = 20
  		legendHeight = 20,
  		xAxisLabelHeight = 10,
  		yAxisLabelWidth = 10,
  		margin = {top: 20, right: 20, bottom: 20, left: 20},
      timelineSvgWidth = timelineVizDimension.width - 2*vizMargin - flowWidth/2,
      timelineSvgHeight = timelineVizDimension.height - 2*vizMargin,
      correlationPlotSvgWidth = correlationPlotVizDimension.width - 2*vizMargin - flowWidth/2,
      correlationPlotSvgHeight = correlationPlotVizDimension.height - 2*vizMargin - flowWidth/2,
      correlationSvgWidth = correlationVizDimension.width - 2*vizMargin - flowWidth/2,
      correlationSvgHeight = correlationVizDimension.height - 2*vizMargin - flowWidth/2,
      timelineWidth = timelineSvgWidth - margin.left - margin.right - yAxisLabelWidth,
      // timelineHeight = timelineSvgHeight - margin.top - margin.bottom - xAxisLabelHeight;
  		correlationPlotWidth = correlationPlotSvgWidth - margin.left - margin.right - yAxisLabelWidth,
      correlationPlotHeight = correlationPlotSvgHeight - margin.top - margin.bottom - xAxisLabelHeight,
      timelineHeight = correlationPlotHeight,
      correlationWidth = correlationSvgWidth - margin.left - margin.right,
      correlationHeight = correlationSvgHeight - margin.top - margin.bottom - xAxisLabelHeight - 2*legendHeight;

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 xPlot = d3.scale.linear()
  			.domain([0, 50])
				.range([0, correlationPlotWidth]);
  var yPlot = d3.scale.linear()
  			.domain([0, 50])
				.range([0, -correlationPlotHeight]);
  
  var xCorrelation = d3.scale.linear()
  			.domain([-1, 1])
				.range([0, correlationWidth]);

var xAxisDef = d3.svg.axis()
  	.scale(x)
  	.ticks(11);
  var yAxisDef = d3.svg.axis()
  	.scale(y)
  	.orient("left");
  
  var xAxisPlotDef = d3.svg.axis()
  	.scale(xPlot);
  var yAxisPlotDef = d3.svg.axis()
  	.scale(yPlot)
  	.orient("left");
  
  var xAxisCorrelationDef = d3.svg.axis()
  	.scale(xCorrelation)
  	.ticks(5);
  
  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)
    updateLaggedTimeSerie();
    updateCorrelatedSerie();
    
    updateDots(WITHOUT_TRANSITION);
    updateTimelines(WITHOUT_TRANSITION);
    updateCorrelatedDots(WITHOUT_TRANSITION);
    updateTrends(WITHOUT_TRANSITION);
  }

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

</script>

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