Tutorial: Creating an interactive, drill-down treemap of spending data with d3.js

View the screencast above and see below for downloadable source code and a working example.

The treemap is one of my favorite types of data visualizations – largely because of the natural ease with which one can understand and process what the data says visually without requiring a heavy cognitive load or any expert knowledge of the subject matter at hand. It’s pretty straightforward to understand that the size of each rectangle on a treemap corresponds to its proportion of the total rectangle as a whole. Static treemaps certainly have value, but what I like the most about treemaps displayed digitally is the added ability to drill down and see different levels of hierarchical data and to interact with and explore the data as a user.

Continue reading