| license: gpl-3.0 | |
| height: 700 | |
| scrolling: yes |
A stacked timelines layout for representing state of time-series over time.
Using the stacked-timelines-chart D3 reusable chart.
Each timeline segment can be assigned a value on a color scale, either continuous (heatmap mode) or ordinal (for categorical representation). Time-series can be grouped into logical groups, represented as distinct sections. Explore the data by zooming (drag) or using the timeline brush at the bottom. Example is populated with randomly generated data.
| <head> | |
| <script src="//unpkg.com/stacked-timelines-chart@^1.0/dist/stacked-timelines-chart.min.js"></script> | |
| <script src="mockup-data.js"></script> | |
| <script> | |
| var myData = getMockupData(), | |
| myPlot = StackedTimelinesChart() | |
| .width(window.innerWidth) | |
| .zScaleLabel("My Scale Units"); | |
| document.addEventListener("DOMContentLoaded", function() { | |
| myPlot(document.getElementById("myPlot"), myData); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="myPlot"></div> | |
| </body> |
| function getMockupData() { | |
| var NGROUPS = 6; | |
| var MAXLINES = 15; | |
| var MAXSEGMENTS = 20; | |
| var MINTIME = new Date(2013,2,21); | |
| function getGroupData() { | |
| function getSegmentsData() { | |
| var segData=[]; | |
| var nSegments = Math.ceil(Math.random()*MAXSEGMENTS); | |
| var segMaxLength = Math.round(((new Date())-MINTIME)/nSegments); | |
| var runLength = MINTIME; | |
| for (var i=0; i< nSegments; i++) { | |
| var tDivide = [Math.random(), Math.random()].sort(); | |
| var start = new Date(runLength.getTime() + tDivide[0]*segMaxLength); | |
| var end = new Date(runLength.getTime() + tDivide[1]*segMaxLength); | |
| runLength = new Date(runLength.getTime() + segMaxLength); | |
| segData.push({ | |
| 'timeRange': [start, end], | |
| 'val': Math.random() | |
| //'labelVal': is optional - only displayed in the labels | |
| }); | |
| } | |
| return segData; | |
| } | |
| var grpData = []; | |
| for (var i=0, nLines=Math.ceil(Math.random()*MAXLINES); i<nLines; i++) { | |
| grpData.push({ | |
| 'label': 'label' + (i+1), | |
| 'data': getSegmentsData() | |
| }); | |
| } | |
| return grpData; | |
| } | |
| var data = []; | |
| for (var i=0; i< NGROUPS; i++) { | |
| data.push({ | |
| 'group': 'group' + (i+1), | |
| 'data': getGroupData() | |
| }); | |
| } | |
| return data; | |
| } |
