SGH / COMPONENTS

Commit e09a3d19913453852da6f0e19b43a3fbc543f132

Authored by mwasiluk
1 parent 8da3a62a

charts-d3 update, scatterplot datalet category

Inline Side-by-side
Showing 8 changed files with 62 additions and 20 deletions
bower_components/charts-d3/dist/charts-d3.css
  View file @e09a3d1
... ... @@ -33,7 +33,8 @@ svg.mw-d3-scatterplot-matrix {
33 33 background: #fdfdfd;
34 34 padding: 3px 5px;
35 35 border-radius: 8px;
36   - box-shadow: 1px 3px 3px #b7b7b7; }
  36 + box-shadow: 1px 3px 3px #b7b7b7;
  37 + text-align: center; }
37 38  
38 39 svg.mw-d3-scatterplot {
39 40 background-color: white;
... ... @@ -47,5 +48,4 @@ svg.mw-d3-scatterplot {
47 48 shape-rendering: crispEdges;
48 49 stroke: #eaeaea; }
49 50 svg.mw-d3-scatterplot .mw-axis.mw-no-guides line {
50   - display: none;
51   - stroke: #a6a6a6; }
  51 + stroke: #a1a1a1; }
... ...
bower_components/charts-d3/dist/charts-d3.js
  View file @e09a3d1
1 1 function D3ScatterPlotMatrix(placeholderSelector, data, config) {
  2 + var self = this;
2 3 this.utils = new ChartsD3Utils();
3 4 this.placeholderSelector = placeholderSelector;
4 5 this.svg = null;
... ... @@ -38,7 +39,9 @@ function D3ScatterPlotMatrix(placeholderSelector, data, config) {
38 39 },
39 40 groups:{
40 41 key: undefined, //object property name or array index with grouping variable
41   - includeInPlot: false //include group as variable in plot, boolean (default: false)
  42 + includeInPlot: false, //include group as variable in plot, boolean (default: false)
  43 + value: function(d) { return d[self.config.groups.key] }, // grouping value accessor,
  44 + label: ""
42 45 }
43 46  
44 47 };
... ... @@ -284,8 +287,21 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
284 287 plot.tooltip.transition()
285 288 .duration(200)
286 289 .style("opacity", .9);
287   - plot.tooltip.html("(" + plot.x.value(d, subplot.x)
288   - + ", " +plot.y.value(d, subplot.y) + ")")
  290 + var html = "(" + plot.x.value(d, subplot.x) + ", " +plot.y.value(d, subplot.y) + ")";
  291 + plot.tooltip.html(html)
  292 + .style("left", (d3.event.pageX + 5) + "px")
  293 + .style("top", (d3.event.pageY - 28) + "px");
  294 +
  295 + var group = self.config.groups.value(d);
  296 + if(group || group===0 ){
  297 + html+="<br/>";
  298 + var label = self.config.groups.label;
  299 + if(label){
  300 + html+=label+": ";
  301 + }
  302 + html+=group
  303 + }
  304 + plot.tooltip.html(html)
289 305 .style("left", (d3.event.pageX + 5) + "px")
290 306 .style("top", (d3.event.pageY - 28) + "px");
291 307 })
... ... @@ -397,9 +413,11 @@ D3ScatterPlotMatrix.prototype.drawBrush = function (cell) {
397 413  
398 414  
399 415 function D3ScatterPlot(placeholderSelector, data, config){
  416 + var self = this;
400 417 this.utils = new ChartsD3Utils();
401 418 this.placeholderSelector = placeholderSelector;
402 419 this.svg=null;
  420 + this.config = undefined;
403 421 this.defaultConfig = {
404 422 width: 0,
405 423 height: 0,
... ... @@ -413,21 +431,29 @@ function D3ScatterPlot(placeholderSelector, data, config){
413 431 },
414 432 x:{// X axis config
415 433 label: 'X', // axis label
416   - value: function(d) { return d[0] }, // x value accessor
  434 + key: 0,
  435 + value: function(d) { return d[self.config.x.key] }, // x value accessor
417 436 orient: "bottom",
418 437 scale: "linear"
419 438 },
420 439 y:{// Y axis config
421   - label: 'Y', // axis label
422   - value: function(d) { return d[1] }, // y value accessor
  440 + label: 'Y', // axis label,
  441 + key: 1,
  442 + value: function(d) { return d[self.config.y.key] }, // y value accessor
423 443 orient: "left",
424 444 scale: "linear"
425 445 },
  446 + groups:{
  447 + key: 2,
  448 + value: function(d) { return d[self.config.groups.key] }, // grouping value accessor,
  449 + label: ""
  450 + },
426 451 dot:{
427 452 radius: 2,
428   - color: 'black', // string or function returning color's value for color scale
  453 + color: function(d) { return self.config.groups.value(d) }, // string or function returning color's value for color scale
429 454 d3ColorCategory: 'category10'
430 455 }
  456 +
431 457 };
432 458  
433 459 if(data){
... ... @@ -496,6 +522,9 @@ D3ScatterPlot.prototype.initPlot = function (){
496 522 }
497 523  
498 524  
  525 + }else{
  526 +
  527 +
499 528 }
500 529  
501 530 return this;
... ... @@ -608,8 +637,17 @@ D3ScatterPlot.prototype.update = function (){
608 637 plot.tooltip.transition()
609 638 .duration(200)
610 639 .style("opacity", .9);
611   - plot.tooltip.html("(" + plot.x.value(d)
612   - + ", " +plot.y.value(d) + ")")
  640 + var html = "(" + plot.x.value(d) + ", " +plot.y.value(d) + ")";
  641 + var group = self.config.groups.value(d);
  642 + if(group || group===0 ){
  643 + html+="<br/>";
  644 + var label = self.config.groups.label;
  645 + if(label){
  646 + html+=label+": ";
  647 + }
  648 + html+=group
  649 + }
  650 + plot.tooltip.html(html)
613 651 .style("left", (d3.event.pageX + 5) + "px")
614 652 .style("top", (d3.event.pageY - 28) + "px");
615 653 })
... ... @@ -623,6 +661,7 @@ D3ScatterPlot.prototype.update = function (){
623 661 if(plot.dot.color){
624 662 dots.style("fill", plot.dot.color)
625 663 }
  664 +
626 665 dots.exit().remove();
627 666  
628 667 };
... ...
bower_components/charts-d3/dist/charts-d3.min.css
  View file @e09a3d1
1   -svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7}
2   -svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}svg.mw-d3-scatterplot .mw-axis line{shape-rendering:crispEdges;stroke:#eaeaea}svg.mw-d3-scatterplot .mw-axis.mw-no-guides line{display:none;stroke:#a6a6a6}
3 1 \ No newline at end of file
  2 +svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7;text-align:center}
  3 +svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}svg.mw-d3-scatterplot .mw-axis line{shape-rendering:crispEdges;stroke:#eaeaea}svg.mw-d3-scatterplot .mw-axis.mw-no-guides line{stroke:#a1a1a1}
4 4 \ No newline at end of file
... ...
bower_components/charts-d3/dist/charts-d3.min.js
  View file @e09a3d1
1   -function D3ScatterPlotMatrix(t,e,i){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:void 0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:void 0,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},variables:{labels:[],keys:[],value:function(t,e){return t[e]}},groups:{key:void 0,includeInPlot:!1}},this.setConfig(i||{}),e&&this.setData(e),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,e=this.config.margin,i=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupVariables(),this.plot.size=i.size;var a=i.width,o=d3.select(this.placeholderSelector).node();if(!a){var l=e.left+e.right+this.plot.variables.length*this.plot.size;a=Math.min(o.getBoundingClientRect().width,l)}var s=a;s||(s=o.getBoundingClientRect().height),this.plot.width=a-e.left-e.right,this.plot.height=s-e.top-e.bottom,void 0===i.ticks&&(i.ticks=this.plot.size/40),this.setupX(),this.setupY(),i.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[i.dot.d3ColorCategory]());var r=i.dot.color;return r?(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})):i.groups.key&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(e[i.groups.key])}),this},D3ScatterPlotMatrix.prototype.setupVariables=function(){var t=this.config.variables,e=this.data,i=this.plot;i.domainByVariable={},i.variables=t.keys,i.variables&&i.variables.length||(i.variables=this.utils.inferVariables(e,this.config.groups.key,this.config.includeInPlot)),i.labels=[],i.labelByVariable={},i.variables.forEach(function(a,o){i.domainByVariable[a]=d3.extent(e,function(e){return t.value(e,a)});var l=a;t.labels&&t.labels.length>o&&(l=t.labels[o]),i.labels.push(l),i.labelByVariable[a]=l}),void 0,i.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,e=t.x,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.x.scale]().range([i.padding/2,t.size-i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.x.orient).ticks(i.ticks),e.axis.tickSize(t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,e=t.y,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.y.scale]().range([t.size-i.padding/2,i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.y.orient).ticks(i.ticks),e.axis.tickSize(-t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var i=e.plot;i.subplots.push(t);var o=d3.select(this);i.x.scale.domain(i.domainByVariable[t.x]),i.y.scale.domain(i.domainByVariable[t.y]),o.append("rect").attr("class","mw-frame").attr("x",a.padding/2).attr("y",a.padding/2).attr("width",a.size-a.padding).attr("height",a.size-a.padding),t.update=function(){var t=this,a=o.selectAll("circle").data(e.data);a.enter().append("circle"),a.attr("cx",function(e){return i.x.map(e,t.x)}).attr("cy",function(e){return i.y.map(e,t.y)}).attr("r",e.config.dot.radius),i.dot.color&&a.style("fill",i.dot.color),i.tooltip&&a.on("mouseover",function(e){i.tooltip.transition().duration(200).style("opacity",.9),i.tooltip.html("("+i.x.value(e,t.x)+", "+i.y.value(e,t.y)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){i.tooltip.transition().duration(500).style("opacity",0)}),a.exit().remove()},t.update()}var e=this,i=e.plot.variables.length,a=this.config;e.svgG.selectAll(".mw-axis-x.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-x mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate("+(i-a-1)*e.plot.size+",0)"}).each(function(t){e.plot.x.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.x.axis)}),e.svgG.selectAll(".mw-axis-y.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-y mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,i){return"translate(0,"+i*e.plot.size+")"}).each(function(t){e.plot.y.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.y.axis)}),a.tooltip&&(e.plot.tooltip=this.utils.selectOrAppend(d3.select(e.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=e.svgG.selectAll(".mw-cell").data(e.utils.cross(e.plot.variables,e.plot.variables)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(i-t.i-1)*e.plot.size+","+t.j*e.plot.size+")"});a.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",a.padding).attr("y",a.padding).attr("dy",".71em").text(function(t){return e.plot.labelByVariable[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,e=this.config,i=t.plot.width+e.margin.left+e.margin.right,a=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",i).attr("height",a).attr("viewBox","0 0 "+i+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function e(t){s!==this&&(d3.select(s).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByVariable[t.x]),o.plot.y.scale.domain(o.plot.domainByVariable[t.y]),s=this)}function i(t){var e=l.extent();o.svgG.selectAll("circle").classed("hidden",function(i){return e[0][0]>i[t.x]||i[t.x]>e[1][0]||e[0][1]>i[t.y]||i[t.y]>e[1][1]})}function a(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",e).on("brush",i).on("brushend",a);t.append("g").call(l);var s};
2   -function D3ScatterPlot(t,e,o){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,height:0,guides:!1,tooltip:!0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",value:function(t){return t[0]},orient:"bottom",scale:"linear"},y:{label:"Y",value:function(t){return t[1]},orient:"left",scale:"linear"},dot:{radius:2,color:"black",d3ColorCategory:"category10"}},e&&this.setData(e),o&&this.setConfig(o),this.init()}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,e=this.config.margin,o=this.config;this.plot={x:{},y:{},dot:{color:null}};var i=o.width,a=d3.select(this.placeholderSelector).node();i||(i=a.getBoundingClientRect().width);var l=o.height;l||(l=a.getBoundingClientRect().height),this.plot.width=i-e.left-e.right,this.plot.height=l-e.top-e.bottom,this.setupX(),this.setupY(),o.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[o.dot.d3ColorCategory]());var r=o.dot.color;return r&&(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,e=t.x,o=this.config.x;e.value=o.value,e.scale=d3.scale[o.scale]().range([0,t.width]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var i=this.data;t.x.scale.domain([d3.min(i,t.x.value)-1,d3.max(i,t.x.value)+1]),this.config.guides&&e.axis.tickSize(-t.height)},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,e=t.y,o=this.config.y;e.value=o.value,e.scale=d3.scale[o.scale]().range([t.height,0]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient),this.config.guides&&e.axis.tickSize(-t.width);var i=this.data;t.y.scale.domain([d3.min(i,t.y.value)-1,d3.max(i,t.y.value)+1])},D3ScatterPlot.prototype.draw=function(){this.drawAxisX(),this.drawAxisY(),this.update()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,e=t.plot,o=this.config.x;t.svgG.append("g").attr("class","mw-axis-x mw-axis"+(t.config.guides?"":" mw-no-guides")).attr("transform","translate(0,"+e.height+")").call(e.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+e.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,e=t.plot,o=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y"+(t.config.guides?"":" mw-no-guides")).call(e.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+e.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.update=function(){var t=this,e=t.plot,o=this.data,i=t.svgG.selectAll(".mw-dot").data(o);i.enter().append("circle").attr("class","mw-dot"),i.attr("r",t.config.dot.radius).attr("cx",e.x.map).attr("cy",e.y.map),e.tooltip&&i.on("mouseover",function(t){e.tooltip.transition().duration(200).style("opacity",.9),e.tooltip.html("("+e.x.value(t)+", "+e.y.value(t)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),e.dot.color&&i.style("fill",e.dot.color),i.exit().remove()},D3ScatterPlot.prototype.initSvg=function(){var t=this,e=this.config,o=t.plot.width+e.margin.left+e.margin.right,i=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",o).attr("height",i).attr("viewBox","0 0 "+o+" "+i).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.tooltip&&(t.plot.tooltip=this.utils.selectOrAppend(d3.select(t.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0)),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.draw()};
  1 +function D3ScatterPlotMatrix(t,e,a){var i=this;this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:void 0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:void 0,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},variables:{labels:[],keys:[],value:function(t,e){return t[e]}},groups:{key:void 0,includeInPlot:!1,value:function(t){return t[i.config.groups.key]},label:""}},this.setConfig(a||{}),e&&this.setData(e),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,e=this.config.margin,a=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupVariables(),this.plot.size=a.size;var i=a.width,o=d3.select(this.placeholderSelector).node();if(!i){var l=e.left+e.right+this.plot.variables.length*this.plot.size;i=Math.min(o.getBoundingClientRect().width,l)}var s=i;s||(s=o.getBoundingClientRect().height),this.plot.width=i-e.left-e.right,this.plot.height=s-e.top-e.bottom,void 0===a.ticks&&(a.ticks=this.plot.size/40),this.setupX(),this.setupY(),a.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[a.dot.d3ColorCategory]());var r=a.dot.color;return r?(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})):a.groups.key&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(e[a.groups.key])}),this},D3ScatterPlotMatrix.prototype.setupVariables=function(){var t=this.config.variables,e=this.data,a=this.plot;a.domainByVariable={},a.variables=t.keys,a.variables&&a.variables.length||(a.variables=this.utils.inferVariables(e,this.config.groups.key,this.config.includeInPlot)),a.labels=[],a.labelByVariable={},a.variables.forEach(function(i,o){a.domainByVariable[i]=d3.extent(e,function(e){return t.value(e,i)});var l=i;t.labels&&t.labels.length>o&&(l=t.labels[o]),a.labels.push(l),a.labelByVariable[i]=l}),void 0,a.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,e=t.x,a=this.config;e.value=a.variables.value,e.scale=d3.scale[a.x.scale]().range([a.padding/2,t.size-a.padding/2]),e.map=function(t,a){return e.scale(e.value(t,a))},e.axis=d3.svg.axis().scale(e.scale).orient(a.x.orient).ticks(a.ticks),e.axis.tickSize(t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,e=t.y,a=this.config;e.value=a.variables.value,e.scale=d3.scale[a.y.scale]().range([t.size-a.padding/2,a.padding/2]),e.map=function(t,a){return e.scale(e.value(t,a))},e.axis=d3.svg.axis().scale(e.scale).orient(a.y.orient).ticks(a.ticks),e.axis.tickSize(-t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var a=e.plot;a.subplots.push(t);var o=d3.select(this);a.x.scale.domain(a.domainByVariable[t.x]),a.y.scale.domain(a.domainByVariable[t.y]),o.append("rect").attr("class","mw-frame").attr("x",i.padding/2).attr("y",i.padding/2).attr("width",i.size-i.padding).attr("height",i.size-i.padding),t.update=function(){var t=this,i=o.selectAll("circle").data(e.data);i.enter().append("circle"),i.attr("cx",function(e){return a.x.map(e,t.x)}).attr("cy",function(e){return a.y.map(e,t.y)}).attr("r",e.config.dot.radius),a.dot.color&&i.style("fill",a.dot.color),a.tooltip&&i.on("mouseover",function(i){a.tooltip.transition().duration(200).style("opacity",.9);var o="("+a.x.value(i,t.x)+", "+a.y.value(i,t.y)+")";a.tooltip.html(o).style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px");var l=e.config.groups.value(i);if(l||0===l){o+="<br/>";var s=e.config.groups.label;s&&(o+=s+": "),o+=l}a.tooltip.html(o).style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){a.tooltip.transition().duration(500).style("opacity",0)}),i.exit().remove()},t.update()}var e=this,a=e.plot.variables.length,i=this.config;e.svgG.selectAll(".mw-axis-x.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-x mw-axis"+(i.guides?"":" mw-no-guides")).attr("transform",function(t,i){return"translate("+(a-i-1)*e.plot.size+",0)"}).each(function(t){e.plot.x.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.x.axis)}),e.svgG.selectAll(".mw-axis-y.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-y mw-axis"+(i.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate(0,"+a*e.plot.size+")"}).each(function(t){e.plot.y.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.y.axis)}),i.tooltip&&(e.plot.tooltip=this.utils.selectOrAppend(d3.select(e.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=e.svgG.selectAll(".mw-cell").data(e.utils.cross(e.plot.variables,e.plot.variables)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(a-t.i-1)*e.plot.size+","+t.j*e.plot.size+")"});i.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",i.padding).attr("y",i.padding).attr("dy",".71em").text(function(t){return e.plot.labelByVariable[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,e=this.config,a=t.plot.width+e.margin.left+e.margin.right,i=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",a).attr("height",i).attr("viewBox","0 0 "+a+" "+i).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function e(t){s!==this&&(d3.select(s).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByVariable[t.x]),o.plot.y.scale.domain(o.plot.domainByVariable[t.y]),s=this)}function a(t){var e=l.extent();o.svgG.selectAll("circle").classed("hidden",function(a){return e[0][0]>a[t.x]||a[t.x]>e[1][0]||e[0][1]>a[t.y]||a[t.y]>e[1][1]})}function i(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",e).on("brush",a).on("brushend",i);t.append("g").call(l);var s};
  2 +function D3ScatterPlot(t,e,o){var i=this;this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.config=void 0,this.defaultConfig={width:0,height:0,guides:!1,tooltip:!0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",key:0,value:function(t){return t[i.config.x.key]},orient:"bottom",scale:"linear"},y:{label:"Y",key:1,value:function(t){return t[i.config.y.key]},orient:"left",scale:"linear"},groups:{key:2,value:function(t){return t[i.config.groups.key]},label:""},dot:{radius:2,color:function(t){return i.config.groups.value(t)},d3ColorCategory:"category10"}},e&&this.setData(e),o&&this.setConfig(o),this.init()}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,e=this.config.margin,o=this.config;this.plot={x:{},y:{},dot:{color:null}};var i=o.width,a=d3.select(this.placeholderSelector).node();i||(i=a.getBoundingClientRect().width);var l=o.height;l||(l=a.getBoundingClientRect().height),this.plot.width=i-e.left-e.right,this.plot.height=l-e.top-e.bottom,this.setupX(),this.setupY(),o.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[o.dot.d3ColorCategory]());var r=o.dot.color;return r&&(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,e=t.x,o=this.config.x;e.value=o.value,e.scale=d3.scale[o.scale]().range([0,t.width]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var i=this.data;t.x.scale.domain([d3.min(i,t.x.value)-1,d3.max(i,t.x.value)+1]),this.config.guides&&e.axis.tickSize(-t.height)},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,e=t.y,o=this.config.y;e.value=o.value,e.scale=d3.scale[o.scale]().range([t.height,0]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient),this.config.guides&&e.axis.tickSize(-t.width);var i=this.data;t.y.scale.domain([d3.min(i,t.y.value)-1,d3.max(i,t.y.value)+1])},D3ScatterPlot.prototype.draw=function(){this.drawAxisX(),this.drawAxisY(),this.update()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,e=t.plot,o=this.config.x;t.svgG.append("g").attr("class","mw-axis-x mw-axis"+(t.config.guides?"":" mw-no-guides")).attr("transform","translate(0,"+e.height+")").call(e.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+e.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,e=t.plot,o=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y"+(t.config.guides?"":" mw-no-guides")).call(e.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+e.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.update=function(){var t=this,e=t.plot,o=this.data,i=t.svgG.selectAll(".mw-dot").data(o);i.enter().append("circle").attr("class","mw-dot"),i.attr("r",t.config.dot.radius).attr("cx",e.x.map).attr("cy",e.y.map),e.tooltip&&i.on("mouseover",function(o){e.tooltip.transition().duration(200).style("opacity",.9);var i="("+e.x.value(o)+", "+e.y.value(o)+")",a=t.config.groups.value(o);if(a||0===a){i+="<br/>";var l=t.config.groups.label;l&&(i+=l+": "),i+=a}e.tooltip.html(i).style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),e.dot.color&&i.style("fill",e.dot.color),i.exit().remove()},D3ScatterPlot.prototype.initSvg=function(){var t=this,e=this.config,o=t.plot.width+e.margin.left+e.margin.right,i=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",o).attr("height",i).attr("viewBox","0 0 "+o+" "+i).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.tooltip&&(t.plot.tooltip=this.utils.selectOrAppend(d3.select(t.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0)),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.draw()};
3 3 function ChartsD3Utils(){}ChartsD3Utils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var n=arguments[e];if(n)for(var i in n)if(n.hasOwnProperty(i)){var o=Array.isArray(t[i]),s=r.isObject(t[i]),a=r.isObject(n[i]);s&&!o&&a?r.deepExtend(t[i],n[i]):t[i]=n[i]}}return t},ChartsD3Utils.prototype.cross=function(t,r){var e,n,i=[],o=t.length,s=r.length;for(e=-1;++e<o;)for(n=-1;++n<s;)i.push({x:t[e],i:e,y:r[n],j:n});return i},ChartsD3Utils.prototype.inferVariables=function(t,r,e){var n=[];if(t.length){var i=t[0];if(i instanceof Array)n=i.map(function(t,r){return r});else if("object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&n.push(o)}if(!e){var s=n.indexOf(r);s>-1&&n.splice(s,1)}return n},ChartsD3Utils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},ChartsD3Utils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},ChartsD3Utils.prototype.isFunction=function(t){return"function"==typeof t},ChartsD3Utils.prototype.selectOrAppend=function(t,r,e){var n=t.select(r);return n.empty()?t.append(e||r):n};
4 4 \ No newline at end of file
... ...
datalets/scatterplot-datalet/demo/index.html
  View file @e09a3d1
... ... @@ -15,7 +15,7 @@
15 15  
16 16 <div style="height: 600px">
17 17 <scatterplot-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
18   - fields='["result,records,pop_residente","result,records,superficie_kmq"]'></scatterplot-datalet>
  18 + fields='["result,records,pop_residente","result,records,superficie_kmq", "result,records,regione"]'></scatterplot-datalet>
19 19 </div>
20 20  
21 21  
... ...
datalets/scatterplot-datalet/scatterplot-datalet.html
  View file @e09a3d1
... ... @@ -22,11 +22,14 @@
22 22  
23 23 var ScatterplotBehavior = {
24 24 presentData: function () {
25   -
  25 + console.log(this.data);
26 26 var self =this;
27 27 var data = [];
28 28 for (var j = 0; j < this.data[0]["data"].length; j++) {
29 29 point = [this.data[0].data[j], this.data[1].data[j]];
  30 + if(this.data.length == 3){
  31 + point.push(this.data[2].data[j])
  32 + }
30 33 data.push(point);
31 34 }
32 35  
... ... @@ -44,6 +47,7 @@
44 47 dot: {
45 48 // color: 'red'
46 49 }
  50 +
47 51 };
48 52  
49 53 var plot = new D3ScatterPlot("#scatterplot-placeholder", data, conf);
... ...
datalets/scatterplot-matrix-datalet/demo/index.html
  View file @e09a3d1
... ... @@ -15,7 +15,7 @@
15 15  
16 16 <div style="width:auto;">
17 17 <scatterplot-matrix-datalet category-key="regione" cell-size="250" data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
18   - fields='["result,records,regione","result,records,pop_residente","result,records,superficie_kmq","result,records,dens_demografica"]'></scatterplot-matrix-datalet>
  18 + fields='"result,records,pop_residente","result,records,superficie_kmq","result,records,dens_demografica"]'></scatterplot-matrix-datalet>
19 19 </div>
20 20  
21 21  
... ...
datalets/scatterplot-matrix-datalet/scatterplot-matrix-datalet.html
  View file @e09a3d1
... ... @@ -29,7 +29,6 @@
29 29  
30 30  
31 31 var data = [];
32   - var traits=[];
33 32 for (var i = 0; i < this.data[0]["data"].length; i++) {
34 33 var d ={};
35 34  
... ...