Tag Archives: visualisation

How to: create a treemap in Tableau

tableau treemap buzzfeed

Treemaps are a great alternative to pie charts when you want to tell a story about the composition of something: whereas pie charts can be limiting, treemaps allow users to drill down into ‘parts of parts’, and group elements within particular categories.

In this post I’m going to show you how to create a treemap in the free visualisation software Tableau Public to show how the majority of BuzzFeed’s content views in 2015 took place away from its website.

This data suits a treemap particularly well: although the traffic is broadly split between ‘website’, ‘Facebook’, ‘Snapchat’, ‘YouTube’ and ‘other’, there are also subdivisions within some of those platforms – for example, Facebook traffic is split between video and images, and website traffic is split between direct visits, those via Google, and those via Facebook. A treemap allows users to explore those subtleties in a way that pie charts do not.

Step 1: Get the data in the right format

To create a treemap it is vital that you get the data in the correct format to begin with. In particular, you will need to make sure that as well as a primary ‘category’ column, you also have a second ‘sub category’ column. They don’t have to have these names, but that general concept is important. A third column should contain the values to be visualised.

treemap data format

The key feature to look for in this data structure is that you should expect to see categories in your main ‘category’ column appear more than once. In our BuzzFeed data, for example, the platform category ‘website’ appears 3 times – once for each ‘Source’ sub category of ‘Direct traffic’, ‘Traffic from Google’ and ‘Traffic from Facebook’.

Also, make sure that your values only use numbers – don’t add percentage symbols, commas or other characters that might lead to it being interpreted as text and mean you have to reclassify the data later.

If you need a dataset to work with, I’ve uploaded the Buzzfeed figures here (you’ll need to save it to your computer).

Begin creating your chart

In Tableau Public, connect to the data you’ve just created, and go to your empty worksheet. On the left you should see your category (in this case, ‘Platform’) and sub category (in this case ‘Source’) columns in the Dimensions area; and underneath that in the Measures area, your values (in this case, ‘Traffic %’).

Click and drag your main category dimension (‘Platform’) into the Rows area at the top. Then do the same with your measure (‘Traffic %’) so that it looks like this:

Platform and traffic % in rows

Tableau will automatically draw a chart for you – but ignore that. Instead, look to the right hand side where the ‘Show me’ menu should now be showing which chart types you can use with this combination of data. If it doesn’t show, click ‘Show me’ in the upper right corner.

One of the options available should be the treemap – it’s normally the first option four rows down. Click on this to change the chart to a treemap.

Show me menu

Now we have a treemap – but it’s only showing the top-level category (in this case, ‘Platform’). We need to customise it a bit to get a treemap which allows users to see the sub-categories too.

Customising the colours and slices

To the left of the chart itself you should see a box titled Marks containing buttons for Color, Size, Label, Detail and Tooltip. And underneath those buttons, icons indicating three settings:

  • The ‘Size’ icon is set by ‘SUM(Traffic %)’
  • The ‘Color’ icon is also set by ‘SUM(Traffic %)’
  • The ‘Label’ icon is set by ‘Platform’

Treemap

First we need to change it so that the ‘Color’ is determined by the main category (‘Platform’). To do that, click and drag the ‘Platform’ dimension onto the Color button.

Now, instead of one colour in different shades representing an amount, you should have five colours – one for each category:

Treemap coloured by category

We can customise the colour further by clicking on the ‘Color’ button and clicking Edit colors…. This will open up a new window with a list of categories on the left, and a palette on the right. In our case it makes sense to assign relevant colours to each platform: yellow for Snapchat, red for YouTube, and blue for Facebook. I’ve also chosen grey for ‘Other’. If you prefer other shades you can access other palettes using the dropdown menu in the upper right corner. Click ‘Apply’ to see the results, and ‘OK’ to apply and leave this window.

Edit colors menu

Next, we need to bring in that sub-category (‘Category’) in. A good place to do this is on the ‘Label’: because we are already using colour to indicate the platform, we need the label to add that extra information about the source of traffic to that platform.

To do this, click and drag the ‘Category’ dimension onto the Label button.

Now the area of colour for each platform should now split into further parts based on this new category. In addition, the text labels should reflect that information too.

Treemap

Other customisation

The chart is now pretty much ready. That just leaves the title to customise: at the moment it is automatically taking the name of the sheet, so you can change the title by double-clicking on the sheet tab at the bottom and renaming it. Alternatively you can double-click on the sheet title and replacing it in the window that opens.

You can also customise the Tooltip – for example a % sign needs adding after the percentage figure on each slice.

Advertisements

What I learned at Jan Willem Tulp’s workshop at Tutki! 2016/NODA16

Jan Willem Tulp

Jan Willem Tulp’s workshop

In a guest post first published on her blog, Maria Crosas Batista sums up the key takeaways from a session at the Nordic investigative journalism conference Tutki! 2016 by Jan Willem Tulp, the data experience designer behind Tulp Interactive.

Continue reading

Just add JavaScript: use these 3 tools to get instant interactivity

Maria Crosas Batista highlights ways to get started with adding interactivity to your journalism.

This post is for beginners that are learning HTML, CSS and JavaScript. Below are 3 useful websites to embed maps, charts and timelines in your HTML without going crazy. Continue reading

Visualising 40 years of organised crime in Mexico: NarcoData

Narco Data
How has Mexico moved from 2 cartels in the 1970s to 9 cartels today? That is the question the Mexican website Animal Político wanted to answer when in January 2015 they started to work on NarcoData, a data journalism project that shows the evolution of 40 years of drug dealing in Mexico, home to the most violent cartels in the world. Carla Pedret reports.

The origin of the project was a document Animal Político journalist Tania Montalvo obtained in October 2014 from the country’s Attorney General’s Office, after a request under the Mexican Freedom of Information lawContinue reading

“It’s black and white to colour”: Ben Fry on data visualisation’s past and future

Ben-Fry-visualization

Ben Fry published his book Visualizing Data in 2007, before the term ‘data journalism’ had entered the professional vocabulary. Since then, Fry has been developing Processing, an open source “language for learning how to code within the context of the visual arts”, and he is a principal at Fathom, a Boston design and software consultancy which has created visualisation projects for National Geographic; Bill, Hillary & Chelsea Clinton Foundation and Bill & Melinda Gates Foundation

Catalina George asked him a few questions about his current work and his advice to aspiring data journalists.

Visualisation, a reinvented tool

World-eats-visualization-Fathom

For a better view of the world calories consumption, the user can see how much this differs from China to the UK @Fathom

One of your Fathom projects was a data visualisation for National Geographic’s What the World Eats”. The graphic part can play a great role to enrich our perception and understanding of reality. But what does the development of visualisation mean for journalism?

I think what’s called “visualisation” has been around a long time for journalism. Otto Neurath was doing this in the 1920s. I think it’s been receiving more attention in recent years because we have the means to more easily distribute interactive works, which is a boon for more sophisticated takes on data. Continue reading

When to use shape maps in data visualisation: part 2 of a great big guide

maps xkcd

xkcd’s take on mapping, via Duarte Romero

In a previous post I explained some of the considerations in deciding to use a map in data visualisation, and went into detail about mapping points and heatmaps. In this second part, taken from the MA in Online Journalism at Birmingham City University, I’m going to look at other types of maps: shape-based maps and image maps.

Mapping shapes

A more ambitious alternative to mapping points is to map shapes: in other words, instead of each data point being placed on a specific point on a map, instead different areas on that map are drawn and coloured/labelled according to the relevant data. Continue reading

When to use maps in data visualisation: a great big guide

Zombie map

Matt Bierbaum’s zombie map allows you to simulate outbreaks

When it comes to data visualisation, everyone loves a map. More exciting than a chart, easier than an infographic, it’s generally the first thing that journalists and journalism students alike ask: “How can we create a map?”

But just because you have some geographical data doesn’t mean you should map it.

Here’s why: maps, like all methods of visualisation, are designed for a purpose. They tell particular types of stories well – but not all of them.

There is also more than one type of map. You can map points, shapes, or routes. You can create heat maps and choropleth maps.

I’ll tackle those different types of maps first – and then the sorts of stories you might tell with each. But the key rule running throughout is this: make sure you are clear what story you are trying to tell, or the story that users will try to find. The test is whether a map does that job best. Continue reading