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.
Structure
This cookbook is divided into three folders:
- beginner requires no knowledge of D3. These example feature useful functions that can be inserted into a p5 sketch with minimal knowledge.
- intermediate requires understanding D3 selections and how D3 interacts with the DOM.
- advanced requires understanding D3 data binding, for example
.selectAll().data().enter()
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>
<script>
function setup() { }
function draw() { }
function mousePressed() { }
</script>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!
Cookbook
Beginner
-
Generate a Line with D3 and Draw with p5
-
Drawing D3 Axes
-
Voronoi Layout Basic
-
Voronoi Layout Background + Interactive
-
Using D3 scales in p5.
