dimple interactive multiple series

Multiple series dimple chart pies and lines with interactive legend

HTML

<div id="chartContainer">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script type='text/javascript'>
  !function(a,b){"use strict";if("object"==typeof exports)module.exports=b(require("d3"));else if("function"==typeof define&&define.amd)define(["d3"],function(c){return a.dimple=b(c),a.dimple});else if(a.d3)a.dimple=b(a.d3);else{if(!console||!console.warn)throw"dimple requires d3 to run.  Are you missing a reference to the d3 library?";console.warn("dimple requires d3 to run.  Are you missing a reference to the d3 library?")}}(this,function(a){"use strict";var b={version:"2.1.6",plot:{},aggregateMethod:{}};return b.axis=function(c,d,e,f,g,h){this.chart=c,this.position=d,this.categoryFields=null===g||void 0===g?e:[].concat(g),this.measure=f,this.timeField=g,this.floatingBarWidth=5,this.hidden=!1,this.showPercent=!1,this.colors=null,this.overrideMin=null,this.overrideMax=null,this.shapes=null,this.showGridlines=null,this.gridlineShapes=null,this.titleShape=null,this.dateParseFormat=null,this.tickFormat=null,this.timePeriod=null,this.timeInterval=1,this.useLog=!1,this.logBase=10,this.title=void 0,this.clamp=!0,this.ticks=null,this.fontSize="10px",this.fontFamily="sans-serif",this.autoRotateLabel=null===h||void 0===h?!0:h,this._slaves=[],this._scale=null,this._min=0,this._max=0,this._previousOrigin=null,this._origin=null,this._orderRules=[],this._groupOrderRules=[],this._draw=null,this._getAxisData=function(){var a,b,c=[],d=!1;if(this.chart&&this.chart.series){for(a=0;a<this.chart.series.length;a+=1)b=this.chart.series[a],b[this.position]===this&&(b.data&&b.data.length>0?c=c.concat(b.data):d=!0);d&&this.chart.data&&(c=c.concat(this.chart.data))}return c},this._getFontSize=function(){var a;return a=this.fontSize&&"auto"!==this.fontSize.toString().toLowerCase()?isNaN(this.fontSize)?this.fontSize:this.fontSize+"px":(this.chart._heightPixels()/35>10?this.chart._heightPixels()/35:10)+"px"},this._getFormat=function(){var b,c,d,e,f,g,h;return...

JavaScript

var svg = dimple.newSvg("#chartContainer", 700, 500);
 var mainSlicer = "classification";
 var pies;
 var lines;

//data here look for ------END OF DATA --------
 var data =[
 {
   "classification": "Undergraduate",
   "residency": "Resident",
   "year": 2006,
   "head count": 14011
 }, {
   "classification": "Undergraduate",
   "residency": "Domestic",
   "year": 2006,
   "head count": 6347
 }, {
   "classification": "Undergraduate",
   "residency": "International",
   "year": 2006,
   "head count": 380
 }, {
   "classification": "Graduate",
   "residency": "Resident",
   "year": 2006,
   "head count": 2693
 }, {
   "classification": "Graduate",
   "residency": "Domestic",
   "year": 2006,
   "head count": 2075
 }, {
   "classification": "Graduate",
   "residency": "International",
   "year": 2006,
   "head count": 1309
 }, {
   "classification": "Professional",
   "residency": "Resident",
   "year": 2006,
   "head count": 1374
 }, {
   "classification": "Professional",
   "residency": "Domestic",
   "year": 2006,
   "head count": 612
 }, {
   "classification": "Professional",
   "residency": "International",
   "year": 2006,
   "head count": 14
 }, {
   "classification": "Postgraduate",
   "residency": "Resident",
   "year": 2006,
   "head count": 825
 }, {
   "classification": "Postgraduate",
   "residency": "Domestic",
   "year": 2006,
   "head count": 38
 }, {
   "classification": "Postgraduate",
   "residency": "International",
   "year": 2006,
   "head count": 301
 }, {
   "classification": "Undergraduate",
   "residency": "Resident",
   "year": 2007,
   "head count": 13808
 }, {
   "classification": "Undergraduate",
   "residency": "Domestic",
   "year": 2007,
   "head count": 6695
 }, {
   "classification": "Undergraduate",
   "residency": "International",
   "year": 2007,
   "head count": 404
 }, {
   "classification": "Graduate",
   "residency": "Resident",
   "year": 2007,
   "head count": 2848
 }, {
   "classification": "Graduate",
   "residency":...