Build an interactive, narrative web page about "Poverty in the United States" using poverty data from the American Community Survey (ACS) for each state and the U.S.
Bootstrap docs Mapbox Studio Mapbox GL JS docs Chart.js docs Lodash docs
Census data Wikipedia article Download project files - v1 Download project files - v2 Download project files - v3
You will build this project at least two times. First, build a rough version to get the data and coding for the map and charts working together correctly. The focus is on functional code. Then, you will redesign and rebuild the web page for a beautiful narrative. The focus will shift to design and usability (UX).
Remember, all great interactive narratives have good content, good design and good coding.
Practice and repetition are the best ways to learn coding and design. You will be working on multiple versions, so keep your files and folders organized and save your work frequently. Plan to start over, again and again, as you learn how to write better code.
Document your creative process for a future case study for your portfolio. Keep track of your notes, sketches, wireframes, etc.
Possible sections: a project summary, the coding challenge, your solutions, what you learned, apps/tools you used, thumbnails, sketches, UX analysis, personas, wirefarames, site maps, user flows, prototypes, photos, etc.
These examples were shared by design coach Chris Courtney.