It’s time to meet you again. In today’s issue, the mysterious soul of Bytedance data platform brings you a translated article about the birth process of visualization works.

Original link: devikakhowala.com/data-humani… Note: Some contents are not translated exactly as the original

Why should I translate this article?

This article provides a good introduction to visual design, giving us a clear understanding of the birth process of a visual work, and what to do in the process.

The authors have finally implemented a web-based data visualization platform that turns quantitative data on parks and recreation facilities into information-rich, engaging visuals to help citizens and city officials make more informed choices.

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

– Giorgia Lupi

DESIGN PROCESS

1.1 UNDERSTANDING THE CONTEXT

Why do it? (cause)

There’s a lot of data in the digital world we live in, but the same abundance of data makes it difficult to process it into a relevant, usable form. In order to make meaningful connections, it’s important to tell a story that provokes curiosity and interest, something that people want to see and learn about. Through stories like this, people can understand your purpose and feel the connection to life.

1.2 DATA ANALYSIS

1.2.1 Collecting & Cleaning the Data

Looking at the available data, I decided to match the demographics with theAllegheny county) data from parks and recreation facilities were mapped together to explore patterns and relationships between the two. To understand the data I collect, I use data organization tools (Coordinate Systems and LATCH principles, for reference: www.informit.com/articles/ar… )Such as coordinate system andLATCH,It was cleaned and sorted. These data sorting methods make it easy to analyze, compare and contrast the information in packets. The purpose of visualization is to investigate the relationship, if any, between urban infrastructure and the demographic composition of a community and present it in a way that people can participate in.

1.2.2 Exploring the datasets

I mapped each block’s population density, land area, average age, median income and so on to the number of parks and recreation facilities in that block. As I looked at the data, I found no clear patterns or relationships between different data sets. If there were, my untrained eye would have missed it. Although I didn’t get direct results, I went ahead and visualized the data set I was about to explore, hoping to learn something new in the process and hopefully find a way to make these data sets useful to people. Due to project time constraints, I only looked at data from about half of Pittsburgh’s 91 neighborhoods.

1.3 VISUAL DESIGN

1.3.1 Exploring the form

Nathan Yau, ‘Visualize This‘and’Data points‘, he said,”Visualization is useful in presenting data value to non-data experts“. In order to build a more cohesive visual design language, I used the method of using visual variables to develop the connection between form and function; Represent data based on semantics.

1.3.2 Initial Concept: User Testing, Feedback & Redesign (Initial concept: User testing, Feedback & Redesign)

Using “speed dating” as a research method, I interviewed 10 students for feedback on my initial ideas. Feedback from user testing:

  • The narrative works well and stimulates the curiosity of the user to participate
  • Form over content
  • Use visual variables to match content more efficiently
  • Both grid and map systems are valuable and should be considered for preservation

1.3.3 Form Exploration & Refining

Based on the feedback, I re-examined the visual form and defined the goal of creating a strong connection between form and content. I focused on the use of more forms of words that allow the audience to easily obtain clear meaning. The idea is to establish a holistic form so that if someone is looking at the piece from a distance, they can also capture the point of the piece.

1.3.4 Visual Design System

I take the tree as the central character and build the narrative around it. This enabled me to successfully connect elements that seemed to have nothing to do with nature. By weaving these elements together, users can easily associate visual representations with memories in their brains. The final data to render is shown below.Use of trees as representatives of parks and recreation facilities immediately provides contextual information to the audience.Line + action represents age groups. Inspired by tree rings, it makes a nice connection between the age of the trees and the age of the community. Scale the area. Simple visual relationships reduce the cognitive load of the audience.Let me color the population density.Color + number means median income. Although not directly related, the fruit-like graphics are easy to remember throughout the narrative content.Type system.

Color system.

Button status.

1.3.5 Color Accessibility Check

Since many green tones are used in the design, I definitely test and design for people with weak green color. Common view:Green color blind (weak color) view:

1.4 THE INTERACTIONS

How will the story unfold? What will be the key Interactions? (How will the story unfold? What is the core interaction?) The user’s ability to customize how he interacts with the work is key to the value he derives from it. What will attract users? How do these numbers relate to users’ daily lives? What does this data mean to them? What do they want to know? Understanding users’ expectations and motivations is key to designing a visual platform. Stakeholder groups:

  1. Government officials
  2. Community residents
  3. The new immigrants

Here’s the original draft:

1.4.1 Main interface elements

To Hover

Each subdivision is represented by a symbol that indicates the number of parks and facilities in that subdivision. Use the ToolTip to display the relevant quantity data while the mouse is hovering.Floating Key Panels:

The floating panels for each dataset are folded and hidden in the side navigation bar. Collapsible Side Nav in Fullscreen Mode Collapsible Side Nav in Fullscreen Mode Map View

It helps to explore relationships between communities Grid View

It is suitable for overall viewing, comparing data and analyzing relationships

1.4.2 Key Interactions

Map viewThe map view is the default view. People tend to start with the familiar. After selecting a community, users can switch between other data sets for analysis and exploration. Map View Compare

The compare feature helps to compare data between two or three communities. It also provides a better perspective within a single community. Spatial comparisons can also provide reference information for new immigrants. List ViewThe list view allows you to obtain complete relationships between various data sets. Clicking on an individual community brings up the details page for that community. List View Compare

The list view allows you to compare multiple communities within a given time frame. This can be useful if one wants to compare certain types of communities together. 1.4.3 How can I take this further? (Could do better)

(abbreviated)

summary

“Look for the question, not the solution.”

– Red Burns

Data visualization can do more than provide answers based on patterns and relationships. When things don’t go our way, people can use data to identify problems, evaluate and look for opportunities. This visualization has gained even more value:

  • To help municipalities spot patterns and inform future planning.
  • It can also serve as a resource for local citizens to advocate for the development of parks and recreational facilities in their communities
  • The city can plan seasonal shelters in low-income neighborhoods
  • Build entertainment centers for people over 60 years old
  • Planning health camps in low-income communities