Using d3.js utilities for data visualization in p5.js

A series of examples for using d3.js utility functions minimally in p5.js without inter-mingling their different paradigms.

Who is this tutorial for?

This tutorial doesn't intend to encourage using d3.js along with p5.js. These two libraries use different paradigms and ways of rendering, so mixing them without care will create cryptic and low performance code.

Moreover d3.js is fast and very flexible, covering almost every data visualization use case, so there is no need to complement it with p5.js library. But the power of d3.js comes at a price: It requires somehow advanced familiarity with Javascript techniques and DOM to completely understand how it works.

On the other hand p5.js (the new implementation of Processing framework in Javascript) is designed to be simple especially for non-proficient Javascript coders, making it very popular among artists and designers. Therefore taking advantage of d3.js utility functions for processing data along with p5.js for drawing, makes it possible to create non-trivial data visualizations with ease. This also helps getting familiar with the world of d3 little by little, and be able to switch to d3.js for advanced data visualizations.

Contents

• Basics

  • About p5.js and d3.js

• Scales

  • Bar Chart with Linear and Ordinal Scales
  • Scatterplot Color and Non-linear Scales
  • Date/Time scales

• Layouts:

  • Histogram
  • Voronoi

• Geography

  • Using Geojson - US Map

Acknowledgement

The structure of the framework that generates the tutorial is inspired from The book of shaders by Patricio Gonzalez Vivo. Parts of the framework code and styles is from The book of shaders and alignedleft.com by Scott Murray.