Getting Started with D3.js and Observable Notebook

Introduction

Are you interested in visualizing data and creating stunning interactive graphics? Then you might want to give D3.js a try. D3.js, short for Data-Driven Documents, is a JavaScript library for creating dynamic, interactive visualizations in web browsers. And with Observable Notebook, a collaborative platform for exploring, analyzing, and sharing data, you can create D3.js visualizations easily and quickly.

Getting started with D3.js can seem daunting at first, but fear not, we’ve got you covered.

In this blog post, we will walk you through the basics of D3.js and Observable Notebook using an example of real-world regionalized income data.

So, buckle up, and let’s dive in.

Requirements

• Observable Notebook Account

• Basic JavaScript Understanding

Getting Started

First things first, you need to load your data into Observable Notebook. In our example, we have used CSV as the file format. Here is an example of our CSV once it is loaded in:

Data Parsing

Once you have loaded the data, you need to parse it into an array. You can do this by using the d3.csvParse() function. Here’s an example:

const data = csvParse(await FileAttachment("name.csv").text(), {typed: true})

If you load in your CSV using the file attachment feature, this less complicated code should run fine:

FileAttachment("name.csv").csv({typed: true})

You will notice typed: true nestled within the .csv, this will automatically format your columns if it’s a common data type (string, number, etc.).

Understanding Our Data

To quickly get a feel for our dataset, there is a variety of commands we can use. For our usage, d3.extent returns [min, max] in a single pass over the input, which is particularly convenient if you wish to set a scale’s domain.

To see the min/max of our counties, we can run this line:

d3.extent(d3test3, d => d.County)

And to see the min/max of our income values, we can run this similar line:

d3.extent(d3test3, d => d.Income)

Visualizing

To keep the visual simple, we will inject our code into a pre-built histogram. To load the histogram, we run this line:

import {Histogram} from "@d3/histogram"

From here, we can customize the histogram to whatever we would like!

For my visual, I would like to adjust the color as well as adding some axis labels. For example:

Histogram(d3test3, {value: d => d.Income, width, height, color, label})

Output:

But wait! How does the graph just know what color, height, and width we are asking for?

That is because we are storing those commands in separate objects, outside of our example code above. This allows us to stay more organized when building our graph, since we can adjust specific objects instead of tampering with the visual itself. Here’s my example:

height = 200width = 850color = "red"label = "Income →"

As you can see, we have set a handful of parameters for our visualization outside of the code that actually runs the visual.

Conclusion

Congratulations! You have just created your first D3.js visualization. With Observable Notebook, you can experiment with different visualizations, tweak the code, and collaborate with others.

In conclusion, D3.js is a powerful tool for creating dynamic, interactive visualizations. With Observable Notebook, you can easily create and share D3.js visualizations with others.

The combination of D3.js and Observable Notebook allows for seamless integration of code, data, and narrative, making it an ideal platform for data journalism, education, and exploration. Whether you’re a data scientist, journalist, or developer, D3.js and Observable Notebook provide a flexible and accessible way to tell stories with data.

So, if you haven’t already, give D3.js and Observable Notebook a try and start creating your own beautiful and informative visualizations today!

Full Notebook:

Remarks