Interactive, Mobile-Responsive Data Visualization Library for p5.js
By: Siddharth Chattoraj
You only need to use one of the following methods:
Install via npm:
npm install p5.chartThen create an html file like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="node_modules/p5.chart/p5.chart.js"></script>
<script src="sketch.js"></script>
</head>
<body></body>
</html>You can now create a sketch.js file to build your charts.
Create an html file like this (include p5.js first, then p5.chart.js):
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.chart/p5.chart.js"></script>
<script src="sketch.js"></script>
</head>
<body></body>
</html>You can now create a sketch.js file to build your charts.
Download p5.chart.js and libraries/p5.min.js, place them in your project folder, and create an html file like this:
<!DOCTYPE html>
<html>
<head>
<script src="p5.min.js"></script>
<script src="p5.chart.js"></script>
<script src="sketch.js"></script>
</head>
<body></body>
</html>You can now create a sketch.js file to build your charts.
Clone or download this repository and start experimenting directly in sketch.js. This option is useful for quickly exploring examples or modifying charts without setting up a separate project.
documentation: Folder containing comprehensive methods exposed to user in both .pdf and .tex form.
examples: Folder containing examples for each of the charts
• base: Basic chart examples relying almost entirely on the library
• slightly_more_advanced: More complex examples, including versions that are integrated with the greater p5.js ecosystem
libraries: p5.js is located here
logo: Contains the logo for submission to the Processing Foundation
p5.chart.js: Library
sketch.js: Build your own charts in this template file