Line Charts with D3 on Google Colab

Simple Line Charts with D3 on Google Colab Notebooks

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

If you are not already familiar with Google Colab, or simply want a refresher on Jupyter Notebooks, I suggest starting with Colab’s Docs.

If you want to follow along in Google Colab (or Jupyter somewhere else), here’s a copy of the complete Colab notebook used for the example below.

Read the Full Article on Medium