Calendar Layout: Visualising Market Data

March 24, 2013

This is a Calendar Layout of the Euro-US Dollar Rate’s Daily Change built with D3.js. The daily change is visualized as colored cells. Values range between -4% and 4% (dark red and dark green cells). And yellow cells for values around zero.

The Calendar visualization is very useful when the user wants to spot changes on a specific day. This is an advantage compared to Line Charts since it’s hard to visualize more than 30 days on the x-axis in a Line Chart.

The Calendar Visualization

The Calendar is a matrix-like visualization. It uses weeks as columns and days as rows. So for example, the element at (3, 10) represents a Tuesday on the 10th week of a specific year.

In order to draw every day you create a cell (a SVG rectangle) at each position (x, y), where x is given by the week and y is given by the day:

var rect = svg.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(d, 0, 1), 
                        new Date(d + 1, 0, 1)); })
  .enter().append("rect")
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d) { return week(d) * cellSize; })
    .attr("y", function(d) { return day(d) * cellSize; })

Further Reading