Rise & Fall of Food Source Information

Data Visualization with Processing

Avitha Celestine
Celestine’s Design Journal

--

A few weeks ago, we, as a team, Shruti Raghava, Akin Agboola, and I, decided to make Data Visualization tell the story of how an individual with food insecurity finds food-related information on the internet.

Step 1: Find Data you want to Visualize

During my first semester, I conducted user research for food insecurity. So we decided we would use the data gathered to create our data visualization.

Image of Google Sheet with Food Insecurity Data

Step 2: Cleaning and Prepare the Data

Looking at the survey, it is hard to represent the data since it’s not standardized. Since some of the data are in sentences, with some missing and unnecessary variables, we need to clean the data to best represent the story.

Image of Survey Data after cleaning

Step 3: Brainstorming

Once we finished cleaning the data, we got together to brainstorm what data was needed to convey our story of food information.

Brainstorming using pen & paper
Using Google Sheets

Being able to tell a story using data is about what we are communicating to a reader; sometimes, the most simple one can work. Since we’re also new to processing, we decided to show our data in a simple flow.

Step 4: Coding in Processing

We import our data into processing by creating a class table, “data” where our data will be stored.

Table data;

To call our survey sheet and present data on our canvas:

data = loadTable(“data.csv”,”header”);
println(data.getRowCount());
{TableRow row = data.getRow(1);
Float balanced_meal = row.getFloat (“balanced_meal”);
Float Information_awareness = row.getFloat (“Information_awareness”);
Float information_source = row.getFloat (“information_source”);
Float information_useful = row.getFloat (“information_useful”);
Float information_use = row.getFloat (“information_use”);
Float information_outcome = row.getFloat (“information_outcome”);

Step 5: Creating the Data Viz

We considered the many variables and the essential data to tell a story about the food information journey. We simplified by considering 6 participants who experienced different journeys. We have 3 different stages of information-good, average or poor.

The challenge we found was how to code using curveVertex to make the Data Viz more curvy than pointy. But curvy lines would miss the points each participant met at each stage regarding the information.

It is still a work in progress, but we’re proud of how we put together a data viz using processing.

The Data Viz

Find the full code here: https://github.com/celestinetales/processing/blob/main/foodsourceDV

--

--