Introduction
This project’s aim was to practice with CARTO, a visualization software that specializes in maps. I decided this would be a great opportunity to expand my previous exploration in affordable housing to see if Carto handled map visualization better than Tableau. The main goal was to re-create a map that visualizes affordable housing obligations for each municipality in the state. I could then compare how Carto handles interactions, as well as test base load times.
Methods
For this map, the dataset came from the NJ Fair Share Housing Center, a non-profit dedicated to defending housing rights for moderate and low-income people. Due to the complexities of the Mount Laurel Doctrine and the latest court ruling on municipality responsibility to provide affordable housing, fair share housing obligations are broken up into 4 primary categories. My previous post goes into detail on the difficulties of balancing accurate representation of the data (for lawmakers, community leaders, developers, etc) while trying to simplify complex terms and categories for a non-expert to understand. This post will look more closely at the technical challenges of mapping in Carto vs. Tableau.
To start, Carto generally has a more intuitive user interface, which makes creating a new map easier than Tableau. utilizing the stock base map from Carto, I overlaid a shape map displaying NJ municipalities. Then, all that needed to be done was connect the base layer (shape file) to the Fair Share housing data via a common column attribute – municipal codes.
Generally this process worked well, after performing some data cleaning. Notably, it was critical to ensure that the Fair Share input data remained in “number” format (vs “string”), in order for Carto to properly detect and apply choropleth styling. This step in the process was less intuitive than Tableau (which had no issue with the original, unformatted data), but understandable after learning more about how Carto works.
In the performance category, Carto certainly beat out Tableau in base load times, as well as the speed at which the map can be panned and interacted with. Carto is also a bit more seamless when loading in map chunks as you pan, which causes a bit less popping. Overall this is a significant improvement over Tableau, which struggled to pan and zoom when processing the municipality-level shape dataset.
Another significant point of comparison is both software’s ability to display and customize informational popovers.
Tableau takes a WYSIWYG approach, providing a full-text editor to create layouts. Carto provides basic features without customization, and requires custom HTML and CSS for more advanced displays. Recreating the layouts above proved to be quite complex in Carto, requiring significant trial-and-error codework (1,2) to mix custom HTML with the required groupings and classes needed to render dynamic values. Unfortunately, I encountered two frustrating walls which significantly hamper each method.
- Carto Hover – Hover capabilities are promising due to the reduction in input effort needed to explore the data (I don’t have to click to view content, and there’s a greater chance someone with mouse input will understand the map is ineractive). The main issue is that it does not appear that hover-over popups can have their width changed to be larger than 180px, due to the width of the popover being on a higher-level div than the custom html editor allows you to edit. This limitation is quite frustrating, as an otherwise powerful cusomization feature is limited by a layout option so fundamental that it’s the only layout feature you can change for click popovers without customization.
- Carto Click – When trying to implement this popup via the click method, I quickly found out that the max-height of the popup appears to be within a dynamic html element that can’t be overwritten. This blocker is even more problematic than the hover (line length) issues, and led me to discard this option.
Results
Ultimately, for this lab I went with the hover option as I felt the reduced interaction costs (both by not having to click, and then not having to scroll the popover) outweighed the line wrapping issues. The final result, an interactive viz showing affordable housing needs in NJ, is overall an improvement over my original Tableau implementation due to less laggy map interactions and the bonus automatic display of municipality names for easier initial orienting.
Reflection
Reflecting on the more technical focus this lab took, I was a bit disappointed that Carto did not clearly beat out Tableau in its mapping features. I plan to focus on affordable housing for my final project, and this lab still has me less sure on if it’s worth embedding a Carto map into Tableau for the performance improvements, to the detriment of content display and the ability to have visualizations interact with each other (as could be done if everything was natively done in Tableau). I also believe that too much time was spent trying to solve technical issues and make layouts perfect, vs. focusing on more important big-picture topics, such as the best method to normalize this per-municipality affordable housing data. But, it was still a plus to learn Carto’s features, and I plan to re-think the pro’s and cons when the map becomes more complex for the final project (likely through the inclusion of toggles to display related data that drives these housing numbers, like population and amount of developable land per municipality).