D3 Charts in QGIS Print Composer

This post is about how to make charts created in d3.js appear in QGIS and how to make them work in the Print Composer so that you can export them with your maps. It's inspired by the recent publication of a new QGIS plugin which allows you to create one kind of D3 chart within QGIS. For this example, I'm using Motor Vehicle Collisons data from NYPD, because the QGIS plugin here needs data with time stamps in it and this fits the bill. Also, it's an interesting dataset because it's a good example of something where time and place are important. Collisions are closely tied to certain locations (e.g. intersections) but they are also more likely to happen at certain times (e.g. 8am, 6pm). First up, here's a little visual of lower Manhattan collisions by time of day, using the whole of 2015 - don't worry, there aren't that many collisions in a single day, even in NYC.

Crash, bang, wallop

Okay, so we have a gif with lots of flashing dots, which isn't very helpful. But it does tell a very basic and obvious story. What if we wanted to put a static map in the Print Composer beside a radar chart showing collisions by time of day? That's where the D3 Circular Date/Time Heatmap plugin comes in handy. In QGIS, just search for D3 via Plugins... Manage and Install Plugins to find it and install. Once you've done this, you'll see the little chart icon in your toolbar area. To make it work, the best thing you can do is follow the original tutorial, which uses 2006 Chicago Crime data. You'll see in my example below for the NYPD data that I've set the chart to show day of week and hour of day so that I can get a sense of the time pattern associated with collisions.

Note: this plugin produces circular charts only

Once you hit OK on the plugin, you'll get a D3 output page which will render in your web browser, after you tell it where to save the output files to. When you do this, you'll see three new files in your designated folder, as below.

Nice small file sizes with D3 here

Now you might want to add this chart next to a map of collisions in your Print Composer in QGIS. You can do this quite easily. First of all, you just need to get things ready by positioning the map output as you wish. In this case, I've gone for a landscape layout and I have a little Manhattan collision map on the left, showing only some collisions and the circle chart on the right. Here's a screenshot of my Print Composer showing that I've just added the D3 chart using the Add HTML Frame button. I've just told QGIS where I saved the chart by pointing it to the location on my computer where I saved the new chart, but you can paste in the original code in the box below that if you wish.

Still looks pretty messy, but you get the idea

In the example above, I've changed some of the original defaults in relation to fonts and so on, just for my own benefit. You can also go in to the html and tweak whatever you want - in fact it's quite a good way of getting used to how it works if you've never done it before. Then you might want to export the map at a decent resolution. This is what I've done in the example below, which is only for test purposes because it's not a finished map - I'm just adding it here so you can see what the D3 chart looks like from an exported Print Composer layout.

Just to demonstrate the resolution - click to enlarge

A little close up on the chart, just to highlight the quality

From here on in, it's just a case of experimenting more and more until you get what you want. There are lots of different ways to generate D3 charts and other output, including online tools such as Raw or even learning a bit of D3 yourself.

Finally, take care when crossing the street in NYC.

Notes: if you're looking for a QGIS plugin that will turn your whole map into D3 and make it interactive, look no further than Simon Benten's D3 Map Renderer, which is really cool. This example I've shown today is really very basic, but it shows you how to get some D3 into your QGIS projects, should you want to. For the most advanced, beautiful examples, check out Jason Davies and Mike Bostock. You'll sometimes see it written D3, D3.js, d3.js or just d3 - it's all the same thing. I prefer D3. For nice practical examples of D3 in the wild, check out the Financial Times page - with John Burn-Murdoch and Alan Smith really leading the way here.