p5/D3 Cookbook

Combining the power of D3.js with the simplicity of p5.js

The p5 D3 Cookbook is a repository of documented examples for integrating the features of D3.js into the p5.js library. D3.js offers a wealth of tools for manipulating data and connecting data to visual representations. p5.js, whose goal is to make coding accessible for artists, designers, educators, and beginners, provides a environment where users can sketch their ideas in code. Together, these two libraries can be used for a range of applications from introducing beginners to data visualization to creating canvas-based visualizations that take advantage of D3.


This cookbook is divided into three folders:

Installing the Libraries

To begin using any of these examples, you will need to include the p5 and D3 libraries. Both D3 and p5 have installation instructions with additional details. If you are familiar with javascript, you will need to ensure that both libraries are included before you include your javascript code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.js"></script>
  function setup() { }
  function draw() { }
  function mousePressed() { }

Questions or Need help or want to add a recipe?

If you have an idea for a recipe or have a question about integrating D3 and p5, please open an issue on the github repository where these files are stored. If you're not familiar with github, feel free to shoot an email to SciutoAlex@gmail.com. Have a cool trick that involves D3 and p5, send an email or issue a pull request!






A special thanks to @iros for her great blog post that laid out a lot of the initial ideas in this repository. Thanks @sepans for creating initial examples.