Merge pull request #137 from ignoreintuition/issue-25-bubble

Issue 25 bubble

Author: ignoreintuition

README.md

@@ -92,6 +92,31 @@ export default {
   }
 }
 ```
+Bubble Charts require three metrics (v1, v2, and v3).  These should be passed as triplets
+
+```JavaScript
+export default {
+  name: 'example',
+  data () {
+    return {
+      chartData: {
+        chartType: "bubbleChart",
+        selector: "chart",
+        title: "Important Data",
+        width: 400,
+        height: 200,
+        triplet: ['count', 'pyCount', 'revenue']
+        data: [
+          {'count': 120,
+           'fruit': 'apples'}, 
+          {'count': 250,
+           'fruit': 'oranges'}
+        ]
+      }
+    }
+  }
+}
+```
 ### Overrides
 If you need to override any of the default values of the charts (pallette colors, ticks, margins, etc) you can pass an overrides object to you chartData.
 
@@ -131,6 +156,7 @@ chartData: {
 * scatterPlot: a graph in which the values of two variables are plotted along two axes, the pattern of the resulting points revealing any correlation present.
 * pieChart: a chart in which a circle is divided into slices to illustrate proportion
 * areaChart: a chart which displays graphically quantitative data
+* bubleChart: a bubble chart is a variation of a scatter chart in which the data points are replaced with bubbles, and an additional dimension of the data is represented in the size of the bubbles.
 
 ### Charts that support two or more metrics
 * barChart

package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-chart-plugin",
   "main": "./dist/module/v-chart-plugin.js",
-  "version": "0.2.15",
+  "version": "0.3.0",
   "description": "This plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into your applications.  Uses D3.js for charting.",
   "keywords": [
     "vue",

src/components/chartExample.vue

@@ -17,7 +17,7 @@
       <div class="col-6 col-md-8">
         <div class="row">
           <div class="col-12">
-            <v-chart v-bind:chartData="barChartData"></v-chart>
+            <v-chart v-bind:chartData="bubbleChartData"></v-chart>
           </div>
           <div class="col-12 col-lg-6">
             <v-chart v-bind:chartData="areaChartData"></v-chart>
@@ -75,15 +75,14 @@ export default {
           width: 50
         },                      
       },
-      barChartData: {
-        chartType: "barChart",
+      bubbleChartData: {
+        chartType: "bubbleChart",
         selector: "chart",
         title: "Bar Chart",
         subtitle: "Sales by month",
         width: 600,
         height: 500,
-        metric: ["total", "forecast"],
-        dim: "month",
+        triplet: ["total", "forecast", "yoy"],
         data: sales,
         goal: 500,
         legends: {

src/import/bubbleChart.js

@@ -0,0 +1,135 @@
+/** 
+ *  @fileOverview Line Graph component definition
+ *
+ *  @author       Brian Greig
+ *
+ *  @requires     NPM:d3:Vue
+ *  @requires     src/v-chart-plugin.js
+ */
+const d3 = Object.assign({},
+  require('d3-selection'),
+  require('d3-scale'),
+  require('d3-axis'),
+  require('d3-shape'));
+/**
+ * Builds a Line Graph.
+ * @module lineGraph
+ */
+
+const lineGraph = function chart(mode) {
+  /**
+   * The SVG that stores the chart
+   * @member svgContainer
+   */
+  const svgContainer = d3.select(`#${this.chartData.selector}`);
+  /**
+   * The configuration of the coordinate system
+   * @member cs
+   */
+  let cs = {
+    palette: {
+      pointFill: '#005792',
+      pointStroke: '#d1f4fa',
+    },
+    x: {
+      domain: [],
+      range: [],
+      axisHeight: 20,
+    },
+    y: {
+      axisWidth: 30,
+      ticks: 5,
+    },
+    r: {
+
+    }
+  };
+
+  /**
+   * Runs when a new element is added to the dataset
+   * @member enter
+   * @function
+   * @param {Object} points (svg element) 
+   */
+  const enter = (points) => {
+    points.enter()
+      .append('circle')
+      .attr('class', this.selector)
+      .attr('r', d =>  cs.r.scale(d.metric[0][this.triplet[2]]))
+      .attr('cx', d => cs.x.scale(d.metric[0][this.triplet[0]]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[0][this.triplet[1]]));
+    return points;
+  };
+  /**
+   * Runs when a value of an element in dataset is changed
+   * @member transition
+   * @function
+   * @param {Object} points (svg element) 
+   */
+  const transition = (points) => {
+    points.transition()
+      .attr('r', d => cs.r.scale(d.metric[0][this.triplet[2]]))
+      .attr('cx', d => cs.x.scale(d.metric[0][this.triplet[0]]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[0][this.triplet[1]]));
+    return points;
+  };
+
+  /**
+   * Runs when an element is removed from the dataset
+   * @member exit
+   * @function
+   * @param {Object} points (svg element)
+   */
+  const exit = (points) => {
+    points.exit().remove();
+    return points;
+  };
+
+  /**
+   * Builds the scales for the x and y axes
+   * @member buildScales
+   * @function
+   */
+  const buildScales = cs => {
+    cs.y.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v1, this.maxTriplet.v1])
+      .range([this.displayHeight - cs.x.axisHeight, this.header]);
+    cs.x.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v2, this.maxTriplet.v2])
+      .range([0, this.width]);
+    cs.r.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v3, this.maxTriplet.v3])
+      .range([0, 20]);
+  };
+  /**
+   * Draws the x and y axes on the svg
+   * @member drawAxis
+   * @function
+   */
+  const drawAxis = cs => {
+    cs.x.axis = d3.axisBottom().scale(cs.x.scale);
+    cs.x.xOffset = cs.y.axisWidth + 5;
+    cs.x.yOffset = this.displayHeight - cs.x.axisHeight;
+    cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
+    cs.y.xOffset = cs.y.axisWidth;
+    cs.y.yOffset = 0;
+    svgContainer.append('g').attr('class', 'axis').attr('transform', `translate(${cs.x.xOffset}, ${cs.x.yOffset})`)
+      .call(cs.x.axis);
+    svgContainer.append('g').attr('class', 'axis').attr('transform', `translate(${cs.y.xOffset},${cs.y.yOffset})`)
+      .call(cs.y.axis);
+  };
+  
+  const points = svgContainer.selectAll('circle').data(this.ds);
+
+  cs = this.setOverrides(cs, this.chartData.overrides);
+
+  buildScales(cs);
+  drawAxis(cs);
+  enter(points);
+  transition(points);
+  exit(points);
+
+  return cs;
+};
+
+export default lineGraph;

src/v-chart-plugin.js

@@ -13,6 +13,7 @@ import lineGraph from './import/lineGraph';
 import scatterPlot from './import/scatterPlot';
 import pieChart from './import/pieChart';
 import areaChart from './import/areaChart';
+import bubbleChart from './import/bubbleChart';
 
 const d3 = Object.assign({},
   require('d3-selection'));
@@ -189,6 +190,7 @@ const Chart = {
         ...((typeof pieChart !== 'undefined') && { pieChart }),
         ...((typeof areaChart !== 'undefined') && { areaChart }),
         ...((typeof lineGraph !== 'undefined') && { lineGraph }),
+        ...((typeof bubbleChart !== 'undefined') && { bubbleChart }),
       },
       computed: {
         /**
@@ -204,7 +206,7 @@ const Chart = {
           return ds.data.map((d) => {
             const td = { metric: [] };
             if (!ds.metric[0])
-              td.metric[0] = d;
+              td.metric[0] = d || 0;
             else {
               ds.metric.forEach(function(e, i){
                 td.metric[i] = d[e] || 0;
@@ -228,7 +230,16 @@ const Chart = {
          * @returns {array} Metrics 
          */
         metric() {
-          return (Array.isArray(this.chartData.metric)) ? this.chartData.metric : new Array(this.chartData.metric);
+          const metric = (Array.isArray(this.chartData.metric)) ? this.chartData.metric : new Array(this.chartData.metric);
+          return metric;
+        },
+        /**
+         * triplet getter function
+         * @memberOf Chart
+         * @returns {array} Metrics 
+         */
+        triplet() {
+          return this.chartData.triplet;
         },
         /**
          * Height getter function
@@ -262,19 +273,58 @@ const Chart = {
           });
           return max;
         },
+        /**
+         * Get the maxium value for triplet
+         * @memberOf Chart
+         * @returns {Array} Max values for triplet
+         */
+        maxTriplet() {
+          const max = {
+            v1: 0,
+            v2: 0,
+            v3: 0
+          };
+          this.ds.forEach(e => {
+            max.v1 = max.v1 > e.metric[0][this.triplet[0]] ? max.v1 : e.metric[0][this.triplet[0]];
+            max.v2 = max.v2 > e.metric[0][this.triplet[1]] ? max.v2 : e.metric[0][this.triplet[1]];
+            max.v3 = max.v3 > e.metric[0][this.triplet[2]] ? max.v3 : e.metric[0][this.triplet[2]];
+          });
+          return max;
+        },
         /**
          * Get the minimum value for dataset
          * @memberOf Chart
          * @returns {number} Min value for metric
          */
         min() {
-          let max = 0;
           var results = []; 
           this.ds.forEach(e => {
             results = results.concat([...e.metric]);
           });
           return Math.min(...results.map(o => o));
         },
+        /**
+         * Get the minimum value for triplet
+         * @memberOf Chart
+         * @returns {Array} Min values for triplet
+         */
+        minTriplet() {
+          var results = {
+            v1: [],
+            v2: [],
+            v3: []
+          };
+          this.ds.forEach(e => {
+            results.v1.push(e.metric[0][this.triplet[0]])
+            results.v2.push(e.metric[0][this.triplet[1]])
+            results.v3.push(e.metric[0][this.triplet[2]])
+          })
+          return {
+            v1: (Math.min(...results.v1.map(o => o))),
+            v2: (Math.min(...results.v2.map(o => o))),
+            v3: (Math.min(...results.v3.map(o => o)))
+          };
+        },
         /**
          * Gets the height of the dispaly area
          * @memberOf Chart