initial publish

.editorconfig

@@ -13,5 +13,5 @@ end_of_line = lf
 trim_trailing_whitespace = false
 
 [Makefile]
-indent_style = space
+indent_style = tab
 indent_size = 2

.travis.yml

@@ -10,4 +10,3 @@ install:
 
 test:
   - npm lint
-  - npm run istanbul && cat ./coverage/lcov.info | coveralls

README.md

@@ -2,7 +2,7 @@
 
 [![NPM][npm-image]][npm-url]
 
-> A simple 2d function plotter powered by d3 and used on maurizzzio.com
+> A simple 2d function plotter powered by d3 and used on http://blog.maurizzzio.com
 
 ## Install
 
@@ -14,22 +14,68 @@ $ npm install --save simple-function-plot
 
 ```js
 var simpleFunctionPlot = require('simple-function-plot');
-simpleFunctionPlot('Rainbow');
+var instance = simpleFunctionPlot({
+  // see the API below
+})
+d3.select(' selector of the parent container for the chart ')
+  .call(instance)
 ```
 
-## TODO
+## Example
 
-- [ ] baselines (parallel to the X axis) http://metricsgraphicsjs.org/examples.htm
-- [ ] annotations (parallel to the Y axis)
-- [ ] 
+See `public/index.js`
+
+Screenshot:
+
+![screen shot 2015-03-31 at 3 04 07 am](https://cloud.githubusercontent.com/assets/1616682/6913963/11013696-d754-11e4-8bf1-8008f36cd670.gif)
 
 ## API
 
-Coming soon...
+```
+var simpleFunctionPlot = require('simple-function-plot');
+```
+
+### `simpleFunctionPlot(options)`
+
+**params, All the params are optional unless otherwise stated**
+
+* `options`
+  * `options.title` {string} If set the chart will have it as a title on the top
+  * `options.domain` {object} configuration used as the domain of the scales (e.g. `d3.scale.linear().domain(domain.x)`)
+    * `options.domain.x` {array} 
+    * `options.domain.y` {array} 
+  * `options.tip` {object} configuration passed to `lib/tip`, it's the helper shown on mouseover on the closest
+  function to the current mose position
+    * `options.tip.xLine` {boolean} true to show a line parallel to the X axis on mouseover
+    * `options.tip.yLine` {boolean} true to show a line parallel to the Y axis on mouseover
+    * `options.tip.renderer` {function} Function to be called to define custom rendering on mouseover, called with the
+     `x` and `f(x)` of the function which is closest to the mouse position (args: `x, y`)
+  * `options.data` {array} *required* An array defining the functions to be rendered
+    * `options.data[i].title` {string} title of the function
+    * `options.data[i].fn` {function} the function itself, called with an independent value defined in `range`, it
+    * `options.data[i].range` {array} An array with the range of values which `fn` is evaluated with, e.g.
+    `[min, max, increment]`, in case increment is not passed it default to `(max - min) / 100`
+    * `options.data[i].graphOptions` {Object} options passed to the the files located in `lib/type/`, the most useful
+    property of this object is `type` which is used to determine the type of graph to be rendered for a function
+
+## Development
+
+After cloning the repo and running `npm install`
+
+```sh
+npm start
+```
+
+Open `localhost:5555` and that's it! Local development server powered [beefy](https://www.npmjs.com/package/beefy)
+
+## TODO
+
+- [ ] baselines (parallel to the X axis) http://metricsgraphicsjs.org/examples.htm
+- [ ] annotations (parallel to the Y axis)
 
 ## License
 
-2015 MIT © [Mauricio Poppe]()
+2015 MIT © Mauricio Poppe
 
 [npm-image]: https://nodei.co/npm/simple-function-plot.png?downloads=true
 [npm-url]: https://npmjs.org/package/simple-function-plot

index.js

@@ -95,15 +95,15 @@ module.exports = function (options) {
           .on('zoom', zoomed)
         );
 
-      // clip
+      // clip (so that the functions don't overflow on zoom or drag)
       var clip = svg.append('defs')
         .append('clipPath')
           .attr('id', 'clip')
         .append('rect')
           .attr('width', width)
           .attr('height', height);
 
-      // axis
+      // axis creation
       svg.append('g')
         .attr('class', 'x axis')
         .attr('transform', 'translate(0,' + height + ')')
@@ -133,6 +133,9 @@ module.exports = function (options) {
         .attr('stroke', 'black')
         .attr('d', line);
 
+      // zoom behavior
+      // - updates the position of the axes
+      // - updates the position/scale of the clipping rectangle
       function zoomed() {
         var t = d3.event.translate;
         var s = d3.event.scale;
@@ -149,7 +152,7 @@ module.exports = function (options) {
         scatter: scatterPlot
       };
 
-      // content construction
+      // content construction (based on graphOptions.type)
       content.selectAll('g')
         .data(data)
       .enter()

package.json

@@ -36,6 +36,6 @@
     "lint": "eslint index.js lib test",
     "test": "mocha -R spec test/",
     "test:watch": "nodemon --watch lib --watch test --watch index.js --exec 'npm test'",
-    "start": "./node_modules/.bin/beefy public/index.js:bundle.js 5001"
+    "start": "./node_modules/.bin/beefy public/index.js:bundle.js 5555"
   }
 }

public/index.js

@@ -3,14 +3,13 @@
  */
 'use strict';
 var d3 = window.d3;
-var functionPlot = require('../');
-var instance = functionPlot({
-  title: 'test',
-  //description: 'hello world',
-  //domain: {
-  //  x: [-10, 10],
-  //  y: [-10, 10]
-  //},
+var simpleFunctionPlot = require('../');
+var instance = simpleFunctionPlot({
+  title: 'A title!',
+  domain: {
+    x: [-5, 5],
+    y: [-5, 5]
+  },
   tip: {
     xLine: true,
     yLine: true