added scatter plot

Author: ignoreintuition

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",
+        metric: ["total", "forecast", "yoy"],
         data: sales,
         goal: 500,
         legends: {

src/import/bubbleChart.js

@@ -0,0 +1,143 @@
+/** 
+ *  @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[2]))
+      .on('mouseover', (d) => {
+        this.addTooltip(d, window.event);
+      })
+      .on('mouseout', (d) => {
+        this.removeTooltip(d);
+      })
+      .attr('cx', d => cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[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[2]))
+      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[0]))
+      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[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.min, this.max])
+      .range([this.displayHeight - cs.x.axisHeight, this.header]);
+    cs.x.scale = d3.scaleLinear()
+      .domain([this.min, this.max])
+      .range([0, this.width]);
+    cs.r.scale = d3.scaleLinear()
+      .domain([0, 2])
+      .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: {
         /**