Plottable Test - clustered clusters

by Emma Bishop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div id="app">
  <svg id="chart" width="400"></svg>
</div>

CSS

#app{
  padding: 50px;
}
#canvas{
  height: 200px; !important
}

JavaScript

var vm = new Vue({
	el: '#app',
  data: {
		data_2017: [{
    	x: '6th Grade',
      y: 12
    }, {
    	x: '7th Grade',
      y: 10
    }, {
    	x: '8th Grade',
      y: 6
    }],
    data_2018: [{
    	x: '6th Grade',
      y: 13
    }, {
    	x: '7th Grade',
      y: 12
    }, {
    	x: '8th Grade',
      y: 8
    }]
  },
  mounted: function () {
  	this.$nextTick(function () {
    	this.buildChart();
    });
  },
  methods: {
    buildChart: function () {
    	var xScale = new Plottable.Scales.Category();
      var yScale = new Plottable.Scales.Linear();
      var xAxis = new Plottable.Axes.Category(xScale, 'bottom');
      var yAxis = new Plottable.Axes.Numeric(yScale, 'left');
      var data_1 = new Plottable.Dataset(this.data_2017);
      var plot = new Plottable.Plots.ClusteredBar();
      plot.addDataset(new Plottable.Dataset(this.data_2017))
      	.x(function x(d) { return d.x; }, xScale)
      	.y(function y(d) { return d.y; }, yScale);
      plot.addDataset(new Plottable.Dataset(this.data_2018))
      	.x(function x(d) { return d.x; }, xScale)
        .y(function y(d) { return d.y; }, yScale);
        
      var chart = new Plottable.Components.Table([
      	[yAxis, plot],
        [null, xAxis]
      ]);
      chart.renderTo('#chart')
      
      //
      // tooltips
      //
      var tooltipAnchorSelection = plot.foreground().append("circle").attr({'r': 3, 'opacity': 0, 'id': 'tooltip-anchor'});
			var tooltipAnchor = $(tooltipAnchorSelection.node())
      tooltipAnchor.tooltip({
        animation: false,
        container: "body",
        placement: "auto",
        title: "text",
        trigger: "manual",
        placement: 'top'
      });
      var pointer = new Plottable.Interactions.Pointer();
      pointer.onPointerMove(function(p) {
        var closest = plot.entityNearest(p);
        if (closest) {
          tooltipAnchor.attr({
            cx: closest.position.x,
            cy: closest.position.y,
            "data-original-title":...