Data Educator Stories explores the practices and projects of educators who use Observable in the classroom. The goal of this series is to grow our collective knowledge and build connections between the creative work of individuals and the broader education community.
Jon Froehlich is a computer science professor using Observable to teach Intro to Data Visualization for non-majors at the University of Washington. Froehlich leads by example; sharing his own curriculum and personal projects while encouraging students to create and share socially-minded interactive visualizations.
How do you use Observable in the classroom? Is there a specific course where it adds value?
I run Intro to Data Visualization on Observable and I have over a hundred students each semester. I'm a computer science professor, but this is a non-majors course for fourth-year students interested in data science and data visualization. Some come from statistics or math, but many others come from humanities, engineering, science, or other areas. We have a 100-level programming prerequisite, so we're starting with students who have a variety of technical skills and we support them in learning programming and building interactive data visualizations. Students start by learning how to sketch visualizations on paper before we graduate to programming; first in p5.js and then we transition to Observable.
This cell is part of the transition from p5.js to Observable. Click on the canvas and move your mouse to change the brush attributes.
Students can fork my notebooks and follow along live as I'm coding in class. If they get lost, they can go back to my original notebook rather than trying to follow me on a shared screen, which is easier and more accessible.
What is something that is only possible in Observable that you find critical to your teaching?
Having a living environment on Observable that lets you live code with students is really powerful. You get to see mistakes happen. You get to see debugging happen. Class time is a limited learning opportunity, and since students have their own forked notebooks, they can track back to my original so the content lives on. For their course projects, students can also work collaboratively on code — just like they do in Google Docs. Collaborating like that is super powerful.
Forking, which allows me to quickly create new materials, is the basis of a lot of my lectures. Beforehand, I’ll create two notebooks: a skeleton version and a fully complete version with the answers. During class we work through the skeleton version together. After the lectures, I will publish the full version.
You have taught data visualization using both private and public notebooks. Can you explain your philosophy about sharing your own work?
I'm putting the time and investment into making good teaching materials, I don’t have any problem sharing them more broadly. That mentality was reinforced when we shifted our learning to online environments more generally in the pandemic. But my personal pedagogical take is that I want to make as much of an impact as I can. Intro to Vega-Lite curriculum and Cartographic Visualization in Vega-Lite are resources I’ve worked on recently.
Part of a sequence that allows students to explore and build on an example, adding filters and interactivity.
I also make mistakes, of course. That's definitely a risk to working in public but it’s also a benefit. Recently, a random stranger commented on one of my notebooks and it’s great that I get prompted to check in on my materials and to learn as well.
How do students submit their assignments with Observable?
Our assignments are notebooks. We don’t need to make the leap to embedding — students are creating a webpage in Observable already. There's no friction. Early in the quarter everything is unpinned and open while we’re teaching. For the final, we teach them to unpin cells for particular types of content so the focus is on the interactivity.
What kind of data do your students work with in Observable? Where does it come from and how does it help you teach?
I believe deeply in personalized learning, where students are compelled on their own learning journey. The concept for their course project is explanatory interactive data viz. Students write a story about a concept with societal impact or scientific importance, like global food security or climate change; trees and social wellbeing as an example. They find data that corresponds to that pitch and explain why it's a data set with integrity, then submit an interactive notebook in teams of three or four. This student's work explores the potential for solar power.
Click and drag over the graph on the left to select the range of average daily sunlight and the corresponding area on the map.
Observable is perfectly aligned to allow them to interact with the datasets as they are creating, to more easily create visuals, and then to create the interactives.
What are you working on now - academic or otherwise?
A big research project that my lab is working on is called Project Sidewalk. Consumers have access to road networks; governments have access to road networks. Mapping companies know where the roads are but they don't know where the sidewalks are, and none of these systems know the condition of sidewalks or if they're accessible to people with disabilities. Project Sidewalk allows us to find and analyze all the sidewalks in the world using computer vision and crowdsourcing. So it's a big data problem.
An Observable dashboard provides data about Project Sidewalk, including the areas explored, kilometers covered, and labels from contributors. This viz may take time to load.