Building Custom Data Visualizations

Using Modules in Observable

Shirley Wu

Shirley Wu

Data Sketches
Building Custom Data Visualizations

Check out a free preview of the full Building Custom Data Visualizations course

The "Using Modules in Observable" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

Shirley introduces how to require modules in Observable, and demonstrates how the module require debugger tool works for modules that are more difficult than others.

Preview
Close

Transcript from the "Using Modules in Observable" Lesson

[00:00:00]
>> Shirley Wu: So one of the questions that got asked during the break is, well, first of all, there seems to be a lot of love for Observable and for Vega-Lite, for which, I'm really, really glad. Again, I started using it in preparation for this workshop and I've been loving kind of that process of being able to take notes while doing data exploration.

[00:00:21]
But one of the things that came up during the break was this question about requiring, so some modules are really easy to require in Observable. So for D3, it's just d3 = require('d3'). And you can grab any package off of npm, as long as it's been published on there.

[00:00:41]
But some of them are a little bit more stubborn than D3. And in which case, there is a really great Observable notebook by Tom MacWrigh, he is one of the engineers at Observable, about how to require stubborn modules. And the one I really like about this one is that he has some advice about depending on the package how to go about it.

[00:01:11]
But I tend to be really lazy, so I like what he built, it's called a module require debugger. And all you have to do is give it a module name, hit Go, and it will tell you what is the best way to load it. So let's do something like, I recently used this package to account for inflation in the box office figures, so it tells me, okay, you can't just do require us-inflation.

[00:01:51]
This is probably the best way to require it. Here's some other options that are recommended, and here are some other options that are not so recommended. And so this is also really great as a resource if you're using Observable notebooks more and more. And there's some npm package that you'll want, that just isn't getting loaded correctly into Observable, I recommend this notebook to help you figure out what the right require schema is.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now