Capstone 8 · Frontend

The Sankofa Atlas

Pick a historical movement of people, culture or work that matters to you and that has real public data behind it. The Great Migration. The spread of a musical form. The founding dates of HBCUs. Caribbean migration to Britain. Choose something you actually want to understand. Build an interactive visualization of it, drawing the SVG yourself rather than handing the data to a charting library. That constraint is the point: you will learn scales, axes, projections and layout, and you will be able to explain every mark on the screen. The hard requirement, and the one that will separate this from most data visualizations: it must work for somebody who cannot see it. Every visual encoding needs a non-visual equivalent, which usually means a properly marked-up table of the same data, keyboard navigation through the marks, and announcements as the selection moves. A chart that is only a picture excludes people, and doing it properly is a genuinely impressive thing to have solved. State your sources and your gaps, as the APIs & Datasets course taught. A historical dataset about Black communities will have absences that are themselves part of the story.

Concepts used

SVGScales and projectionsData transformationInteraction designAccessibilityProvenanceResponsive layout

Your dataset

A real public dataset with a stated license and a fetch date. Several hundred rows at least.

Milestones

1Choose the dataset and write down its source, license, coverage and gaps before writing any code.
2Clean it with a script, keeping the raw file untouched, and report what you dropped.
3Draw the first mark by hand in SVG, with your own scale function.
4Build the full visualization, including axes or a legend that you generated.
5Add interaction: hover or focus for detail, and filtering that changes the view.
6Build the non-visual equivalent: a real table, keyboard navigation, and announcements.
7Make it responsive, and decide deliberately what to simplify on a small screen.
8Write the accompanying note: what it shows, among whom, over what period, and what it cannot show.

Your workspace

Build the full project here. Work through the milestones in order, in both languages.

SANKOFA SANDBOX
loading editor…
Your turn → Build it in Python first, then rebuild it in JavaScript. The logic transfers, only the syntax changes.
← All projectsNext: Susu →