Table of Contents

• Starting example
• What needs to be changed
• Formatting the data
  • MediaWiki edits
  • Git commits
• Creating the color map
• How the calendar code works
• Final result

Starting example

Let's begin with a D3 example. Mike Bostock provided a Calendar View block illustrating how to draw a very interesting visualization of large amounts of data over time:

You might recognize this type of graph from Github, whose activity graph shows the same visualization.

The data shown in this example consists of several years of stock market data. It is a simple but very large data set, with each data …