Creating D3 Visualizations on Google Colab

Line Chart (Quote Inspector) and NY Taxi Pic (ahundt)

Introduction

This is not meant as a detailed introduction to D3.js itself, but as a quick (but clean) start creating Line Charts using D3 on Google Colab’s hosted Jupyter Notebooks.

For an introduction to D3 itself, including the underpinning web standards (HTML, SVG, CSS and JavaScript), I suggest either of the articles, textbooks & tutorials below:

Articles

• The Hitchhiker’s Guide to d3.js
• Interactive Data Visualization with D3.js

Books

• Interactive Data Visualization for the Web by Scott Murray
• D3.js in Action by Elijah Meeks

Tutorials

• Official D3 Tutorials
• D3.js Tutorial — Data Visualization for Beginners
• D3 and Canvas in 3 steps

What is this article about?

This is simply a brief introduction to creating Line Charts using D3 in Google Colab, along with some helpful tips for how to develop D3 in Colab in general. These examples apply almost one-for-one with what you can do in most any environment with Jupyter Notebooks.

Getting Started