We implemented D3.js on the dashboard of our internal time tracking app, Retain, to better show the relationships of time budgeted and spent.
Out with the old
The initial (and long-standing) dashboard for Retain consisted of several “blocks,” each representing a client project, that showed in plain text the number of hours logged, budgeted hours, and budget used. There was also a simple CSS meter indicating the percentage of total time logged. It wasn’t so bad, and it showed a nice snapshot of a project’s current state.
In with the new
The entire dashboard was replaced with a simple stacked bar graph. The long gray bar shows the total time budgeted for a project. The green bar, which seems to “fill up” the gray one, is the time logged. When a project goes over budget (not shown) the bar is drawn in dark red, representing the total budget, with a lighter red bar that extends beyond it. That’s when you know you’re in deep doo-doo.
In D3, you aren’t drawing graphs so much as you are drawing shapes – vector shapes with SVG to be precise. Shapes can make up graphs, so it works out nicely. One nice benefit SVG has over something like say, canvas, is that it can be styled with CSS. Some of the properties for SVG objects are a little different. For instance, instead of background you’d use fill.
In D3 there is a concept called scaling. In our case, we don’t want to map hours 1:1 with pixels. We want total hours to be 100% of the available space (about 800px). By creating a linear scale with D3, it’s easy for the graph to adjust to changes in hours. It will update the ticks as necessary while also scaling each bar to the appropriate length.
You can show a lot of data in a graph. By representing data visually, it’s easier to make connections and draw conclusions. The original dashboard was never very clear in representing the different budgeted hours for each project. The new dashboard’s graph conveys this flawlessly. You can easily see not only the relationship of a project’s budget to other projects, but also it’s logged time. Brilliant!
Have a comment or question? Send us a note. It won't be shown here and email isn't required, unless you'd like a