Brief Introduction to D3 (i.e., Data-Driven Documents)

It is fast, it is a great framework and it is free.

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

I have created a Github Repository to capture much of what I am documenting here to aid in my use of D3.

Tools Needed

1. You need some sort of IDE (i.e., an integrated development environment), to write out your code.

I am going to Visual Studio Code (VSCode). It is a product from Microsoft that seems to be all the rage because it is light-weight(i.e., it doesn’t take up much space and processing), and it is appears to be bree at a base level.

1. You will need some sort of web-browser.

I prefer to use Chrome. It is the browser I use most frequently for my work, and research and for play.

1. You will need a web server.

A suggested is server is the python -m htpp.server.

Generally speaking a server is not needed. However, because the focus of D3 is on interraction, you need to get a sense of what the product will look like and behave once it is put out into the world. A server helps with that process.

Sometimes it’s not necessary. But in general, it’s a good idea to replicate the environment that your code will be viewed in so you don’t run into unforeseen issues when you publish or unnecessary frustrations due to using an environment not intended for your technology.

d3 is intended to run in the browser, with some parts of it requiring to be run on a web page for certain browsers. In my experience, the issues that arise from opening a d3 page directly in browser using the file URI, i.e. file://, are split into two categories: security and schemeless urls.¹

You have a similar issue when using RevealJS for example, with a Development Server that defaults to port 8000 when you run the following:

npm start -- --port=8001

1. You need the D3 library itself.

Downloading the D3 Library.

Data Driven Documents

You can download the latest version there as a folder. Which you can then store in the directory from which you will be creating projects. Then when you need the latest version, simply downloa dthe folder again.

Alternatively you can link directly to the latest releast copy, via a code snippet.

The website also provides a number of examples you can use for practicing.

Do note that the creator Mike Bostock has a number of training tools available through Observable, which is a JavaScript project platform. I don’t have a problem with Observable, it also requires some learning which I don’t have the capacity for at present.

Creating the Basics

Open the terminal within VSCode

touch index.html

Image Sources:

User Interface Animated Icon by nanoagency on IconScout

Window Icon by Jemis Mali