initial commit -- not ready yet

README.md

@@ -0,0 +1,110 @@
+# C2
+
+C2 is a helper library for creating custom components that render to canvas.  Currently C2 is only compatible with D3 v4.  
+
+C2 works by allowing you to define custom element tags that are intended to render to canvas.
+
+For example:
+```
+//define custom component tag
+
+var Rect = c2.element(function (context) {
+  context.fillRect(this.x,this.y,this.width,this.height);
+}).attributes({
+  x : c2.types.float,
+  y : c2.types.float,
+  width: c2.types.float,
+  height : c2.types.float
+});
+
+//the attributes method above is used to compile optimized setAttribute 
+//and getAttribute functions.  Attributes are also used by c2.animate to
+//generate optimized tweening functions.  
+
+
+
+
+
+
+//c2.Context2d is a custom tag provided by c2 that selects the 2d context from a canvas element
+
+var context = d3.select('canvas').select(c2.Context2d)
+  //tick is an event that triggers before each render frame
+  //if you need to use an after render event, use "tock"
+  .on('tick',function () {
+    this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height);
+  })
+var selection = context.selectAll(Rect).data(data,function (d,i) {return i;});
+selection.enter()
+  .append(Rect)
+  .attr('x',0)
+  .attr('y',0)
+  .attr('width',0)
+  .attr('height',0)
+.merge(selection)
+
+//c2.animate is uses its own internal scheduler, groups tweens by
+//start/duration/easing and is generally faster than d3.transition
+//as well as being easier on the garbage collector.
+.call(c2.animate()
+  .to({
+    x : function (d,i) {return Math.random()*1000},
+    y: function (d,i) {return Math.random()*500},
+    height : 1,
+    width : 1
+  });
+  
+selection.exit()
+  .call(
+    c2.animate()
+      .to({
+        width : 0,
+        height: 0
+      })
+      .remove()
+  );
+```
+
+
+### TODO
+WebGL support
+api/docs
+
+### Demos (with code)
+1) <a href="https://tadaa.github.io/c2/demos/bars.html" target="_blank">Bars</a>
+
+2) <a href="https://tadaa.github.io/c2/demos/donut.html" target="_blank">Donut (uses Path2D for canvas with d3.arc)</a>
+
+
+
+### Quickstart
+1) Download script through npm or download/include the appropriate script.  Pre-minified scripts are available.
+
+`<script src="/path/to/dist/c2.js">`
+
+or
+
+`npm install --save-dev c2`
+
+All scripts:
+
+* dist/c2.js
+
+* dist/c2.min.js
+
+* dist/c2.amd.js
+
+* dist/c2.amd.min.js
+
+* dist/c2.node.js
+
+* dist/c2.node.min.js
+
+* dist/c2.umd.js
+
+* dist/c2.umd.min.js
+
+
+2) Make sure you install d3.js.  c2.js can be loaded before or after d3.
+
+3) Review demos and code away!

build.js

@@ -0,0 +1,37 @@
+var babel = require('babel-core'),
+fs = require('fs');
+
+copy ("index.js") ("poppy.css");
+transform_jsx ("container.js") ("poppy.js")
+
+
+function copy (file) {
+    fs.readFile("libs/"+file,function (err,data) {
+        fs.writeFile("dist/"+file,data,function (err,data) {
+            if (err) {
+                console.error(err.toString());
+            } else {
+                console.error("done writing " + file);
+            }
+        });
+    });
+    return copy;
+}
+function transform_jsx (file) {
+    babel.transformFile("libs/"+file,{
+        'presets' : ['react']
+    },function (err,code) {
+        if (err) {
+            console.error(err.toString());
+        } else {
+            fs.writeFile("dist/"+file,code.code,function (err) {
+                if (err) {
+                    console.error(err.toString());
+                } else {
+                    console.error("done writing " + file);
+                }
+            });
+        }
+    });
+    return transform_jsx;
+}

dist/container.js

@@ -0,0 +1,11 @@
+var React = require('react');
+module.exports = React.createClass({
+    displayName: 'exports',
+
+    'shouldComponentUpdate': function () {
+        return !this.loaded && (this.loaded = true);
+    },
+    'render': function () {
+        return React.createElement('div', { className: 'poppy-container', style: { position: 'absolute', display: 'inline', top: 0, pointerEvents: 'none', zIndex: 6000 } });
+    }
+});

dist/index.js

@@ -0,0 +1,2 @@
+module.exports = require('./poppy.js');
+module.exports.Container = require('./container.js');

dist/poppy.css

@@ -0,0 +1,76 @@
+.poppy {
+    visiblity:hidden;
+    display:inline-block;
+    opacity:0;
+    position:absolute;
+}
+.poppy-popover-background {
+    opacity:0.925;
+    z-index:0;
+    backface-visibility:hidden;
+    background:#000;
+    transform:translateZ(0);
+}
+.poppy-arrow {
+    position:absolute;
+    z-index:-1;
+    background:inherit;
+    transition:  all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    transform:rotateZ(45deg);
+}
+.poppy-background-overlay {
+    z-index:0;
+    background:inherit;
+    border-radius:4px;
+    border-top-width:0;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    transform: translateZ(0);
+    height: 100%;
+    transition : all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+}
+.poppy-content {
+    display:inline-block;
+    z-index: 1;
+    position: relative;
+    pointer-events:all;
+    transition:none;
+    padding-left: 10px;
+    width: auto;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+    box-sizing: border-box;
+}
+.poppy-overflow {
+    position:relative;
+    display: inline-block;
+    z-index:0;
+    padding:0;
+}
+.poppy-content-wrapper {
+    position:absolute;
+    pointer-events:all;
+    width:auto;
+    display:inline-block;
+    transition:all 450ms cubic-bezier(0.23,1,0.32,1) 0ms;
+    overflow:hidden;
+    z-index:1;
+}
+.poppy-title-wrapper {
+    z-index:1;
+    position:absolute;
+    display:inline-block;
+    width: 100%;
+    text-align: center;
+    transition: none;
+    color: #fff;
+}
+.poppy-title {
+    display: inline-block;
+    padding: 10px;
+}