Add missing scatter plot.

Makefile

@@ -11,6 +11,7 @@ JS_FILES :=        src/header.js \
                    src/component/donut.js \
                    src/component/creditTag.js \
                    src/component/labeledNode.js \
+                   src/component/scatterPlot.js \
                    src/component/legend.js \
                    src/component/lineChart.js \
                    src/component/heatMap.js \

build/d3-ez.js

@@ -1128,6 +1128,93 @@ d3.ez.component.labeledNode = function module() {
     return my;
 };
 
+/**
+ * Reusable Scatter Plot
+ *
+ * @example
+ * var myBars = d3.ez.component.scatterPlot()
+ *     .colorScale(**D3 Scale Object**);
+ * d3.select("svg").call(myBars);
+ */
+d3.ez.component.scatterPlot = function module() {
+    // Default Options (Configurable via setters)
+    var height = 100;
+    var width = 300;
+    var colorScale = undefined;
+    var xScale = undefined;
+    var yScale = undefined;
+    var transition = {
+        ease: d3.easeBounce,
+        duration: 500
+    };
+    var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+    function my(selection) {
+        selection.each(function(data) {
+            // Create chart group
+            selection.selectAll(".dotSeries").data(function(d) {
+                return [ d ];
+            }).enter().append("g").classed("dotSeries", true).attr("fill", function(d) {
+                return colorScale(d.key);
+            }).attr("width", width).attr("height", height).on("click", function(d) {
+                dispatch.call("customClick", this, d);
+            });
+            var dotSeries = selection.selectAll(".dotSeries");
+            // Add Dots to Group
+            var dots = dotSeries.selectAll(".dot").data(function(d) {
+                return d.values;
+            });
+            dots.enter().append("circle").attr("class", function(d) {
+                return d.key + " dot";
+            }).attr("r", 3).attr("cx", function(d, i) {
+                return xScale(d.key);
+            }).attr("cy", height).on("mouseover", function(d) {
+                dispatch.call("customMouseOver", this, d);
+            }).merge(dots).transition().ease(transition.ease).duration(transition.duration).attr("cx", function(d, i) {
+                return xScale(d.key);
+            }).attr("cy", function(d, i) {
+                return yScale(d.value);
+            });
+            dots.exit().transition().style("opacity", 0).remove();
+        });
+    }
+    // Configuration Getters & Setters
+    my.height = function(_) {
+        if (!arguments.length) return height;
+        height = _;
+        return this;
+    };
+    my.width = function(_) {
+        if (!arguments.length) return width;
+        width = _;
+        return this;
+    };
+    my.colorScale = function(_) {
+        if (!arguments.length) return colorScale;
+        colorScale = _;
+        return my;
+    };
+    my.xScale = function(_) {
+        if (!arguments.length) return xScale;
+        xScale = _;
+        return my;
+    };
+    my.yScale = function(_) {
+        if (!arguments.length) return yScale;
+        yScale = _;
+        return my;
+    };
+    my.dispatch = function(_) {
+        if (!arguments.length) return dispatch();
+        dispatch = _;
+        return this;
+    };
+    my.on = function() {
+        var value = dispatch.on.apply(dispatch, arguments);
+        return value === dispatch ? my : value;
+    };
+    return my;
+};
+
 /**
  * Legend
  *