p5.js-plot

KO | EN

gitlite — search

#hacktoberfest #ai #llm #go #golang #machine-learning #linux #nodejs #java #awesome #cli #awesome-list #pytorch #mcp

(★ 14)

p5.plot!

p5.js-plot Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# p5.js-plot
p5.plot!

## Documentation
### JSONs
```
// to use existing datasets
var diamonds, mpg, seals, economics;

function preload() {
	diamonds = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/diamonds.json");
	seals = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/seals.json");
	mpg = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/mpg.json");
	economics = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/economics.json");
}
```
### Getting Started
```
// initiate a variable
let foo;
function setup(){
  // create a new p5.plot instance and store it in the variable
  foo = new p5.Plot();
}
```
The p5.plot object instance takes in the following constructors:
- data

Takes in an array of objects
- xkey

Specify the key value for x axis.
- ykey

Specify the key value for y axis.
- type

Supports "line", "point", "area", "density", "box", "histogram", "pie"
- left

The left position of the graph. Takes a number.
- top

The top position of the graph. Takes a number.
- right

The right position of the graph. Takes a number.
- bottom

The bottom position of the graph. Takes a number.
- background

Whether to draw background. Takes ```true``` or ```false```.
- backgroundcolor
- gridcolor
- gridweight
- cols

The number of columns of the grid.
- rows

The number of the rows of the grid.
- fillcolor

The filling color of the graph.
- strokecolor
- strokeweight
- pointdiameter

The numeric value of the diameter of the points on the graph.
- bins

Number of bins to group the datasets.

### Types of Graphs
- Line graph

{type: 'line'}

- Point graph

{type: 'point'}

- Area graph

{type: 'area'}

- Density graph, one contineous variable

{type: 'density'}

- box and whisker plot

{type: 'box'}

- Histogram

{type: 'histogram'}, one contineous variable

- Pie chart

{type: 'pie'}

### Functions
- redraw()

Put this in draw to use the hover function.
Example:
```
foo.redraw()
```
- hover()

Now supports point graph, line graph and histogram.
Example:
```
foo.hover(mouseX, mouseY, 'point');
foo.hover(mouseX, mouseY, 'bin');
```
## WORKING ON:
- Fixing graphs by incorporating multiple xkey values and multiple colors
(line graph, point graph, area graph done)

## TO DO:
- Fix hover function (a new way to add data in each graph function)
- multiple xkeys AND multiple ykeys faceting
- graph annotation, such as title
- scales, coordinate system

p5.js-plot

p5.js-plot Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

p5.js-plot

p5.js-plot Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README