Using d3.js utilities for data visualization in p5.js
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
aboutp5d3
bar-chart
css
histogram
linear-scales
scatter-plot
src
us-map
voronoi
.bowerrc
.gitignore
README.md
bower.json
index.html

README.md

image source: http://d3.org

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

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.