Today, as part of our dashboard week, we have been asked to improve a dashboard about constituency complaints published on the New York City data website in order to make it more accessible. Indeed, the website has been receiving many complaints due to the lack of accessibility of the dashboard. To remedy this issue, we were asked to improve the portal using universal design principles and to make the information available to both keyboard only users and screen readers so the dashboard can be seen by as many people as possible.
Besides we were asked to make the new dashboard future-proof so it could stay up to date automatically with the most recent data. To do so, we had to access the New York City open data API by building a workflow on Alteryx, prepare the data and then send it to a Tableau data source that would be later used for our dashboard.
1) Alteryx workflow
The creation of the Alteryx workflow required the utilization of the New-York City open data API (“https://data.cityofnewyork.us/resource/b9km-gdpy.json”) and the first step while using the download tool to retrieve the data from the API was to increase the limit of results returned as the original url only returned 1000 records. I set the records limit to 300000 by adding “/?$limit=300000” as the total amount of records for these data is slightly over 275000.
Then the workflow was pretty straightforward. I used a few Regex tools to parse my headers and values from the downloaded data. I used a multi-row formula (with the help of Leo I must admit) to assign a record ID to my data so I could then transpose them by grouping via the record ID. Finally I did some cleaning, converted my string date fields to a date type and use the ‘Publish to Tableau Server’ tool for the first time to export my cleaned dataset to tableau server. I was now ready to connect to this dataset on Tableau to create a new accessible dashboard.
You can see my workflow below:
2) Tableau Dashboard
We were tasked with improving the original visualisation of the New-York city constituency complaints and keeping all the functionalities included in the latter. The original dashboards received a lot of complaints due to its lack of accessibility. Indeed, after looking at it we noticed many issues. First, a keyboard only user is unable to select and enlarge the chart that he wants to see. However, he can select a borough and zip code via the filters.
The main drawback comes for visually impaired and blind people as the chart ranking the complaint types is cumbersome with too much information so as a consequence the font size is really small for the complaint types, the latter not being really clear and even not making sense at times. They also decided to build a vertical bar chart with diagonal labels for complaint types and to use a light grey font which is aggravating the problem. In addition, people using a narrator don’t have access to any information regarding the actual charts displayed on the website as there is no caption or description.
To build my visualisation I first started by filtering out the complaint types that did not make sense as mentioned previously as well as all the complaint types totalling less than 10 complaints since January 2015 as they would overcrowded the visualisation without adding much value to the viz. Due to time limitation I didn’t notice some empty values for the boroughs and zip codes that should have been filtered out as well. That was the only data preparation that was needed to create the dashboard.
First, I recreated the bar chart about the number of complaints by type by rotating it horizontally so the labels would be easier to read, I added some spacing between the bars, increased the font size and changed its colour to a dark black. I then gave the user the option to select the top N complaints by setting the parameter to the total number of complaint types so the user start with a full overview of the data and can then narrow it down. Finally I added labels at the end of each bar with the number of complaints.
I then rebuild the chart regarding the amount of monthly complaints by changing the original area chart by a bar chart, each bar representing a month. I then added 2 multiple values dropdown filters for borough and zip codes and applied them to all the worksheets as I’ve also added 2 KPIs. The first KPI showing the total amount of complaints and the second KPI showing the amount of complaints of the latest full month and comparing it the same month of the previous year, both KPI updating according the filters selection. I chose to compare with the same month of the previous year as I had to work with the same kind of data for my application to the data school and remembered that some complaints are seasonal. Finally, I made sure that all information conveyed was accessible for visually impaired people by increasing the font sizes of my axis on every charts and making sure the text that was going to be displayed was large enough.
For my dashboard, I also added some text to explain what the dashboard was about and how to navigate and interact with it which would help people using the narrator function. For the same purpose, I added some captions for my 2 charts that I modified to make them clearer. The first issue I ran into when testing my dashboard for keyboard only users on tableau server was that my explicative text was ignored as I used a text box in the dashboard instead of inserting my text in the title of a worksheet. Besides I realised that the narrator wasn’t reading the title of the worksheet if I didn’t have anything in the view so I added that as well and the problem was fixed.
The major issue I ran into when I presented my dashboard on tableau server on full screen mode was that when going through the viz as a keyboard only user, my multiple values dropdown filters were not closing once I made my selection and I had to escape the full screen mode to be able to close them down which kind of ruined my presentation.
Overall, it was a nice experience to see the limitations and difficulties when trying to build a viz accessible to the largest public. It was a real challenge to try to keep in mind all the requirements needed to make it as accessible as possible while creating the viz and really increased my awareness of the different needs people can have to get this type of information.
