CS 171: Intro to Data Viz
Project Category
Client
Tools
Overview
This portfolio post will feature the interactive data visualizations I created using D3.js during CS171: Visualization, Harvard's exemplary data visualization course. The projects reflect my journey through foundational visualization principles, advanced design techniques, and the creative use of D3.js to craft engaging, informative visual stories.
By including these works, I aim to create a complete portfolio, including what I made at the absolute start of my journey into data visualization (even if they aren't very aesthetic or impressive). My hope is that by including the traditionally "not-portfolio-worthy" projects in my portfolio, I can help set realistic expectations about what learning trajectories and meaningful progress looks like.
At Harvard, classes end in early-mid December and the spring semester doesn't start until late January. During those three weeks when undergrads are scare but graduate students are still on campus, we have the J-term. Graduate students and post-docs run one-, two-, or three-week long workshops and courses for each other. It's a great concept--we take advantage of empty classrooms to try out new teaching methods or materials, add workshop or teaching experience to our resumes, or cram a new tool, skill, or concept without our usual semesterly distractions.
My second year here I took a J-term workshop about data visualization: 'Best Practices for Scientific Figures'. It covered CRAP and Gestalt Principles, chart junk, and how to use different color schemes for different data types. It was extremely useful, but I didn't really think about 'how best to visualize things' again for a while.
Fast-forward to summer 2020 and I'm remotely participating in the annual Bok Teaching Conference from my glorious back porch. The theme of this conference was, as you can probably guess by the year, 'Teaching Via Zoom.' I'm in a workshop—for what I honestly don't remember—but as part of our introductions in the breakout rooms we had to describe the classes we were going to be teaching. I was there for Deep Sea Biology, but another participant started describing a class that was all about making figures and charts, coding, storytelling, and she showed some insane examples. I was captivated.
I enrolled that very hour in CS 171: Intro to Data Visualization.
CS 171 quickly became one of my top 5 favorite classes I've ever taken and definitely the one with the longest-lasting impact on my life thus far.
Through the class, we had two major assignments every week: a lab, which was supposed to a bite-sized project designed to introduce us to some concept or method or practice, and a homework assignment, which combined that new something with almost everything we had learned to date. This started rather simplistically with CRAP and Gestalt principles (hi again, good to see you) and making a basic html page, but quickly ramped up through static visualizations, filtering menus, tooltips, and interactive visualizations that updated each other through brushes.
The class also covered what it meant to do an exploratory data analysis in Tableau, organizing and documenting a team-based design sprint, and the importance of version control.
Most of these assignments are described in brief over in the repo read-me, so I won't duplicate those efforts here—submitted visualizations are below. The end-of-semester project, History of Space Flight, is described in another project. Definitely recommend checking it out.
Week 2 - Sorting HTML Table

Week 3 - Filtering Menu

Week 4 - Interactive HTML Table

Week 5 - Axes, Scales, Reference Lines

Week 6 - Changing Data

Week 7 - Brushes and Interactive Charts

Week 8 - Interactive Dashboard and Maps


Week 9 - Sortable Matrix
This was the only homework where I needed TA assistance, received during office hours, to complete.

Week 10 - All of the Above

There was also a lab where we used Leaflet and the BlueBike api to create a a live map of available bikes around Cambridge, but by the time I went back to take a screenshot of the project for my portfolio, the API was defunct. :/