Multiple panels example

An example of a plot with multiple panels using the grafica.js library: https://github.com/jagracar/grafica.js

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) {
    // Initial setup
    p.setup = function () {
        // Create the canvas
        var canvas = p.createCanvas(500, 500);

        var firstPlotPos = [0, 0];
        var panelDim = [200, 200];
        var margins = [60, 70, 40, 30];

        // Create four plots to represent the 4 panels
        var plot1 = new GPlot(p);
        plot1.setPos(firstPlotPos);
        plot1.setMar(0, margins[1], margins[2], 0);
        plot1.setDim(panelDim);
        plot1.setAxesOffset(0);
        plot1.setTicksLength(-4);
        plot1.getXAxis().setDrawTickLabels(false);

        var plot2 = new GPlot(p);
        plot2.setPos(firstPlotPos[0] + margins[1] + panelDim[0], firstPlotPos[1]);
        plot2.setMar(0, 0, margins[2], margins[3]);
        plot2.setDim(panelDim);
        plot2.setAxesOffset(0);
        plot2.setTicksLength(-4);
        plot2.getXAxis().setDrawTickLabels(false);
        plot2.getYAxis().setDrawTickLabels(false);

        var plot3 = new GPlot(p);
        plot3.setPos(firstPlotPos[0], firstPlotPos[1] + margins[2] + panelDim[1]);
        plot3.setMar(margins[0], margins[1], 0, 0);
        plot3.setDim(panelDim);
        plot3.setAxesOffset(0);
        plot3.setTicksLength(-4);

        var plot4 = new GPlot(p);
        plot4.setPos(firstPlotPos[0] + margins[1] + panelDim[0], firstPlotPos[1] + margins[2] + panelDim[1]);
        plot4.setMar(margins[0], 0, 0, margins[3]);
        plot4.setDim(panelDim);
        plot4.setAxesOffset(0);
        plot4.setTicksLength(-4);
        plot4.getYAxis().setDrawTickLabels(false);

        // Prepare the points for the four plots
        var nPoints = 21;
        var points1 = [];
        var points2 = [];
        var points3 = [];
        var points4 = [];

        for (var i = 0; i < nPoints; i++) {
            points1[i] = new GPoint(p.sin(p.TWO_PI * i / (nPoints - 1)), p.cos(p.TWO_PI * i / (nPoints - 1)));
            points2[i] = new GPoint(i, p.cos(p.TWO_PI * i / (nPoints - 1)));
         ...