Click for the Desktop version
Click for the Mobile version
The Why“You may choose to look the other way, but you can never say again that you did not know.”
- William Wilberforce
Sometimes I wonder ‘What if the shoe was on the other foot? What if I were somewhere else? Would someone on the other side of the planet, fight for my life?’ It reminds me of my own humanity, that we are all common in this – we are given life, and we are assured death; any power that we are given will either be used to seek more power for ourselves, or it will be leveraged to lift others up – there are but two choices. Years ago when I was presented with this truth, I promised myself that to the best of my ability, I would leverage what I’d been given to lift others up. I’m human. I’m selfish. I fail at this more than I want to think about. But every so often I like to think I find a way to deny myself and get this right. And so I wonder ‘What if the shoe were on the other foot?’.
I remember the first time I thought that. Reading about the Rwandan genocide in college made me wonder why more wasn’t done, and why did I have the privilege of being born in a ‘safe world’ where things like that don’t happen. I thought about it again when we worked on the Ebola project, literally seeing life end in the data – ‘What would happen if I were on the other side of this? I hope someone would fight for me….’
Sometimes the data shakes you up. Sometimes you see things you can’t unsee. That happened the day I stumbled into the life expectancy data and visualized evil when it took the form of genocide. The raw melancholy sense that hit me to the core and shook me up for days. I saw the death of a million people in a single line, and I couldn’t keep it inside me. I remembered thinking I had to live long enough to make sure I could publish what I’d found – the world had to see this too.
I know evil is real – I’ve seen it in the data. What I also know is that it thrives in darkness. It becomes powerless in the light. Therefore, the victory is in the awareness of the story, lest we allow our sins to repeat themselves.
This is never more true than it is with human slavery. A crime of humanity that can only exist because the rest of us see an evil so dark it forces us to look the other way. How else can you explain selling one of your children into sexual exploitation so that the rest of your family can eat for another month? How do we go on living in a world where forced labor literally works people to death? Who will stop this? Who believes it can be stopped? If the shoe were on the other foot, wouldn’t you hope it could be stopped? That one day, even you could live a life of freedom?
When Alex Duke brought human trafficking to the forefront, it reminded me of these thoughts all over again. I wanted to take the data and make you feel the injustice that’s actually there. I wanted you to feel and see the 35.8 million people in slavery around the world. If you take the municipal population of the 50 state capitals in the US, it would add up to 12.3 million people, a third of what’s going on. Putting it this way, in the US where there’s a little over 300 million people, were there to be 35.8 million slaves here, more than 1 out of every 9 people would be in slavery.
But that’s actually not the case here. So it’s easy to dismiss this as a problem somewhere out there in a land far far away. But I ask you again – ‘If the shoe were on the other foot, wouldn’t you hope someone would fight for you?’
How do we fight a problem like human trafficking and modern day slavery? I would argue that you would battle this darkness with the only thing that come overcome it – light. So on February 26th, World Slavery Day, we paused and shined a spotlight on this issue that lives in darkness, knowing that the light overwhelms darkness every single time.
This is story I wanted to tell. These are the emotions I wanted you to walk away with. Consider this – the only people who change the world are those who believe they can. Whether you believe you can or believe you can’t, you’re right. If you’re reading this, I would bet you’ve been given a tremendous amount of opportunity over the course of your life. What are you doing with that talent? What of your work will echo beyond your grave? Maybe you think you’re powerless given the scale of the problem, but I assure you you’re not. The world is changed time again by a few individuals who raise their hands and are willing to take on the challenge. I believe that’s in all of us, whether we want to admit it or not.
And this is why stories are powerful. Stories and ideas are bigger than their creators. They are not limited by hearts that pump, or air to breathe. Stories and ideas, and our reaction to them, are what change the world. And that is why we chose to tell stories. That is why we visualized this data, knowing that once you’ve seen and understood the story of the data, you would never be able to again say that you did not know.
The How
I wanted to do something different. I wanted the tool to disappear and for the story to be front and center. I was inspired by three different sources to go beyond what I already knew was possible. Not too long ago I saw this piece from the NTY on OPEC Oil Prices, a beautiful ‘scrollytelling’ piece Andy Cotgreave highlighted a few months back. It struck me how immersive it was and how I felt I was on a data driven journey guided by the authors. I wanted to make Tableau do this, but I needed some additional ideas on how that could be done. When there’s something hard that I need to spitball ideas on, I call Chris Toomey. Chris had already challenged me to use JavaScript to somehow take the story I would create to the next level. I reminded him for the 117th time that “I’m not a coder” and “I don’t like coding”, yet I felt like there was never such a time to learn as this. I already had the story in my head of what I wanted to show, and Chris patiently worked with me for two hours of looking through different tools and JS libraries that might make this idea come to life. We finally settled on Slides.com and Reveal.JS based on the awesome presentation of Allan Walker, Anya A’Hearn, and Jeffery Shaffer at the Tableau Conference in October 2015, where they demonstrated the new capabilities of presenting Tableau dashboards with enhanced user experience. Given the fact that I had about 12-16 hours of time to put all this together, I decided this was the way to move forward. Lastly, I was inspired by Alex Duke whose passion for this topic required me to go above and beyond what was easy and comfortable. I’m proud of her for choosing to bring this dark topic to the forefront.
First things first, I had to create the visualizations. I had already spent a number of hours reading through the 2014 Global Slavery Index and found a number of stories I wanted to bring to light, but the data and the visualizations had to be front and center in order for the impact to be created. To be honest this was fairly simple and straight forward, as you can tell I’m not doing anything complicated with the visualizations. I needed a way to rapidly bring this together, while at the same time enhance the user experience by leveraging JavaScript to be more immersive for the end user. I’ve said it before and if you know me, you know I’m not a coder, and for that reason Slides.com was a lifesaver for me. Slides.com is like a lightweight version of PowerPoint, but with the ability to embed websites and is hosted online (public for free, private for a small cost).
As I began to test and iterate embedding these into the story on Slides.com (via iframe with the embed code off Tableau Public), I noticed something that I found to be very distracting – Tableau Public. See each viz hosted by Tableau Public has a footer at the bottom, and while we used to be able to use the embed parameters in the URL (which still works for Tableau Server btw) the newer versions of Tableau Public require that this footer shows up. I’ve also been told by Ben Jones that removing it is a no no in the eyes of Tableau based on the current license agreement. But after seeing this from Chris DeMartini where he created a polar clock and got rid of the Tableau Public footer by sizing the viz to be 100% width and 120% height, I figured I could ask for forgiveness later.
While it’s possible to include just the URL from Tableau Public, I actually ended up writing an individual html file for each of the visualizations (10 in all) that became part of the story. I did this so that I could write the custom HTML to cover the footer. Here’s an example of the code from the first map visualization:
<html><head>
<title>Human Trafficking Story</title>
<meta name="Nelson Davis">
<meta name="description" content="Human Trafficking Story">
<!--<script src="http://public.tableau.com/javascripts/api/tableau-2.0.0.js" type="text/javascript"></script>-->
<script src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js" type="text/javascript"></script></head><body>
<style>
body{
background-color:white;
max-width: 940px;
margin: 0 auto;
}
#container {
width: 100%;
height: 90vh;
}
#viz {
width: 100%;
height: 80vh;
}
#tableauViz1 {
width: 100%%;
height: 100%;
overflow:hidden;
}
</style>
<div id="container">
<div id="viz">
<div id="tableauViz1"><iframe frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" src="https://public.tableau.com/views/HumanTraffickingStory/NumberInSlavery?:showVizHome=no&:display_spinner=no&:jsdebug=n&:embed=y&:display_overlay=no&:display_static_image=no&:animate_transition=yes&:embed=y&:showVizHome=n&:toolbar=n&:apiID=handler0" style="display: block; width: 100%; height: 120%; visibility: visible;"></iframe></div>
</div>
</div>
<script>
var viz, one, workbooka, activeSheet, Worksheet, worksheet;
var onePh = document.getElementById("tableauViz1");
var oneUrl = "https://public.tableau.com/views/HumanTraffickingStory/NumberInSlavery?:showVizHome=no&:display_spinner=no&:jsdebug=n&:embed=y&:display_overlay=no&:display_static_image=no&:animate_transition=yes"; //Total Number in Slavery
var oneOptions = {
width: "100%",
height: "120%",
hideTabs: true,
hideToolbar: true,
onFirstInteractive: function () {
}
};
viz1 = new tableauSoftware.Viz(onePh, oneUrl, oneOptions);
;
</script>
</body></html>
Again, I basically took this code from Chris DeMartini, stripped out the 1 second refresh, and changed the URL to my Tableau Public workbook. Once I had done that for each of the 10 visualizations, I began to create the linear story using the Slides.com interface. Here’s a quick demo of the tool:
Once I had gotten to a place where I had finished creating slides, Slides.com gives you two options for sharing the content. They can host it – publicly (no security) for free, or include security for a small monthly fee. The other option is to export the HTML and leverage the Reveal.js library for enhanced functionality. Some of the big pluses with using the export is that you can tweak a number of things in the code including:
Ultimately I ended up using both ways of sharing. If you consumed the ‘desktop’ version of the Human Trafficking Story (bitly.com/htsdesktop) then you viewed the HTML export with the Reveal.js tweaks I made (preloading vizzes, auto-playing the video, etc….) which is hosted on a little webserver I have. If you viewed the ‘mobile’ version of the story (bitly.com/htsmobile) then you went to the version hosted by Slides.com without the tweaks. I don’t know why, but the version with the reveal.js tweaks (the ‘desktop’ version) didn’t do very well on my iPhone (it was basically unusable). I’m sure I did something wrong, but I ended up finding that the Slides.com version was solid on the mobile device.
That’s a brief dive into everything. I know I didn’t go step by step, but I’d really encourage you to just go ahead and get your hands dirty with the new toolset. Also note, I’m not saying this is the end all be all – there are thousands of JavaScript libraries that do great things like this. If I can figure out how to make this work (all for the last time, I’m not a coder) then I think it’s worth your time to give it a shot.
The Other Why
You should know the other reason I went beyond what I could do in Tableau alone was I wanted to push the envelope with Tableau and Storytelling, and put some meat on the framework that Jeffery, Anya, and Allan provided. I wanted to push and see what Tableau’s Story Points could be reimagined to become. I hope a future version offers everything you see here and more. This has helped start a number of conversations that I think could ultimately lead to a product where this could be much easier.
I’ve often heard it said that ‘Tableau is the last mile of data’ because much of the heavy lifting ETL, integration, etc… happens before the analysis and visualization. If we keep with that analogy then storytelling should be considered the last 100 yards before the finish. Presenting data and making that presentation have an impact is the whole point of visualization and analysis. If you can’t articulate the story the data is trying to convey, then all the other steps you’ve gone through to get to this point have been for not. My hope is to make sprinting those last 100 yard easier and faster as we go forward.
Thanks so much for reading and following along.
Nelson
