First real commit!

.gitignore

@@ -0,0 +1 @@
+node_modules

.project

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>grafica.js</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>

Gruntfile.js

@@ -0,0 +1,46 @@
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		pkg : grunt.file.readJSON('package.json'),
+		jshint : {
+			files : ['Gruntfile.js', 'src/**/*.js', 'examples/**/*.js'],
+		},
+		concat : {
+			options : {
+				separator : '\n'
+			},
+			dist : {
+				src : ['src/GPoint.js', 'src/GTitle.js', 'src/GAxisLabel.js', 'src/GAxis.js', 'src/GHistogram.js', 'src/GLayer.js', 'src/GPlot.js'],
+				dest : 'lib/<%= pkg.name %>.js'
+			}
+		},
+		uglify : {
+			options : {
+				banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+			},
+			build : {
+				src : 'lib/<%= pkg.name %>.js',
+				dest : 'lib/<%= pkg.name %>.min.js'
+			}
+		},
+		copy : {
+			main : {
+				files : [{
+					expand : true,
+					cwd : 'lib/',
+					src : ['**'],
+					dest : 'releases/'
+				}]
+			}
+		}
+	});
+
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-copy');
+
+	// Default task(s).
+	grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'copy']);
+};

README.md

@@ -1,2 +1,26 @@
 # grafica.js
-A simple and configurable plotting library for p5.js
+
+grafica.js is a simple and configurable plotting library for [p5.js](http://p5js.org). It's the javaScript
+version of the [grafica](https://github.com/jagracar/grafica) Processing library.
+With it you can easily create 2D plots that will enjoy the full interactive capabilities of Processing in the web. 
+
+
+## Main features
+
+  * Make fancy scatter and linear plots that update in real time.
+  * Display histograms in the vertical and horizontal directions.
+  * Add several layers with different properties to the same plot.
+  * It works both with linear and logarithmic scales.
+  * Automatic axis tick determination.
+  * Interactive zooming and panning. Make your data move!
+  * Add labels to your points and display them with one click.
+  * You can use images to represent your points.
+  * Highly customizable. Defaults are nice, but you can tweak almost everything.
+  * Processing coding style. If you are used to work with Processing (p5.js), grafica.js will be very easy.
+  * It comes with a good set of [examples](https://github.com/jagracar/grafica.js/tree/master/examples).
+  * It's open source. grafica is under the GNU Lesser General Public License. You can find the complete source code [here](https://github.com/jagracar/grafica.js/tree/master/src).
+
+## Installation
+
+Download the [latest minified library release](https://raw.github.com/jagracar/grafica.js/master/releases/grafica.min.js) and follow the steps 
+described [here](http://p5js.org/libraries/).

examples/data/OktoberfestVSGermanElections.csv

@@ -0,0 +1,118 @@
+year,month,day,oktoberfest,bundestagswahl
+2004,0,1,5,1
+2004,1,1,4,1
+2004,2,1,6,1
+2004,3,1,5,1
+2004,4,1,6,1
+2004,5,1,8,1
+2004,6,1,12,1
+2004,7,1,26,0
+2004,8,1,84,1
+2004,9,1,38,1
+2004,10,1,5,1
+2004,11,1,4,1
+2005,0,1,5,1
+2005,1,1,5,1
+2005,2,1,5,1
+2005,3,1,6,1
+2005,4,1,7,2
+2005,5,1,9,3
+2005,6,1,12,4
+2005,7,1,23,16
+2005,8,1,81,64
+2005,9,1,39,5
+2005,10,1,5,2
+2005,11,1,4,1
+2006,0,1,5,1
+2006,1,1,4,1
+2006,2,1,5,1
+2006,3,1,5,1
+2006,4,1,6,0
+2006,5,1,7,1
+2006,6,1,11,0
+2006,7,1,25,0
+2006,8,1,76,1
+2006,9,1,38,1
+2006,10,1,5,1
+2006,11,1,3,0
+2007,0,1,5,0
+2007,1,1,5,0
+2007,2,1,5,1
+2007,3,1,6,0
+2007,4,1,7,0
+2007,5,1,9,1
+2007,6,1,12,0
+2007,7,1,24,0
+2007,8,1,79,0
+2007,9,1,46,1
+2007,10,1,5,1
+2007,11,1,3,0
+2008,0,1,5,1
+2008,1,1,5,1
+2008,2,1,5,1
+2008,3,1,6,0
+2008,4,1,6,0
+2008,5,1,7,0
+2008,6,1,11,0
+2008,7,1,22,0
+2008,8,1,77,1
+2008,9,1,44,1
+2008,10,1,5,1
+2008,11,1,3,1
+2009,0,1,4,2
+2009,1,1,5,1
+2009,2,1,5,1
+2009,3,1,5,1
+2009,4,1,6,2
+2009,5,1,8,3
+2009,6,1,12,3
+2009,7,1,24,12
+2009,8,1,91,79
+2009,9,1,53,5
+2009,10,1,6,2
+2009,11,1,4,1
+2010,0,1,5,2
+2010,1,1,5,1
+2010,2,1,6,1
+2010,3,1,6,1
+2010,4,1,7,1
+2010,5,1,8,1
+2010,6,1,13,0
+2010,7,1,27,0
+2010,8,1,100,1
+2010,9,1,59,1
+2010,10,1,7,1
+2010,11,1,4,0
+2011,0,1,5,1
+2011,1,1,5,1
+2011,2,1,5,1
+2011,3,1,5,0
+2011,4,1,7,1
+2011,5,1,8,0
+2011,6,1,13,0
+2011,7,1,26,0
+2011,8,1,95,1
+2011,9,1,64,1
+2011,10,1,10,1
+2011,11,1,6,0
+2012,0,1,6,1
+2012,1,1,5,1
+2012,2,1,5,1
+2012,3,1,6,1
+2012,4,1,7,1
+2012,5,1,8,0
+2012,6,1,13,0
+2012,7,1,28,0
+2012,8,1,97,1
+2012,9,1,69,1
+2012,10,1,9,1
+2012,11,1,5,1
+2013,0,1,5,2
+2013,1,1,5,1
+2013,2,1,5,1
+2013,3,1,6,1
+2013,4,1,7,2
+2013,5,1,8,2
+2013,6,1,11,3
+2013,7,1,27,16
+2013,8,1,64,32

examples/defaultPlot.js

@@ -0,0 +1,31 @@
+var defaultPlotSketch = function(p) {
+	// Initial setup
+	p.setup = function() {
+		// Create the canvas
+		var canvas = p.createCanvas(500, 350);
+		p.background(150);
+
+		// Prepare the points for the plot
+		var points = [];
+		var seed = 100 * p.random();
+
+		for (var i = 0; i < 100; i++) {
+			points[i] = new GPoint(i, 10 * p.noise(0.1 * i + seed));
+		}
+
+		// Create a new plot and set its position on the screen
+		var plot = new GPlot(p);
+		plot.setPos(25, 25);
+
+		// Set the plot title and the axis labels
+		plot.setPoints(points);
+		plot.getXAxis().setAxisLabelText("x axis");
+		plot.getYAxis().setAxisLabelText("y axis");
+		plot.setTitleText("A very simple example");
+
+		// Draw it!
+		plot.defaultDraw();
+
+		p.noLoop();
+	};
+};

examples/examples.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="keywords"
+		content="processing, p5.js, P5js, grafica, grafica.js, javaScript, examples">
+		<meta name="description" content="grafica.js examples">
+		<meta name="author" content="Javier Graciá Carpio">
+		<title>grafica.js examples</title>
+	</head>
+
+	<body>
+		<h1>grafica.js</h1>
+
+		<p>
+			Some basic examples showing the grafica.js library capabilities:
+		</p>
+
+		<ul>
+			<li onclick="runSketch(defaultPlotSketch);">
+				Default plot example
+			</li>
+			<li onclick="runSketch(multiplePlotsSketch);">
+				Multiple plots example
+			</li>
+			<li onclick="runSketch(multiplePanelsSketch);">
+				Multiple panels example
+			</li>
+			<li onclick="runSketch(exponentialTrendSketch);">
+				Exponential
+				trend example
+			</li>
+			<li onclick="runSketch(movingPointsSketch);">
+				Moving points example
+			</li>
+			<li onclick="runSketch(oktoberfestSketch);">
+				Oktoberfest example
+			</li>
+		</ul>
+
+		<div id="sketchContainer"></div>
+
+		<!-- JavaScript files -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.3/p5.min.js"></script>
+		<script src="../lib/grafica.min.js"></script>
+		<script src="defaultPlot.js"></script>
+		<script src="multiplePlots.js"></script>
+		<script src="multiplePanels.js"></script>
+		<script src="exponentialTrend.js"></script>
+		<script src="movingPoints.js"></script>
+		<script src="oktoberfest.js"></script>
+		<script>
+			// This is the sketch launcher
+			var p5Sketch;
+
+			function runSketch(sketch) {
+				if ( typeof p5Sketch !== 'undefined') {
+					p5Sketch.remove();
+				}
+
+				p5Sketch = new p5(sketch, "sketchContainer");
+			}
+		</script>
+	</body>

examples/exponentialTrend.js

@@ -0,0 +1,77 @@
+var exponentialTrendSketch = function(p) {
+	// Global variables
+	var plot, logScale;
+
+	// Initial setup
+	p.setup = function() {
+		// Create the canvas
+		var canvas = p.createCanvas(450, 450);
+
+		// Prepare the points for the plot
+		var points = [];
+
+		for (var i = 0; i < 1000; i++) {
+			var x = 10 + p.random(200);
+			var y = 10 * p.exp(0.015 * x);
+			var xErr = p.randomGaussian(0, 2);
+			var yErr = p.randomGaussian(0, 2);
+			points[i] = new GPoint(x + xErr, y + yErr);
+		}
+
+		// Create the plot
+		plot = new GPlot(p);
+		plot.setPos(25, 25);
+		plot.setDim(300, 300);
+		// or all in one go
+		// plot = new GPlot(p, 25, 25, 300, 300);
+
+		// Set the plot title and the axis labels
+		plot.setTitleText("Exponential law");
+		plot.getXAxis().setAxisLabelText("x");
+
+		if (logScale) {
+			plot.setLogScale("y");
+			plot.getYAxis().setAxisLabelText("log y");
+		} else {
+			plot.setLogScale("");
+			plot.getYAxis().setAxisLabelText("y");
+		}
+
+		// Add the points to the plot
+		plot.setPoints(points);
+		plot.setPointColor(p.color(100, 100, 255, 50));
+	};
+
+	// Execute the sketch
+	p.draw = function() {
+		// Clean the canvas
+		p.background(150);
+
+		// Draw the plot
+		plot.beginDraw();
+		plot.drawBackground();
+		plot.drawBox();
+		plot.drawXAxis();
+		plot.drawYAxis();
+		plot.drawTopAxis();
+		plot.drawRightAxis();
+		plot.drawTitle();
+		plot.drawPoints();
+		plot.endDraw();
+	};
+
+	p.mouseClicked = function() {
+		if (plot.isOverBox(p.mouseX, p.mouseY)) {
+			// Change the log scale
+			logScale = !logScale;
+
+			if (logScale) {
+				plot.setLogScale("y");
+				plot.getYAxis().setAxisLabelText("log y");
+			} else {
+				plot.setLogScale("");
+				plot.getYAxis().setAxisLabelText("y");
+			}
+		}
+	};
+};