Data Humanism



Data Humanism: Visualizing data to connect people with numbers



This is a web-based data visualization project 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.



TOOLS: Google Sheets, Illustrator, Keynote

METHODS: Data Visualization, Visual Design, UI Design, Storytelling


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.

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

Collecting 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.

The aim for the visualization was to answer to investigate the relationship between civic infrastructure and the social make up of a neighborhood.


How might I leverage the available data on neighborhood demographics, and parks & recreation facilities to explore the patterns and relationships between the two?



Cleaning the Data

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.

 Source: Yau, N. (2013).  Data points: visualization that means something . John Wiley & Sons

Source: Yau, N. (2013). Data points: visualization that means something. John Wiley & Sons


Exploring the datasets

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. I think I almost expected the results as public projects are huge investments and there are multiple factors impacting the decisions.

I wasn't sure how to proceed further but I continued to visualize the data sets to explore in the hope to learn something new in the process.

Due to project timeline constraints, I explored only a limited number of neighborhoods.

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. Building a more cohesive visual design language with strategic data overlay helps to reveal hidden information.I played with the use of visual variables in breadth and depth to move beyond preconceived notions and developed ways that linked form and function; ways in which data could be represented based on its meaning.


Initial concept : User testing & Feedback

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

  • 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.


Final Visual Design System

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


Final data sets explored

Artboard 41.png

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

Artboard 44.png

Use of Scale to denote Area. Simple relationship reduces the cognitive load on viewers

Artboard 45.png

Use of Color to represent Population Density Intensity of the color represents a linear hierarchy

Artboard 42.png

Color +Quantity denote Median Income. The fruit-like graphics are easy to remember in the over-all narrative



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

A user's ability to customize his 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? Layering which datasets would provide meaningful information?

Understanding the expectations and motivations of the people who would use this visualization is crucial for the interactions being built into the visualization platform. Building features like compare would allow people to evaluate different neighborhoods in respect to each other. 

Screen Shot 2018-08-19 at 1.06.23 AM.png
Screen Shot 2018-08-19 at 1.05.47 AM.png
Screen Shot 2018-08-19 at 1.05.55 AM.png

Initial explorations of the user interface


The primary Interface Elements


Map View: Useful to evaluate neighborhoods in proximity to each other.


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


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


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. It could also be informational for 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.



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.

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 

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


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

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