‘Tis the #IronViz season…
Tableau is holding it’s third and final feeder competition for the #IronViz competition in Austin, Texas at TC16. The winner gets the chance to go up on stage and face the pressure of a 20-min viz-off. That sounds like fun…doesn’t it?
Direct Viz Link
Note: The desktop and phone experience is completely different.
Use Device Designer – Go!
I spent quite awhile fussing over different topics, looking at different data sources, trying to decide if I should use Google Sheets, and looking at some older vizzes of mine that are ripe for a refresh with mobile layouts. After some deliberations, I decided I would #MakeoverMonday my New Rat City viz looking at reported rat sightings in New York City.
My first idea was to see if I can get the NYC Open Data feed into a Google Sheet so it would refresh. I spent way too long on this idea. The source table was not HTML. I spent a long time trying many different things, but kept running into api limits and Google Sheet row limitations. I even tried to import a js code snippet for an ImportJSON function (but that is for another post).
In the end, I just downloaded an updated csv.
The Desktop Layout
I created this viz a few months ago, but I think it needed a Tableau 10 refresh. I updated all the fonts to Tableau Book (my new favorite) and some of the colors.
I did not adjust much else on this view. My intention was to retain the deep analysis the desktop version offered and build on it for mobile. You can filter by year, borough, and building type to see where the sightings occurred. My favorite part of this viz is the moving average lines across the top.
Also, in an attempt to use all of the given space, this layout features Robert Rouse’s collapsible containers. I use it here to swap the entire dashboard out for a full screen video experience. Just hit the panic button in the top right corner to get there!
The Mobile Layout
Here where it gets interesting.
My intention was to utilize the same collapsible containers on a landscape mobile layout. I was pleasantly surprised to see that I was able to modify the fixed layout on the phone layout without messing up the desktop version. I spent a long time tweaking this out. I am not a fan of tooltips on mobile. I think the tapping can be clunky. So, I designed some mobile versions of the desktop sheets and brought them into the phone layout. This worked pretty well and it looked perfect on my iPhone.
There were two problems.
1) This is what it looked like when you opened the viz in portrait because of the collapsible containers. Every viewer would see this and have to figure out to rotate their phone. Yuck.
2) I asked Pooja to test on her Android phone and it was all cutoff. The dimensions on her phone were 340px wide and I designed for 375px x 667x.
Maybe I’ll just revamp the whole thing and make it portrait?
I tried to design for an iPhone 5 screen width thinking it would fit on any screen. Well, the collapsible containers played hell on my iPhone 6 and it was cutoff. It looked fine on Pooja’s Note 3.
The collapsible containers are not going to work on mobile due to the nature of having to fix width on everything. At least not if you are designing for a multitude of devices.
I borrowed some Allan Walker magic (code) from some of my past work with the JS api. I started to design a mobile experience. I wanted it to all fit on one screen with no scrolling. I still wanted to keep the map, but make it work for mobile. The first step was to create a parameter and filter to allow for the animation. The rat map has over 75,000 marks in it so it was pretty slow rendering using the api. I even got bored watching it. I needed to cut down the marks.
I created a HexBin map which basically groups the lat/long coordinates together. Using this method, I was able to cut the map marks down to 1,730 max. Also, I really liked that my mobile experience was completely different from the desktop.
I had customized the mobile experience, but I wanted to do something fun that allowed the reader to see how many more animations were coming. What would be better than a rat scurrying across the screen? And wouldn’t it be even better if it was on top on a image of NYC?
I published the viz and hosted the html file on my blog. Finally, I could get to see the animations on my phone…but, it would only show the desktop layout scaled to my phone. The JS api does not use the embed code, instead it uses the share link. I needed to somehow determine what size viewport was being used. GOOGLE TIME.
All it took was adding this meta tag at the top of the html.
Wrapping it up, finally!
Wow, you are still here? It would seem I definitely took the long road, with tons of twists and turns, and a hell of a lot of testing, but I am happy with the overall result. In the end, I was able to design a custom animated mobile experience using the JS api while allowing for the same viz to retain it’s desktop layout for deep analysis.
I also want to thank Pooja Gandhi and Rody Zakovich for peer reviews. Some late night texts were definitely exchanged and I appreciate it you two!
Thanks for reading! Sorry it was so long!