violin plots

Author: sgratzl

samples/violin.html

@@ -69,7 +69,7 @@
 
       document.getElementById('randomizeData').addEventListener('click', function () {
         boxplotData.datasets.forEach(function (dataset) {
-          dataset.data = samples.boxplots({ count: 7 });
+          dataset.data = samples.boxplotsArray({ count: 7, random: random });
         });
         window.myBar.update();
       });

samples/violinSingle.html

@@ -3,6 +3,12 @@ const interpolators = {
     if (from === to) {
       return to;
     }
+    if (from == null) {
+      return to;
+    }
+    if (to == null) {
+      return from;
+    }
     return from + (to - from) * factor;
   },
 };
@@ -12,7 +18,17 @@ export function interpolateNumberArray(from, to, factor) {
     return interpolators.number(from, to, factor);
   }
   if (Array.isArray(from) && Array.isArray(to)) {
-    return from.map((f, i) => interpolators.number(f, to[i], factor));
+    return to.map((t, i) => interpolators.number(from[i], t, factor));
+  }
+  return to;
+}
+
+export function interpolateKdeCoords(from, to, factor) {
+  if (Array.isArray(from) && Array.isArray(to)) {
+    return to.map((t, i) => ({
+      v: interpolators.number(from[i] ? from[i].v : null, t.v, factor),
+      estimate: interpolators.number(from[i] ? from[i].estimate : null, t.estimate, factor),
+    }));
   }
   return to;
 }

src/animation.js

@@ -1,6 +1,8 @@
 export * from '.';
 
-import { BoxPlot, HorizontalBoxPlot } from './controllers';
+import { BoxPlot, HorizontalBoxPlot, Violin, HorizontalViolin } from './controllers';
 
 BoxPlot.register();
 HorizontalBoxPlot.register();
+Violin.register();
+HorizontalViolin.register();

src/bundle.js

@@ -1,38 +1,42 @@
 import { interpolateNumberArray } from '../animation';
 import { outlierPositioner, patchInHoveredOutlier } from '../tooltip';
 import { controllers } from 'chart.js';
+import { defaultStatsOptions } from '../data';
 
 export function baseDefaults(keys) {
   const colorKeys = ['borderColor', 'backgroundColor'].concat(keys.filter((c) => c.endsWith('Color')));
   return {
-    datasets: {
-      animation: {
-        numberArray: {
-          fn: interpolateNumberArray,
-          properties: ['outliers', 'items'],
-        },
-        colors: {
-          type: 'color',
-          properties: colorKeys,
-        },
-        show: {
-          colors: {
-            type: 'color',
-            properties: colorKeys,
-            from: 'transparent',
+    datasets: Object.assign(
+      {
+        animation: {
+          numberArray: {
+            fn: interpolateNumberArray,
+            properties: ['outliers', 'items'],
           },
-        },
-        hide: {
           colors: {
             type: 'color',
             properties: colorKeys,
-            to: 'transparent',
+          },
+          show: {
+            colors: {
+              type: 'color',
+              properties: colorKeys,
+              from: 'transparent',
+            },
+          },
+          hide: {
+            colors: {
+              type: 'color',
+              properties: colorKeys,
+              to: 'transparent',
+            },
           },
         },
+        minStats: 'min',
+        maxStats: 'max',
       },
-      minStats: 'min',
-      maxStats: 'max',
-    },
+      defaultStatsOptions
+    ),
     tooltips: {
       position: outlierPositioner.register().id,
       callbacks: {
@@ -96,7 +100,7 @@ export class StatsBase extends controllers.bar {
       raw: parsed,
       hoveredOutlierIndex: -1,
     };
-    this._transformStats(r.value, parsed, (v) => vScale.getLabelForValue(v));
+    this._transformStats(r.value, parsed, (v) => vScale.getLabelForValue(v), 'string');
     const s = this._toStringStats(r.value);
     r.value.toString = function () {
       // custom to string function for the 'value'
@@ -113,7 +117,7 @@ export class StatsBase extends controllers.bar {
     return '';
   }
 
-  _transformStats(_target, _source, _mapper) {
+  _transformStats(_target, _source, _mapper, _mode) {
     // abstract
   }
 
@@ -123,7 +127,7 @@ export class StatsBase extends controllers.bar {
     const parsed = this.getParsed(index);
     const base = scale.getBasePixel();
     properties._datasetIndex = this.index;
-    this._transformStats(properties, parsed, (v) => (reset ? base : scale.getPixelForValue(v)));
+    this._transformStats(properties, parsed, (v) => (reset ? base : scale.getPixelForValue(v)), mode);
     super.updateElement(rectangle, index, properties, mode);
   }
 }

src/controllers/base.js

@@ -1,4 +1,4 @@
-import { asBoxPlotStats, defaultStatsOptions } from '../data';
+import { asBoxPlotStats } from '../data';
 import { controllers, helpers, defaults } from 'chart.js';
 import { baseDefaults, StatsBase } from './base';
 import { BoxAndWiskers, boxOptionsKeys } from '../elements';
@@ -35,20 +35,17 @@ BoxPlot.register = () => {
       defaults.bar,
       baseDefaults(boxOptionsKeys),
       {
-        datasets: Object.assign(
-          {
-            animation: {
-              numbers: {
-                type: 'number',
-                properties: defaults.bar.datasets.animation.numbers.properties.concat(
-                  ['q1', 'q3', 'min', 'max', 'median', 'whiskerMin', 'whiskerMax'],
-                  boxOptionsKeys.filter((c) => !c.endsWith('Color'))
-                ),
-              },
+        datasets: {
+          animation: {
+            numbers: {
+              type: 'number',
+              properties: defaults.bar.datasets.animation.numbers.properties.concat(
+                ['q1', 'q3', 'min', 'max', 'median', 'whiskerMin', 'whiskerMax'],
+                boxOptionsKeys.filter((c) => !c.endsWith('Color'))
+              ),
             },
           },
-          defaultStatsOptions
-        ),
+        },
       },
     ])
   );
@@ -78,20 +75,17 @@ HorizontalBoxPlot.register = () => {
       defaults.horizontalBar,
       baseDefaults(boxOptionsKeys),
       {
-        datasets: Object.assign(
-          {
-            animation: {
-              numbers: {
-                type: 'number',
-                properties: defaults.bar.datasets.animation.numbers.properties.concat(
-                  ['q1', 'q3', 'min', 'max', 'median', 'whiskerMin', 'whiskerMax'],
-                  boxOptionsKeys.filter((c) => !c.endsWith('Color'))
-                ),
-              },
+        datasets: {
+          animation: {
+            numbers: {
+              type: 'number',
+              properties: defaults.bar.datasets.animation.numbers.properties.concat(
+                ['q1', 'q3', 'min', 'max', 'median', 'whiskerMin', 'whiskerMax'],
+                boxOptionsKeys.filter((c) => !c.endsWith('Color'))
+              ),
             },
           },
-          defaultStatsOptions
-        ),
+        },
       },
     ])
   );

src/controllers/boxplot.js

@@ -1,2 +1,2 @@
 export * from './boxplot';
-// export * from './violin';
+export * from './violin';