boxplot-enhancements [4]

Add 2 new examples, documented api, added new dataOpacity api

src/box-plot.js

@@ -44,6 +44,7 @@ dc.boxPlot = function (parent, chartGroup) {
     var _box = d3.box();
     var _tickFormat = null;
     var _renderData = false;
+    var _dataOpacity = 0.3;
     var _dataBoxPercentage = 0.8;
     var _renderTitle = false;
     var _showOutliers = true;
@@ -146,6 +147,7 @@ dc.boxPlot = function (parent, chartGroup) {
             .duration(_chart.transitionDuration())
             .tickFormat(_tickFormat)
             .renderData(_renderData)
+            .dataOpacity(_dataOpacity)
             .dataBoxPercentage(_dataBoxPercentage)
             .renderTitle(_renderTitle)
             .showOutliers(_showOutliers)
@@ -280,10 +282,13 @@ dc.boxPlot = function (parent, chartGroup) {
 
     /**
      * Get or set whether individual data points will be rendered.
+     * @example
+     * // Enable rendering of individual data points
+     * chart.renderData(true);
      * @method renderData
      * @memberof dc.boxPlot
      * @instance
-     * @param {Boolean} [show=true]
+     * @param {Boolean} [show=false]
      * @returns {Boolean|dc.boxPlot}
      */
     _chart.renderData = function (show) {
@@ -294,8 +299,30 @@ dc.boxPlot = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     * Get or set the opacity when rendering data.
+     * @example
+     * // If individual data points are rendered increase the opacity.
+     * chart.dataOpacity(0.7);
+     * @method dataOpacity
+     * @memberof dc.boxPlot
+     * @instance
+     * @param {Number} [opacity=0.3]
+     * @returns {Number|dc.boxPlot}
+     */
+    _chart.dataOpacity = function (opacity) {
+        if (!arguments.length) {
+            return _dataOpacity;
+        }
+        _dataOpacity = opacity;
+        return _chart;
+    };
+
     /**
      * Get or set the percentage of the box to show data.
+     * @example
+     * // If individual data points are rendered increase the data box.
+     * chart.dataBoxPercentage(0.9);
      * @method dataBoxPercentage
      * @memberof dc.boxPlot
      * @instance
@@ -312,10 +339,13 @@ dc.boxPlot = function (parent, chartGroup) {
 
     /**
      * Get or set whether tooltips will be rendered.
+     * @example
+     * // Enable tooltips of individual data points and outliers
+     * chart.renderTitle(true);
      * @method renderTitle
      * @memberof dc.boxPlot
      * @instance
-     * @param {Boolean} [show=true]
+     * @param {Boolean} [show=false]
      * @returns {Boolean|dc.boxPlot}
      */
     _chart.renderTitle = function (show) {
@@ -328,6 +358,9 @@ dc.boxPlot = function (parent, chartGroup) {
 
     /**
      * Get or set whether outliers will be rendered.
+     * @example
+     * // Disable rendering of outliers
+     * chart.renderTitle(false);
      * @method showOutliers
      * @memberof dc.boxPlot
      * @instance
@@ -344,10 +377,13 @@ dc.boxPlot = function (parent, chartGroup) {
 
     /**
      * Get or set whether outliers will be bold.
+     * @example
+     * // If outliers are rendered display as bold
+     * chart.boldOutlier(true);
      * @method boldOutlier
      * @memberof dc.boxPlot
      * @instance
-     * @param {Boolean} [show=true]
+     * @param {Boolean} [show=false]
      * @returns {Boolean|dc.boxPlot}
      */
     _chart.boldOutlier = function (show) {

src/d3.box.js

@@ -46,6 +46,7 @@
             // Enhanced attributes
             renderData = false,
             dataRadius = 3,
+            dataOpacity = 0.3,
             dataBoxPercentage = 0.8,
             renderTitle = false,
             showOutliers = true,
@@ -283,7 +284,7 @@
                         .duration(duration)
                         .delay(delay)
                         .attr('cy', function (i) { return x1(d[i]); })
-                        .style('opacity', 0.2);
+                        .style('opacity', dataOpacity);
 
                     if (renderTitle) {
                         point.selectAll('title').remove();
@@ -297,7 +298,7 @@
                             (width * dataBoxPercentage) +
                             1 + ((width - (width * dataBoxPercentage)) / 2)); })
                         .attr('cy', function (i) { return x1(d[i]); })
-                        .style('opacity', 0.2);
+                        .style('opacity', dataOpacity);
 
                     point.exit().transition()
                         .duration(duration)
@@ -431,6 +432,14 @@
             return box;
         };
 
+        box.dataOpacity = function (x) {
+            if (!arguments.length) {
+                return dataOpacity;
+            }
+            dataOpacity = x;
+            return box;
+        };
+
         box.dataBoxPercentage = function (x) {
             if (!arguments.length) {
                 return dataBoxPercentage;

web/examples/boxplot-enhanced.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Box-Plot Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
+<div id="box-test"></div>
+<div id="pie-chart"></div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var chart = dc.boxPlot("#box-test"),
+    pie = dc.pieChart("#pie-chart");
+d3.csv("morley.csv", function(error, experiments) {
+
+  experiments.forEach(function(x) {
+    x.Speed = +x.Speed;
+  });
+
+  var ndx                 = crossfilter(experiments),
+      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
+      runGroup            = runDimension.group(),
+      experimentDimension = ndx.dimension(function(d) {return "exp-" + d.Expt;}),
+      speedArrayGroup     = experimentDimension.group().reduce(
+        function(p,v) {
+          p.push(v.Speed);
+          return p;
+        },
+        function(p,v) {
+          p.splice(p.indexOf(v.Speed), 1);
+          return p;
+        },
+        function() {
+          return [];
+        }
+      );
+
+  chart
+    .width(768)
+    .height(480)
+    .margins({top: 10, right: 50, bottom: 30, left: 50})
+    .dimension(experimentDimension)
+    .group(speedArrayGroup)
+    .elasticY(true)
+    .elasticX(true);
+
+  pie
+    .width(140)
+    .height(140)
+    .radius(70)
+    .dimension(runDimension)
+    .group(runGroup);
+
+  dc.renderAll();
+/*
+  var i=0;
+  setInterval(function() {
+    runDimension.filterAll();
+    runDimension.filter([i++,21]);
+    dc.renderAll();
+  }, 2000);
+*/
+});
+
+</script>
+
+</div>
+</body>
+</html>