Multiple plots example

An example with multiple plots using the grafica.js library: https://github.com/jagracar/grafica.js Drag the mouse (+control key) over the first plot to pan in any direction. Left click to show the point labels. Click left in the second plot to recenter and use the mouse wheel to zoom.

by Javier Graciá Carpio

HTML

<script src="https://cdn.rawgit.com/jagracar/grafica.js/master/releases/grafica.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

JavaScript

var sketch = function (p) {
    // Global variables
    var plot1, plot2, plot3, plot4, i, index;
    var polygonPoints;
    var gaussianStack, gaussianCounter, uniformStack, uniformCounter;

    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(850, 650);

        // Obtain the points for the first plot
        var points1a = [];
        var points1b = [];
        var points1c = [];

        for (i = 0; i < 500; i++) {
            points1a[i] = new GPoint(i, p.noise(0.1 * i) + 1, "point " + i);
            points1b[i] = new GPoint(i, p.noise(500 + 0.1 * i) + 0.5, "point " + i);
            points1c[i] = new GPoint(i, p.noise(1000 + 0.1 * i), "point " + i);
        }

        // Create a polygon to display inside the plot
        polygonPoints = [];
        polygonPoints.push(new GPoint(2, 0.15));
        polygonPoints.push(new GPoint(6, 0.12));
        polygonPoints.push(new GPoint(15, 0.3));
        polygonPoints.push(new GPoint(8, 0.6));
        polygonPoints.push(new GPoint(1.5, 0.5));

        // Setup for the first plot
        plot1 = new GPlot(p);
        plot1.setPos(0, 0);
        plot1.setXLim(1, 100);
        plot1.setYLim(0.1, 3);
        plot1.getXAxis().getAxisLabel().setText("Time");
        plot1.getYAxis().getAxisLabel().setText("noise (0.1 time)");
        plot1.getTitle().setText("Multiple layers plot");
        plot1.setLogScale("xy");
        plot1.setPoints(points1a);
        plot1.setLineColor(p.color(200, 200, 255));
        plot1.addLayer("layer 1", points1b);
        plot1.getLayer("layer 1").setLineColor(p.color(150, 150, 255));
        plot1.addLayer("layer 2", points1c);
        plot1.getLayer("layer 2").setLineColor(p.color(100, 100, 255));

        // Leave empty the points for the second plot. We will fill them in draw()
        var points2 = [];

        // Setup for the second plot
        plot2 = new GPlot(p);
        plot2.setPos(460, 0);
        plot2.setDim(250,...