VICO 3420 / 5900 • Assignment 1

Poverty in the United States

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

Assignment guidelines

  • Build a narrative web page about "Poverty in the United States"
  • Use the "CSV to JSON" web site to convert your CSV data to JSON
  • Use the Wikipedia article for context or "side bar" story
  • Use Bootstrap for your responsive page layout
  • Use Mapbox Studio to design your choropleth map
  • Use Mapbox GL JS to put your map on the web page and to make it a clickable UI for selecting states
  • Use Chart.js to create charts that update whenever a state is selected on the map
  • Use Lodash to analyze your data as you design the charts

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.

Grading guidelines

  • I will be looking at your code for annotations, use of indenting and spacing.
  • I will be loooking for functions that are modular and written to do one thing.
  • Correct use of Bootstrap's container > row > cols for a responsive design.
  • Multiple versions of your project.

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.

Portfolio-worthy work ahead!

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.

Portfolio websites with case studies

These examples were shared by design coach Chris Courtney.