Angular directive for d3.js Calendar heatmap representing time series data. This d3.js heatmap representing time series data is used to visualize tracked time over the past year, showing details for each of the days on demand.
Converted into an angular directive for your convenience 🙂
Includes a global overview of multiple years and visualizations of year, month, week and day overview with zoom for details-on-demand.
Based on Calendar View by Mike Bostock
Aaand D3.js Calendar Heatmap by Darragh Kirwan
In some cases details array could be large and in order to fit the data into the tooltip a short summary is generated with distinct projects and their total tracked time for that date. In terms of optimization, summary data can be computed server-side and passed in using the summary attribute. And in addition to the data structure described above this would result in a summary dictionary with distinct project names and total values of tracked time in seconds, e.g.: