Raw is a web-based tool that helps to fill the gap between spreadsheets and vector graphics. Developed by Density Design, a research lab in the Design Department of the Politecnico di Milano, Raw was released last October. You can use it here.

In this post, I’m going to show you how to use it to make an alluvial diagram, which allows the user to represent flows and changes in network structures and to see correlations between categorical dimensions.

Let’s use this very simple data set, made with Numbers or Excel (no empty raws), to check if the 15 Interhacktives did or did not write at least one post on their personal Facebook and Twitter accounts on Wednesday 4 December.

 

Data

On the Raw webpage, simply paste the data in the box.

Raw-1

Now scroll down the page to the layout section. You can choose between a range of graphics but it’s important to know which one is the best to show your set of data. In this case let’s choose the alluvial diagram, because we want to show correlations between the use of Facebook and Twitter.

Raw-2

Now we can start mapping the data, dropping the “Twitter” and the “Facebook” tabs in the “dimensions” box.

Raw-3

Scroll down to the visualization section, and you’ll have your graph, with the options to customize the layout in terms of height, margin, node padding, node width and width of the graph.

Raw-4

You can add and explore as many nodes as you want, such as the names of each Interhacktive, to follow each performance. Let’s add a new column with each name to our data.

Raw-5

And then let’s visualize the data again, dropping the “Name” tab on the top, followed by the “Twitter” tab and the “Facebook” tab.

Raw-6

 

The last step consists of exporting the data, and you can choose to download the .svg file, which allows you to edit the vector graph on Illustrator, or the .png file, to edit it on Photoshop. You can also download the .json file or embed the graph in an HTML document.

Enjoy!

6 COMMENTS

  1. […] I chose to use Raw to create the diagram, since it’s so simple but versatile, perfect for quick visualisations. If you’re looking for a tutorial on how to use it effectively to create an alluvial diagram, read my fellow Interhacktive Laura’s great tutorial here. […]

Leave a Reply