Skip to main content

The same COVID visualization - Tableau vs D3.js

I have been working from home since mid-March, and plans to go back to the office have been delayed twice due to the rise in cases in California throughout June and July.  Currently, we are targeted to return to work toward on August 23rd.  If new cases keep rising as this date approaches, there is good indication that our back to work plan will be delayed.

For some reason this interested me enough to dive into the process of dashboard creation and visualization.

Define the project

I want to monitor the new cases of COVID or death count per day.  If the rate of increase is as large as the rate of increase in June and July, then there is be a good chance the back to work plan will be delayed.

Ultimately, I would like a chart or dashboard showing the number of new cases or deaths by day for each US state.  This solution should be easily accessible and shareable, and should require no maintenance on my part to update the data each day.

Brainstorming a solution

The starting point of this project is really the data source.  If we aren't able to find an automated source of data, then this project will not be feasible.  Luckily, there are a lot of sources of data we can choose from.  How about a JSON API - https://covidtracking.com/data/api?

A solution that is easily accessible and shareable sounds a lot like a web page.  If our solution was accessible via url, this will be a huge plus for the project.  

There are so many ways to create a dashboard or chart, but given we are planning on creating a solution that is accessible via url our choices can be narrowed down.  I am choosing two different approaches, one with Tableau and another with D3.js.

Requiring no maintenance for this project means each day new data should present itself on the dashboard without my intervention.

Tableau vs D3.js

Creating a basic visualization

If you have ever used Tableau, then you might agree that it is a very easy and fun way to get some visualizations looking very nice in a short time.  Sooo fun and easy.

D3 is a much more intense experience for creating visualizations.  I have not enjoyed working with D3 in the past because of it steep learning curve and the amount of time it took me to accomplish relatively simple things.  If you are creating basic charts and graphs the you might also find D3 somewhat frustrating.  On the flip side, more customization is possible as well as the creation of non-standard visualizations.

Ability to connect to data

Tableau is great at connecting to a huge amount of data sources.  It can connect to our chosen COVID data, but requires an interim step - something called a Tableau Web Data Connector.  This let's Tableau connect to a JSON API.  Ironically, for all of the ways you can connect to data with Tableau, connecting to a JSON API does take a bit of work.

D3 also has many ways of connecting to data.  For our purposes, it is perfect for connecting to our COVID data.

Share visualization via internet

Tableau itself cannot share a visualization to the internet, but if you upload a Tableau project to something called Tableau Server, then you will be good to go.  There is a way to embed visualizations in a web page or share a link.

D3 is written in JavaScript, so sharing via the internet is the name of the game here.

Cost

I'll be honest - Tableau is expensive.  It costs quite a bit for an individual to use Tableau on their own desktop, then a huge amount more to run Tableau Server.  As in individual, the amount of time saved in ease of use will not be worth the cost.

With D3 the cost is in your time.  It will take a bit of work to get rolling even to produce some very uninspiring charts.

Implementation

Let's start off with the Tableau implementation.  First off, I am using the free version of Tableau (Public).  As I mentioned earlier, we also need to do some work to get Tableau Public to recognize our data source.  It turns out that someone else had this idea and already did the work.  I realized I needed to modify the repository just a bit, so I forked a version and with the help of GitHub Pages placed the Tableau Web Data Connector here: https://liamcryan.github.io/CovidTrackingWDC/index.html.

From this point, creating the visualization was a very standard Tableau process - connect the data, create the visualization and upload to Tableau Public (Server).  Ta-da! A nice dashboard.


Now, let's talk about the D3 implementation.  I want to replicate all of the same charts as in the Tableau version - a line chart, a vertical bar chart and choropleth (US map) chart.  I found a tutorial for each of these types of chart somewhere on the internet.  I just needed to modify them enough so that they would work with the COVID data.  Once the charts were made (by the way, the choropleth chart the trickiest), they needed to be arranged on the HTML page appropriately.  I used something called CSS Grid to arrange them nicely.  Using GitHub Pages, again, so we can play with this visualization:  https://liamcryan.github.io/covid-snapshot/.


Recap

I spent a WHOLE LOT of time working on the D3 visualization, and I still missed out on a lot of the interactivity that Tableau provides out of the box.

Tableau Public does not update Web Data Connector data automatically, so that is a fail.  I would need to re-publish the Tableau Public workbook each day for the data to update - one of the project main points was low maintenance, and this does not fit the bill.

I was really impressed with how fast D3 is when playing with the parameters and while there isn't quite the same level of interaction as the Tableau visualization, I like it better.  The D3 visualization actually does touch on all of project's main points, and I would say definite win here.

Comments

Post a Comment

Popular posts from this blog

PPTX Templates with Python

The ability to create PowerPoint presentations is a requirement these days for most companies. So much so, you may think even stating so is unnecessary. A lot of people are used reading PowerPoint presentations, and despite how much you might dislike it, you are most likely going to need to make reports with PowerPoint. From my perspective as a data analyst, the problem with PowerPoint is loading data to be visualized. I find myself creating charts or tables outside of PowerPoint, and repeatedly manually copying and pasting into the presentation. When you are creating the same presentation day after day, week after week, and the only thing changing is the data used to populate the report, you might think, "why am I doing this?", or "why am I still doing this?". There is a better way, and you don't really need any programming skills (although it won't hurt to be familiar using the command line).  tl;dr Go here to try it out the examples. pptx-template ppt
Post a Comment
Read more

Getting Into Trouble Scraping the Web

The idea behind web scraping is to get information from a web page.  When people talk about web scraping, people are usually talking about running a computer program to extract information. How to scrape the web You are scraping information right now with your eyes as you read this sentence.  You opened your browser, visited this site, and are mentally tracking things you care about. Ok, ok, so technically that's not web scraping, but the process is similar.  You might really like to scrape my favicon.  Let's try extracting it using Python: >>> import urllib.request >>> web_page_response = urllib . request . urlopen( 'https://hellofrom.liamcryan.com/) >>> html = web_page_response . read() >>> html[html . find(b 'href' ) + 5 :html . find(b "'" , html . find(b 'href' ) + 10 )] b "https://hellofrom.liamcryan.com/favicon.ico" So, there is is; a quick and dirty program that scra
1 comment
Read more

Training for Bryce Canyon 50K

I am starting to get super excited for a long-coming run in Bryce canyon with some friends on May 29, 2021.  The race is 50K - farther than any of us have run.  Well, I may have run one other 50K, but it wasn't exactly a run if you know what I mean. I decided on February 1st that I needed to start easing into training for the race.  My training motivation needed a boost as well as some better planning & record keeping. To ease into training, I chose a few trails and planned to complete them every one to two weeks.  Here is the list of trails I chose:   https://www.alltrails.com/lists/training--1311 .  To really hold myself accountable, I created calendar events and reminders with the trails details. I had planned three runs on my calendar, so that's how many I ran despite wanting to do more (amazing how well calendar planning works!).  The trail running had served as a great motivator, and I felt motivated enough to run on the more boring streets near my house.  By the time
Post a Comment
Read more