Senate Visualization

a simple project to learn React and create responsive data stories without SVGs

Check it out on Github here!

We created a data visualization inspired by data journalism sites like The Pudding that explains the current state of diversity in the senate. The goals of the project were to make the data appear as a fluid story and to create the visualizations entirely with HTML and CSS, without any SVGs. We used this tutorial to implement the waffle chart without using SVGs and this library to create the scrollytelling feel, showing and hiding different text/elements of the chart as the user scrolls. Even the stripes within the waffle chart boxes are done entirely with CSS, using this for a tutorial.

Since the data for the story is fairly simple, we used information from the U.S. Census and the official senate website to quantify diversity in the U.S. as a whole and the current Senate. From these sources, we used the following statistics:

1. The Senate is comprised of 25 women and 75 men

2. Only 9 senators are non-white, 4 of whom are women and 5 of whom are men

3. The population of the United States is almost 51% female

4. Just over 60% of the U.S. Population is only white

We learned that the senate is not representative of the United States population by a longshot. The details of data visualization can make a simple-seeming diagram be very tricky to implement. Deciding how to best display the data for easy readability is only half the battle, because you then have to implement whatever choices you make. We also found that little changes like smooth scrolling and fading transitions can make a site go from feeling jumpy and hard to follow to feeling like a smooth experience, which in turn makes the story seem to flow better from one idea to the next.

See some more shots from the page below: