Blogging With Brunel

Published by:


Here’s a short video showing how to create a blog entry using Brunel in a few minutes. The data comes from The Guardian and is completely unmodified, as you can see in the video from the fairly odd column names! I’m making a cleaner version of the data and hope to have some samples of that up in a  few days.

The video is high resolution (1920 x 1080) and about 60M. It’s probably best viewed expanded out to full screen.

Brunel: Open Source Visualization Language

Published by:


BRUNEL is a high-level language that describes visualizations in terms of composable actions. It drives a visualization engine (d3) that performs the actual rendering and interactivity. It provides a language that is as simple as possible to describe a wide variety of potential charts, and to allow them to be used in Java, Javascript, python and R systems that want to deliver web-based interactive visualizations.

At the end of the article are a list of resources, but first, some examples. The dataset I am using for these is a set of data taken from BoardGameGeek which I processed to create a data set describing the top 2000 games listed as of Spring 2015. Each chart below is a fully interactive visualization running in its own frame. I’ve added the brunel description for each chart below each image as a caption, so you can go to the Builder anytime and copy the command into the edit box to try out new things.

data('sample:BGG Top 2000 Games.csv') bubble color(rating) size(voters) sort(rating) label(title) tooltip(title, #all) legends(none) style('* {font-size: 7pt}') top(rating:100)

This shows the top 100 games, with a tooltip view for details on the games. They are packed together in a layout where the location has no strong meaning
— the goal is to show as much data in as small a space as possible!
In the builder, you can change the number in top(rating:100) to show the top 1000, 2000 … or show the bottom 100. You could also add x(numplayers) to divide up the groups by recommended number of players

data('sample:BGG Top 2000 Games.csv') line x(published) y(categories) color(categories) size(voters:200) opacity(#selection) sort(categories) top(published:1900) sum(voters) legends(none) | data('sample:BGG Top 2000 Games.csv') bar y(voters) stack polar color(playerage) label(playerage) sum(voters) legends(none) at(15, 60, 40, 90) interaction(select:mouseover)

This example shows some live interactive features; hover over the pie chart to update the main chart. The main chart shows the number of people voting for games in different categories over time, and the pie chart shows the recommended minimum age to enjoy a game. So when you hover over ‘6’, for example, you can see that there have been no good sci-fi games for younger players in the last 10 years. Use the mouse to pan and zoom the chart (drag to pan, double-click to zoom).

data('sample:BGG Top 2000 Games.csv') treemap x(designer, mechanics) color(rating) size(#count) label(published) tooltip(#all, title) mean(rating) min(published) list(title:50) legends(none)

Head to the Builder Site to modify this. You could try:

  • change the list of fields in x(…) — reorder then or use fields like ‘numplayers’, ‘language’
  • remove the ‘legends(none)’ command to show a legend
  • change size to ‘voters’ — and add a ‘sum(voters)’ command to show the total number of voters rather than just counts for each treemap tile

Do you want to know more?

Follow links below; gallery and cookbook examples will take you to the Brunel Builder Site where you can create your own visualizations and grab some Javascript code to embed them in your web pages … which is exactly how I built the above examples!

A Quick Look at Lots of Songs …

Published by:

Songs by year, rating and genre

A Quick Look at Lots of Songs …

Songs by year, rating and genre

iTunes information about my songs, showing year, genre and my ratings

A quick visualization of the songs in my iTunes database. I was curious to see if there were any sweet spots in my listening history. As always, showing correlation between three different variables is hard, and here I wanted one dot per song, so the density is quite high (clicking on the image to show it full size is recommended).

Perhaps the most interesting thing for me personally was that I though i liked Alternative music more than I actually appear to. I notice especially that the 2010-2015 bin for mid-value rating is dominated by Alternative!

Appropriate Mappings

Published by:

WhereWeDonate Vs. Diseases That Kill


Vox Article on viral memes and charitable giving

First, a disclaimer. This is not a post about the actual issues this article raises; just about the presentation of those claims. The image from the article has appeared in numerous places and been referenced by a number of news sources, as well as appearing in my Facebook and twitter feeds.

And it’s a bad image.

One minor issue is that it is hard to work out which circle relates to which disease, as the name of the disease only appears on the legend, so you are constantly moving your eyes from grey dot on left to the legend, to the grey dot on the right. Hard to make much sense. The fact that the legend doesn’t seem to have any order to it doesn’t help either. If this were 20 diseases instead of eight, the chart would be doomed!

Kudos for picking appropriate colors though. It helps that they used a natural mapping (pink <–> breast cancer; red <–> AIDS) that might help a bit.

The more worrying issue is that it makes a classic distortion mistake; look at the right side and rapidly answer the question, using just the images, not the text: “How many more deaths are there due to the purple disease than the blue disease?” 

Using the image as a guide, your answer is likely to be in the range 10 to 20 times as man, because the ratio of the areas is about that amount. When you look at the text, though, it’s actually only about four times. The numbers are not encoding the area, which is what we see, but they are encoding the radius (or diameter) which we do not immediately perceive.

The result is a sensationalist chart. It takes a real difference, but sensationalizes it by exaggerating the difference dramatically. If you want to use circles, map the variable of interest to AREA, not RADIUS. It fits our perceptions much more truthfully. It’s not actually perfect; we tend to see small circles as larger than they really are; but it’s much, much better).

So, here’s a reworking:

WhereWeDonate Vs. Diseases That Kill

I tried to keep close to the original color mappings, as they are pretty good, but have used width to encode the variable of interest, keeping the height of the rectangle fixed. I also labeled the items on both sides so we can see much more easily that heart disease kills about 4x as many people as Chronic Obstructive Pulmonary Disease. 

I also added some links between the two disease rankings to help visually link the two and aid navigation. The result is, I believe, not only more truthful, but easier to use. In short, it works.

Comics and Visualization

Published by:


Understanding Comics book cover; Scott McCloudComics and Visualization

Although this book is over a decade old now (and Scott has a number of later books that follow on from this one), this is still a highly valuable book to read, getting great review from famous artists as a fundamental resource for comic book writers. I read this from the perspective of a visualization expert, and found a number of interesting points in the book, especially the earlier sections. He defines comics as “juxtaposed pictorial and other images in deliberate sequence, intended to covey information and/or to produce an aesthetic response in the viewer (p.9)”, which, to my mind, allows many visualizations to fits his definition! The concept of small multiples, when presented in a “deliberate order” such as via a trellis display, fits particularly well into this definition, so I was encouraged to read on. Some highlights of the book, from my point of view:

  • The use of simpler icons / symbols to make depictions of reality more universal; that argument resonates more strongly with me than Tukey’s data-ink concept. I feel more convinced by the argument that additional detail is bad when it makes it harder for us to understand the high-level picture because it draws us too much into the physicality of the shapes being used.
  • McCloud presents a triangular space, the vertices of which are “reality”, “language” and “the picture plane” into which comic styles can be placed. I think there is also value in looking at various styles of visualization and seeing where they fit in. Treemaps, for example, have more “realistic” versions using cushions, while keeping the same structure. Scientific, geographic or fluid display visualizations are more realistic than, say, statistical graphics.
  • Less is More” applied to the number of intermediate representations used — this argues that for visualizations of, say, a process evolving over time, we should not simply slice at even times, but instead look for important features we want to show, and show fewer frames.
  • Lots of good stuff on how time is perceived when displayed at a sequence.
  • Can Emotions be Visible?” is the motivating question for chapter five — I would be very curious to see if we could apply his ideas to visualizations — maybe people like pie charts because they seem warm, serene and quiet, whereas a line chart with gridlines is rational, conservative and dynamic?

As an aside, I included a comic in my book on Visualizing Time, more as a whimsy than anything else, but I’m glad that I have at least a tenuous link with Scott McClouds’s highly recommended book! comics

Visualizing Tennis

Published by:

t_Murray TimeLine

I’m a member of the American Statistical Association’s “Statistics in Sport” section ( and I’m also British by birth, so Andy Murray’s success at Wimbledon this year was interesting to me for two reasons. I took a look at some of the data on Murray (collected by IBM’s SlamTracker initiative — ) with a view to doing a little visual analysis, so now I have another reason to be interested …

I found some data on his performance over a few years leading up to Wimbledon 2013 and wanted to look at trends. Now usually I prefer to create several linked visualizations and look at them together, but for this data I found that several of the stats I was interested in worked nicely when plotted in the same system. Here’s what I came up with:


Continue reading

Every Now and Again, a Pie can be Good

Published by:

Pie Map Pie

It is hard to find anyone in visualization today with much time for pie charts. In fact it seems de rigueur to disdain them. And yet we see an awful lot of them. Now, I’m not going to claim that they are a good, general purpose chart, but I do always like to think of times when a chart will actually work well.

When Pie Charts Work At All

One well-known requirement for a pie to have a chance of working is that the data represent a fraction of a whole. That’s the big selling point of pie charts — each data row should represent a fraction of the overall data. So pies work best for percentages and fractions, and second-best for counts, populations, weights — things for which there is a natural feeling that summing them all up and saying “that represents 100%” is good.

On the side of evil is when the numbers must not be summed — if the data represent means (for different sized groups) or degrees Fahrenheit, then a pie representation is flat-out wrong. It’s not a bad rule to say:

Only Use a Pie if it makes sense to think of the data values as summing to 100%

The second rule I’d suggest is based on the inability for people accurately to judge angles. Pies do not work well for that, so if you need accurately to judge numbers, do not use a pie. Pies work well for “A is about twice as big as B” or “ C is definitely smaller in the second pie”. They are not good for “C is very slightly lower than D” or “B is just under 33%”. Stating it positively:

Use a Pie if the goal is to make broad comparisons, not detailed ones.

Finally, I’d offer a third suggestion, rather than a rule. It’s based on the observation that a bar chart (a natural competitor to a pie chart) is very often improved by ordering — high to low values, for example. Pies can often look radically different when categories are re-ordered, and although it is sometimes suggested that you do this ordering for pies, I think that a pie for categories that can be re-ordered would almost certainly look better in another form. Instead I would suggest the following:

Use a Pie when the categories have a natural order

When Pie Charts Work Well

Stephen Few (Save the pies for Dessert: quotes a study showing that when pies have been shown to be actively superior to bar charts — it is when it makes sense to want to compare sums of categories (e.g. the sum of the first two against the sum of the second two); the reason being that in a pie, you can compare angles for multiple segments easily, whereas in a bar chart that is not easy. 

Survey Data: Bar Chart and Pie Chart

Survey Data: Bar Chart and Pie Chart

Continue reading

Vega: A New Grammar-Based Specification for Visualizations

Published by:

US Chorlopleth

I’m a big fan of using languages for visualization rather than canned chart types. I’ve been working with the Grammar of Graphics approach for a number of years within SPSS and now IBM, and my book “Visualizing Time” is composed 95% of Grammar-based visualizations. It’s pretty safe to say it’s my preferred approach.

Protovis (the forerunner of D3, to a great extent) was built on Grammar approach; Bostock and Heer’s 2009 article (on Heer’s site at gives a very good statement of the benefits of the Grammar-based approach as opposed to the “Chart Type” approach:

The main drawback of [the chart type] approach is that it requires a small, closed system. If the desired chart type is not supported, or the desired visual parameter is not exposed in the interface, no recourse is available to the user and either the visualization design must be compromised or another tool adopted. Given the high cost of switching tools, and the iterative nature of visualization design, frequent compromise is likely.

Continue reading

Wikipedia Recent Changes

Published by:

Wikipedia Recent Changes Map shows a good example is a good, clean, simple implementation that addresses the question:

“How is Wikipedia being Edited right now?” 

Some of the features of this visualization that work:

  • Filtered data — the potential data size is huge, and grows as we wait, so the display only shows the most recent events, both on the map and the list below it
  • Multiple linked views — data is shown geographically on the world map, and as a list of events below. This is preferable than trying to have one combined view as each view supports a different set of tasks, and combining them would complicate those tasks (WHERE are the changes coming from? WHAT is being changed?)
  • Not using graphics — the report on what has changed is a simple scrolling text view; since the dat is textual, and it is ordered, a simple list of text makes sense.
  • Different fade-out rates — Using the color for the country to show the most recent changes, and then fading that out in synch with the text description, focuses attention on changes very well. Leaving the dots behind for the changes allows us to keep a longer-term trend in mind.

As a map geek, I might prefer a different projection for the whole earth map; maybe WinkelTripel?

Chord Display (Music)

Published by:

Music Chord Layout.json
ITunes Music with a RAVE Chord visualization

ITunes Music with a RAVE Chord visualization

I took the data from my last post, aggregated up some fields and made a Chord Diagram for it, using RAVE. I was lazy and didn’t do a stellar job on rolling up years, so the year indicated is actually the center of a 4-year span — so 2007 is actually [2005.5, 2009.5] which is a little odd.

No big insights here — podcasts are all recent; alternative music is mostly recent too (Eels and Killers are artists with a large number of songs in my library). Interesting that I didn’t buy a lot of music form around 1999 …

I thought there were more packages that could do chord visualizations, but was only able to find some D3 examples.