Make an alluvial diagram

Hi everyone! I’m really sorry I can’t be there today. I have to be at a meeting in Chicago. But I thought you might enjoy learning how to make a new kind of visualization, called an alluvial diagram. (“Alluvial” means river, and you’ll see why it’s called that.) For our data, we’ll use the answers you gave to the questionnaire I administered on Wednesday.

This is so easy you hardly need directions! But here they are.

1. Download our dataset

Click here to download your questionnaire responses from my Dropbox. (If you have trouble with that link for some reason, just enter bit.ly/dh101qanda into your browser’s address bar.)

Open it up and take a look. Do you remember what kind of variables these are? They’re nominal variables (AKA categorical variables) because they’re not in any inherent order and they have no numerical value. Alluvial diagrams are great for nominal data.

download-our-dataset

2. Open RAW

Open up a browser and go to raw.densitydesign.org. This is a drag-and-drop data-visualization platform that’s designed to make it easy to create some of the less commonly used kinds of visualizations, like alluvial diagrams. Go ahead and click on Use it Now.

open-raw

3. Drag your data into the box

First, figure out where you downloaded the file in Step 1. Then drag it onto the white box. You should then be able to see the data values from the spreadsheet.

Note: Sometimes RAW gets overwhelmed if too many people are using it at once. If file uploading isn’t working for you, you may have to just look over the shoulder of a friend.

drag-your-data-into-the-box

4. Select “Alluvial Diagram”

Scroll down to see the various visualization options. Usually, Alluvial Diagram is already selected, but if not, click on it. (While you’re here, check out the other options! They may come in handy later.)

select-alluvial-diagram

5. Choose some dimensions

This will make more sense once you’ve done it. From the left side, grab a green block (anything but Timestamp and Your first name) and drag it into the box labeled Steps. Do that with at least one other block.

choose-some-dimensions

6. Expand the width of your visualization

Scroll down until you see the Customize your Visualization subhead. Under the Width heading, enter 500. (This means 500 pixels, which is pretty big.)

expand-the-width-of-your-visualization

7. Admire your work

Scroll down to see the visualization! Innnnteresting. There seems to be a correlation between Dr. Seuss and Beyoncé…

Try scrolling up and experimenting with adding more or different dimensions, and see what happens! Try other visualization types, too!

admire-your-work

8. Bonus: Embed your visualization

If, later on, you decide you want to embed a RAW visualization on a website, you can just grab the HTML code at the bottom of the page. (Or you can download an image.)

bonus-embed-your-visualization