Data Humanism: Visualizing data to connect people with numbers



A web-based data visualization platform that unpacks and translates the quantitative data on Parks and Recreation facilities into informative and engaging visuals to aid both citizens and city officials in making more informed choices.



MY ROLE: Data Visualization, Visual Design, UI Design, Storytelling

TOOLS: Google Sheets, Illustrator, Keynote


Human nature is in the center of data universe.
Meaningful connections with data are important for understanding them.
— Giorgia Lupi





Why do it?

There is a huge amount of data in the digital world that we live in but it is the same abundance of data that makes it difficult to process it into a relatable and usable form. To make meaningful connections, it is important to tell a story that piques curiosity and generates interest, something people would want to see and know about, understand its purpose and sense a connection to their lives.


How might I visualize the available datasets to explore patterns and relationships between them in a way that is both relatable to and usable by people?



Collecting & Cleaning the Data

Looking through the available data, I decided to map the demographic data along with the data on parks and recreation facilities in Allegheny county to explore patterns and relationships between the two.

To make sense of the data I had gathered, I cleaned it up and categorized it using data organization tools like Coordinate systems and LATCH principles. These data sorting methods enabled easy analysis, comparing, and contrasting of the information packaged in the data.

The aim for the visualization was to investigate the relationship, if any, between civic infrastructure and the demographic make up of a neighborhood and present it in a way that people could engage with.


Exploring the datasets

I mapped datasets like population density, Land area, Average age, Median Income in each neighborhood against the number of parks and recreational facilities in that neighborhood.

On exploring the data, I found no definite patterns or relations between the various datasets. If there were any, my untrained eye definitely missed so. And, although I didn’t get straightforward results I continued to visualize the data sets to explore in the hope to learn something new in the process and with the intent to find a way to make these datasets useful for people.

Due to project timeline constraints, I explored only about half of the 91 neighborhoods in Pittsburgh.

Screen Shot 2018-01-29 at 2.22.34 AM.png


Exploring the form

Nathan Yau, author of ‘Visualize This’ and ‘Data points’, provides valuable insight into data strategies and visual systems. He suggests that visualization plays a major role in making data available and useful to those who are and aren’t necessarily data experts.

To build a more cohesive visual design language, I played with the use of visual variables to develop ways that linked form and function; ways in which data could be represented based on its meaning.

Initial concept : User testing, Feedback & Redesign

Using speed dating as a research method, I interviewed 10 classmates, asking for feedbacks on my initial concepts. Insights from the user testing:

  • The narrative works well and generates curiosity that leads to engagement

  • The nuances of interactions were overshadowing the representations of the content, focus on form explorations

  • Use visual variables more effectively to match the content

  • There is value in both the grid and map system and should consider keeping both


Form Exploration & Refining

Based on the feedback received during the speed dating, I revisited the visual forms with a clear objective of building a strong connection between form and content so that understanding wasn’t dependent on the use of a key.

I focused on investigating the use of more literal forms that could enable viewers to easily derive clear meaning while also highlighting inherent patterns. The idea was to build an overarching form so that if someone looked at the piece from afar, they could grasp the focus of the piece.


Visual Design System

Using trees as a central character, I built my narrative around it. This enabled me to successfully connect elements that don't seem naturally related, like red berries for money. Weaving the elements together made it easy to for users to recall the various associations and visual representations.

DV_Final Datasets.png

Final data sets explored

Artboard 41.png

The use of trees as a representation of parks and recreation facilities immediately provides context to the viewer

Lines+Motion represent Age group.
Inspired by tree rings, it builds on the existing narrative by drawing parallels between age of trees and neighborhoods.

Artboard 44.png

Use of Scale to denote Area. The simple visual relationship reduces the cognitive load on viewers

Artboard 45.png

Use of Color to represent Population Density.
Building on pre-existing visual cues like intensity of the color to represent a linear hierarchy

Artboard 42.png

Color +Quantity denote Median Income. Although not directly related, the fruit-like graphics are easy to remember in the over-all narrative


The interface has minimal use of text and is mostly used in small font size. Hence, for the typeface, I decided to use ‘Merriweather Sans’. It is a typeface specially developed for screens, has several weight options and its large x-height gives it excellent legibility.


Color Accessibility Check

Since the design uses a lot of shades and tints of green, I decided to test the colors for deuteranomaly which is a reduced sensitivity to green light and is the most common form of color blindness.


Normal View

Deuteranopia View



How will the story unfold? What will be the key Interactions?

A user's ability to customize his/her interaction with this piece is key to the value he associates with it. What would interest users? How do these numbers connect to their daily lives? What does this data mean for them? What would they want to know?

Understanding the expectations and motivations of the people who would use this visualization is crucial for the interactions being built into the visualization platform.


  1. City officials involved in the planning and maintenance of these facilities

  2. Residents of the neighborhoods

  3. New people relocating to the city and deciding between neighborhoods


Initial explorations of the user interface


The primary Interface Elements

Hover State: Each neighborhood is represented by a symbol which represents the number of park and facilities in that neighborhood. Hovering hover a symbol reveals the neighborhood and the number of park and facilities in it.

Floating Key Panels: floating key panel for each data set is collapsed with in the side navigation bar. The visuals have been designed for easy association and recall, providing a key is still helpful during  the initial interactions.

Collapsible Side Nav in Fullscreen Mode: The full view mode hides the navigation menu allowing more space for comparisons and analysis


Map View: Useful to explore in relation to a neighborhood


Grid View: Useful for a holistic overview, comparative analysis & revealing patterns


Key Interactions

2018-08-18 21_02_55.gif

1. Map view: The map view is the default setting. People tend to start with what is familiar first. After selecting the neighborhood, users can toggle between other datasets to layer information and explore the visualization for new patterns and relationship.


2. Map View Compare: The compare feature is helpful for comparing data between two-three neighborhoods. It also provides a better perspective on an area over a single neighborhood. The spatial comparison could also be informational for new people relocating to the city.

2018-08-01 19_03_11.gif

3. List View: The list view allows to get a holistic people and surface patterns and relationships between various datasets. Clicking on the individual neighborhoods open detail information page for that neighborhood. 


4. List View Compare: The list view allows to compare multiple neighborhoods at a given time. It would be useful if one wanted to compare a certain type of neighborhoods together.



How can I take this further?

  • Features I should include: • Sort and Filter • How to use section • More details for Onboarding • Compare feature in Map view (Information on adjacent neighborhoods can be important in understanding the overall planning of these facilities).

  • Find better data: The number of parks and facilities in a neighborhood is not representative of the size/capacity of the facility. A neighborhood may have 5 facilities but they could be really small and insufficient to meet the needs of the community

  • Further usability testing with stakeholders and refinement of the UI elements.

  • Make the user interactions accessible: I took in consideration visual compatibility for color blindness while developing the visual design system. One of the intent of the platform is to get people more involved in the civic infrastructures around them, and to achieve this it would be vital to make this experience accessible to differently-abled people.



Value in visualizing

Data Visualization can do more than just provide answers based on patterns and relationships. When things don’t line up like the way we expect them to, one can use the data to surface problems, evaluate and find opportunities.

Look for the question, not the solution.
— Red Burns

Intervention Opportunities: As I layered up the visuals, the data became more easy to process. With each steps, I could think of so many other ways this visualization could be used as a tool for information and analysis.

  • This visualization can help civic authorities to discover/map patterns and inform future planning.

  • It can also serve as a resource for local citizens to advocate for the development of parks and recreation facilities in their neighborhood.

  • The city can plan seasonal shelters in low-income neighborhoods

  • Recreation centers in populations with 60+ age groups

  • Planning health camps in the existing facilities in low-income neighborhoods


Screen Shot 2018-08-18 at 7.41.13 PM.png

If interested, read my blog detailing the complete process of this project.