Observable: Showing math students the concepts, and the code behind them

Data Educator Stories explore the practices and projects of educators who use Observable in the classroom. The goal of this series is to grow our collective knowledge and connect the creative work of educators with the broader education community.

Ambassador and Observable power-user Mark McClure has been teaching mathematics at UNC Asheville since 1997. As his teaching has grown to include subjects like data visualization, so have the techniques he uses to teach using Observable.

How do you use Observable in the classroom? Is there one course in particular to which it adds unique value? 

Observable works for many types of instruction and I can adapt it to any class that I teach. I am predominantly a mathematics professor; I teach a lot of calculus, and I generate demonstrations to share with students in my elementary math and stats class. I will develop something on Observable and I will embed it in a web page, using the JavaScript API. At this point, they are learning from Observable through examples like the cycloid below, which is actually one of the first things that I built on Observable. I've got hundreds of these things. Building these with Observable is, I think, just really easy.

A cycloid is traced out by a point on a wheel as it rolls. Use the sliders to change how far the wheel rolls, or how far the point is from the center of the wheel, to generate slightly different curves.

I want students in my upper-level classes to know in detail about the tools that I use, so we get into the notebooks. Recently, for example, I introduced the ideas behind tree traversal to my discrete math class and I wanted them to see the code behind those ideas. So I shared this d3.hierarchy and d3.tree notebook with them, instead of embedding it.

Where do you find the data you work with on Observable and how does it help you teach?

When I am teaching data visualization, the data that we start with are the things that are built right into Observable, because they're just easy to get your hands on. We've used data from IPEDS a fair amount for class projects, and recently we've used some sports data because I've shown them how to generate a tournament bracket. This project included a drop-down looking at the last 10 Big South basketball tournaments, which is the conference that our school is in. For this, we need data that describes the structure of the tournaments and where teams are in the bracket. I get this data from a couple of different sources. Sports statistician Ken Massey has a site called Massey Ratings, and that’s where we get a lot of that data. We can also get sports data from Kaggle because of their library for competitions.

The teacher’s example solution of a tournament bracket.

What is something only Observable does that you find critical to your teaching?

You can open up an Observable notebook and immediately start working on exactly the task at hand, and can develop very quickly, as opposed to building from scratch. You get a template going in Observable and you can hook data up right away; it doesn’t take time to figure out how to dial this or that library into it.

There are many things in a traditional data workflow that might not seem like a big deal, but cumulatively they slow you down. With Observable, I can literally be in my office, maybe half-hour before class, and if I've got an idea I can probably build it. It's just a tremendously different pace.

Can you share a bit about your background in data?

I majored in mathematics as an undergraduate student, but also took some statistics and plenty of computer science. I continued to develop those skills while working on a Ph.D. in mathematics since my work has been fairly computational. While working as a professor of mathematics, I developed visualizations using Mathematica and, eventually, I started to work as a consultant for Wolfram Research as well.

At some point, though, I wanted to develop tools that were more open - open enough for anyone with a web browser to access. I started looking around for libraries to help me draw and, of course, I landed on D3 and JavaScript as the best tools to use. This was about ten years ago.

Using D3 to build my stuff was pretty fun. I remember when I first found Observable; it was the middle of the semester and I had a lot of respect for Mike Bostock. Though I didn't jump in immediately, I bookmarked it, and when the semester ended I went back and figured out Observable. I was really comfortable with the versatility of a notebook environment.

What programming languages do your students know when they join your class?

I teach a data visualization class right now in an Observable workspace. This is an upper-level computer science class, so students are generally juniors, and senior, computer science majors. There's a data science prerequisite but it doesn’t include JavaScript, so students typically come in knowing Python and Java. They've got strong programming skills, and I have not found any significant issues when teaching them how to use D3 to generate a variety of visualizations for class. Students haven’t had any trouble jumping in and using JavaScript as their primary programming language.

What have you learned from students on their data journey?

It definitely helps you understand your own work better when you see students react to visualizations. Teaching is the best way to learn something, right? I learn the things that I want to convey to them on a deeper level. This is true in my data visualization class, where I've been teaching students how to program using D3 in Observable, and so I'm happy to say I think I'm becoming a better programmer. 

When I'm teaching at a level where students learn how to share code, they tend to be very appreciative and that’s quite nice. Every semester I run into somebody who tells me, “I'm so glad that you taught us how to do this programming task,” because they went on to learn more about it. I think that that's a big, big plus, for sure.

What are you working on now - academic or otherwise? What’s next?

I have been using Observable to organize faculty data for a project I’m leading on campus, and I've given a couple of presentations to members of UNCA faculty and staff. I used to build these kinds of projects with D3 and Javascript, but things just go much faster with Observable.

The story I tell starts out with my personal salary history at UNCA since 1997. You can see the trends but you can also adjust for inflation and this becomes an eye-catcher, for sure. I used IPEDS data to break things down, that way we can look at how things are across different campuses.

It’s really easy to see the difference when salaries are cost adjusted. Here's where we are in the UNC system and here but actually is an expensive place to live.

I am also working on a first-year data visualization seminar for the fall semester, which includes working with students with yet another level of experience. The first-year seminar at UNCA is a class for incoming freshmen who don't necessarily have programming experience, and it can be on almost any topic. The objective of my first-year seminar is to expose these students to data literacy and show how you can use data to help you understand all kinds of things - and the tool that we are going to use is Observable Plot.