The circle-packing visualization used earlier is based on an algorithm from D3.js,[14] a JavaScript library based on data-driven documents. We won’t dig deeper into D3.js, as that is enough material for a book of its own. Instead, we’ll explore a ready-made visualization.
Before we start, I want to remind you that the strategies we are learning in this book don’t depend on specific tools. D3.js is just one of the many ways to visualize the code. Other options include:
Spreadsheets: Since we’re using CSV as the output format, any spreadsheet application lets you visualize the results from Code Maat. Spreadsheet applications are great for processing your analysis results (for example, sorting and filtering the resulting data).
R programming language:[15] The programming language R is a complete environment for both statistical computations and data visualizations. It has a steeper learning curve, but it pays off if you want to dive deeper into data analysis.
If you haven’t done it already, download the samples from the Code Maat distribution[16] accompanying this book. Unpack the samples and open a command prompt in that directory.
The visualization is an html file, so you can open it in any web browser. The html file will load a JSON resource describing our hotspots. Modern browsers introduce a security restriction on that. To make it work flawlessly, launch Python’s SimpleHTTPServer in the sample/hibernate directory:
| | prompt> python -m SimpleHTTPServer 8888 |
Point your browser to http://localhost:8888/hibzoomable.html. You should now see a familiar picture: the image we saw earlier.
The resulting patterns do look cool—who said large-scale software isn’t beautiful? But we’re not here to marvel at its beauty. Instead, click on one of the circles. The first thing you notice is that the visualization is interactive, as shown in the following figure.

An interactive visualization lets you chose your own level of detail. If you see a hot area, zoom in to explore it further.
To get this visual advantage, we need to discuss one more trick to decide which modules to include.
Look at the preceding figure again. See how the hotspots pop out? The reason is that the entire codebase is visualized, not just code we have recorded changes for. We get that for free, since cloc includes size metrics for all modules in the current snapshot. We then apply color only to the modules that changed within the period of interest.
This visualization makes it easy to toggle between analysis findings and the actual code they represent. Another win is that you get a quick overview of both volatile clusters and the stable parts of the system. Let’s see what that distribution of hotspots tells us about our code.