Food Flow Mapper

Network Visualization

Food is highly related to everyone. This visualization is designed to help explore the food flow within the USA. The potential users are farmers, citizens and food managers or officers.

I designed the project and participated in the front-end development.

See it Online:

Design Process


The data comes from the Commodity Flow Survey, which is done through a partnership between the Census Bureau and the Bureau of Transportation Statistics (BTS). The survey is administered every five years, which are 1997, 2002, 2007 and 2012.

The data provides the following information:

Potential Questions

What would the farmers, citizens and food managers want to know about the data?

Finding a Visual Language
First-stage Research

The next step for me was to work on the visual output.

Two main aspects of the data set should be presented. First of all, every states and their data and secondly the connections between them resulting in a “network”. Therefore, I started with a research to find already existing visualization projects which are either geo-based or network visualizations.

A good tool to keep an overview of the visual research is Pinterest. The New York Times also offers great visualizations.

Visualization Attempts

Several attempts were made to visualize both the geographic information and "networking" between states.

Design Challenges & Solutions

Representation for 10 Food Categories

Several attempts have been done to choose a right color palette for the representation of 10 categories.

First, I attempted to group categories. The problem is there is no scientific classification could be applied on the foundation of current food categories.

Current 10 Food Categories

My second attempt is to use the Color Brewer, which offers pre-made color schemes to use based in cartography. However, the colors are too common. The color scale should show a customized aesthetic to be recognizable.

Thus, I decided to customize the color palette. Three important considerations that I adhere to are:

  • Use qualitative color schemes to highlight qualitative categories.
  • Have a wide range in both hue and brightness to increase accessibility for color blindness.
  • Use a gradient instead of choosing a static set of colors to feel natural.
Chroma.js is used to get a set of colors with linear lightness curve, improving the differentiability of the resulting colors.
It's important to respect color blindness.

Representation for Flow within States

Arc Diagram does well in visualizing flows among different states, but how to represent flow within the same state?

Representation for Long Data Label

How to show long data label in limited space is also a challenge in common data visualization.

Design Details

Default View

Default screen shows the overview of food flow in U.S.

One State Highlighted

This screen shows the relationship between Georgia and other states. When clicking any state, that state would be highlighted.

Color by Food Types

Users can also color-code the arc diagram by food types and transportation modes.


Explore it Online: