<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dc.css"/>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="crossfilter.js"></script>
<script src="dc.js"></script>
<script src="gdca.js"></script>
<script src="script.js"></script>
</head>
<body>
A Pareto Chart, on Cylinders in Cars.csv
<div id="chart1">
<a class="reset" href="javascript:theCompositeChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
</div>
</body>
</html>
var col = "MPG"; // many bars/points
var col = "Cylinders"; // few
d3.csv("cars.csv", function(data) {
//console.log(JSON.stringify(data));
var numFormat = d3.format(".0f");
data.forEach(function(d) {
d[col] = numFormat(+d[col]);
});
gdca.cf = crossfilter(data);
var xdim = gdca.cf.dimension(function(d) {
return +d[col];
});
var xgrp = xdim.group();
gdca.pareto.domain(xgrp);
var theCompositeChart = dc.compositeChart("#chart1");
var theBarChart = dc.barChart(theCompositeChart);
theBarChart
.dimension(xdim)
.centerBar(true)
.group(gdca.pareto.createTempOrderingGroup(), "# Samples");
theCompositeChart
.width(400)
.height(400)
.x(d3.scale.ordinal().domain(gdca.pareto.getDomain()))
.xUnits(dc.units.ordinal)
.compose([theBarChart,
dc.lineChart(theCompositeChart)
.dimension(xdim)
.colors('red')
.useRightYAxis(true)
.group(gdca.pareto.createTempOrderingGroupReversed(), "Cumulative %")
.renderDataPoints({
radius: 15,
fillOpacity: 0.5,
strokeOpacity: 0.8
})
])
.render();
theCompositeChart
.rightYAxis().tickValues([0, 25, 50, 75, 100]);
theCompositeChart
.renderlet(function(c) {
c.selectAll("g.x text").attr('dx', '-15');
});
});
gdca = (function(){
'use strict';
var gdca = {
cf : null
};
gdca.pareto = (function() {
var pareto = {
dom: [],
topI: []
};
return {
getDomain: function() {
return pareto.dom; // could pluck the key, but the work was already done
},
domain: function(grp) {
var all = gdca.cf.groupAll();
var sum = 0;
// .all() is faster than .top(Infinity)
pareto.topI = grp.top(Infinity);
pareto.dom = [];
pareto.topI.forEach(function(d) {
pareto.dom[pareto.dom.length] = d.key;
sum = sum + d.value;
d.sum = sum;
d.pp = 100*sum/all.value();
});
},
createTempOrderingGroupReversed: function() {
var grp = {
all: function() {
var g = [];
pareto.topI.forEach(function(d,i) {
g.push({key:d.key, value:d.pp});
});
return g;
}
};
return grp;
},
createTempOrderingGroup: function() {
var grp = {
all: function() {
var g = [];
pareto.topI.forEach(function(d,i) {
g.push({key:d.key, value:d.value});
});
return g;
}
};
return grp;
}
};
return gdca.pareto; })();
return gdca; })();
div.dc-chart {
float: left;
}
.dc-chart rect.bar {
stroke: none;
cursor: pointer;
}
.dc-chart rect.bar:hover {
fill-opacity: .5;
}
.dc-chart rect.stack1 {
stroke: none;
fill: red;
}
.dc-chart rect.stack2 {
stroke: none;
fill: green;
}
.dc-chart rect.deselected {
stroke: none;
fill: #ccc;
}
.dc-chart .pie-slice {
fill: white;
font-size: 12px;
cursor: pointer;
}
.dc-chart .pie-slice.external{
fill: black;
}
.dc-chart .pie-slice :hover {
fill-opacity: .8;
}
.dc-chart .pie-slice.highlight {
fill-opacity: .8;
}
.dc-chart .selected path {
stroke-width: 3;
stroke: #ccc;
fill-opacity: 1;
}
.dc-chart .deselected path {
stroke: none;
fill-opacity: .5;
fill: #ccc;
}
.dc-chart .axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dc-chart .axis text {
font: 10px sans-serif;
}
.dc-chart .grid-line {
fill: none;
stroke: #ccc;
opacity: .5;
shape-rendering: crispEdges;
}
.dc-chart .grid-line line {
fill: none;
stroke: #ccc;
opacity: .5;
shape-rendering: crispEdges;
}
.dc-chart .brush rect.background {
z-index: -999;
}
.dc-chart .brush rect.extent {
fill: steelblue;
fill-opacity: .125;
}
.dc-chart .brush .resize path {
fill: #eee;
stroke: #666;
}
.dc-chart path.line {
fill: none;
stroke-width: 1.5px;
}
.dc-chart circle.dot {
stroke: none;
}
.dc-chart g.dc-tooltip path {
fill: none;
stroke: grey;
stroke-opacity: .8;
}
.dc-chart path.area {
fill-opacity: .3;
stroke: none;
}
.dc-chart .node {
font-size: 0.7em;
cursor: pointer;
}
.dc-chart .node :hover {
fill-opacity: .8;
}
.dc-chart .selected circle {
stroke-width: 3;
stroke: #ccc;
fill-opacity: 1;
}
.dc-chart .deselected circle {
stroke: none;
fill-opacity: .5;
fill: #ccc;
}
.dc-chart .bubble {
stroke: none;
fill-opacity: 0.6;
}
.dc-data-count {
float: right;
margin-top: 15px;
margin-right: 15px;
}
.dc-data-count .filter-count {
color: #3182bd;
font-weight: bold;
}
.dc-data-count .total-count {
color: #3182bd;
font-weight: bold;
}
.dc-data-table {
}
.dc-chart g.state {
cursor: pointer;
}
.dc-chart g.state :hover {
fill-opacity: .8;
}
.dc-chart g.state path {
stroke: white;
}
.dc-chart g.selected path {
}
.dc-chart g.deselected path {
fill: grey;
}
.dc-chart g.selected text {
}
.dc-chart g.deselected text {
display: none;
}
.dc-chart g.county path {
stroke: white;
fill: none;
}
.dc-chart g.debug rect {
fill: blue;
fill-opacity: .2;
}
.dc-chart g.row rect {
fill-opacity: 0.8;
cursor: pointer;
}
.dc-chart g.row rect:hover {
fill-opacity: 0.6;
}
.dc-chart g.row text {
fill: white;
font-size: 12px;
cursor: pointer;
}
.dc-legend {
font-size: 11px;
}
.dc-legend-item {
cursor: pointer;
}
.dc-chart g.axis text {
/* Makes it so the user can't accidentally click and select text that is meant as a label only */
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10 */
-o-user-select: none;
user-select: none;
pointer-events: none;
}
.dc-chart path.highlight {
stroke-width: 3;
fill-opacity: 1;
stroke-opacity: 1;
}
.dc-chart .highlight {
fill-opacity: 1;
stroke-opacity: 1;
}
.dc-chart .fadeout {
fill-opacity: 0.2;
stroke-opacity: 0.2;
}
.dc-chart path.dc-symbol, g.dc-legend-item.fadeout {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
.dc-hard .number-display {
float: none;
}
.dc-chart .box text {
font: 10px sans-serif;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10 */
-o-user-select: none;
user-select: none;
pointer-events: none;
}
.dc-chart .box line,
.dc-chart .box circle {
fill: #fff;
stroke: #000;
stroke-width: 1.5px;
}
.dc-chart .box rect {
stroke: #000;
stroke-width: 1.5px;
}
.dc-chart .box .center {
stroke-dasharray: 3,3;
}
.dc-chart .box .outlier {
fill: none;
stroke: #ccc;
}
.dc-chart .box.deselected .box {
fill: #ccc;
}
.dc-chart .box.deselected {
opacity: .5;
}
.dc-chart .symbol{
stroke: none;
}
.dc-chart .heatmap .box-group.deselected rect {
stroke: none;
fill-opacity: .5;
fill: #ccc;
}
.dc-chart .heatmap g.axis text {
pointer-events: all;
cursor: pointer;
}
Model,MPG,Cylinders,Engine Disp,Horsepower,Weight,Accelerate,Year,Origin
amc ambassador dpl,15.0,8,390,190,3850,8.5,70,American
amc gremlin,21.0,6,199,90,2648,15.0,70,American
amc hornet,18.0,6,199,97,2774,15.5,70,American
amc rebel sst,16.0,8,304,150,3433,12.0,70,American
buick estate wagon (sw),14.0,8,455,225,3086,10.0,70,American
buick skylark 320,15.0,8,350,165,3693,11.5,70,American
chevrolet chevelle malibu,18.0,8,307,130,3504,12.0,70,American
chevrolet impala,14.0,8,454,220,4354,9.0,70,American
chevrolet monte carlo,15.0,8,400,150,3761,9.5,70,American
chevy c20,10.0,8,307,200,4376,15.0,70,American
dodge challenger se,15.0,8,383,170,3563,10.0,70,American
dodge d200,11.0,8,318,210,4382,13.5,70,American
ford f250,10.0,8,360,215,4615,14.0,70,American
ford galaxie 500,15.0,8,429,198,4341,10.0,70,American
ford maverick,21.0,6,200,85,2587,16.0,70,American
ford torino,17.0,8,302,140,3449,10.5,70,American
hi 1200d,9.0,8,304,193,4732,18.5,70,American
plymouth 'cuda 340,14.0,8,340,160,3609,8.0,70,American
plymouth duster,22.0,6,198,95,2833,15.5,70,American
plymouth fury iii,14.0,8,440,215,4312,8.5,70,American
plymouth satellite,18.0,8,318,150,3436,11.0,70,American
pontiac catalina,14.0,8,455,225,4425,10.0,70,American
audi 100 ls,24.0,4,107,90,2430,14.5,70,European
bmw 2002,26.0,4,121,113,2234,12.5,70,European
peugeot 504,25.0,4,110,87,2672,17.5,70,European
saab 99e,25.0,4,104,95,2375,17.5,70,European
volkswagen 1131 deluxe sedan,26.0,4,97,46,1835,20.5,70,European
datsun pl510,27.0,4,97,88,2130,14.5,70,Japanese
toyota corona mark ii,24.0,4,113,95,2372,15.0,70,Japanese
amc gremlin,19.0,6,232,100,2634,13.0,71,American
amc hornet sportabout (sw),18.0,6,258,110,2962,13.5,71,American
amc matador,18.0,6,232,100,3288,15.5,71,American
chevrolet chevelle malibu,17.0,6,250,100,3329,15.5,71,American
chevrolet impala,14.0,8,350,165,4209,12.0,71,American
chevrolet vega (sw),22.0,4,140,72,2408,19.0,71,American
chevrolet vega 2300,28.0,4,140,90,2264,15.5,71,American
dodge monaco (sw),12.0,8,383,180,4955,11.5,71,American
ford country squire (sw),13.0,8,400,170,4746,12.0,71,American
ford galaxie 500,14.0,8,351,153,4154,13.5,71,American
ford mustang,18.0,6,250,88,3139,14.5,71,American
ford torino 500,19.0,6,250,88,3302,15.5,71,American
mercury capri 2000,23.0,4,122,86,2220,14.0,71,American
plymouth cricket,26.0,4,91,70,1955,20.5,71,American
plymouth fury iii,14.0,8,318,150,4096,13.0,71,American
plymouth satellite custom,16.0,6,225,105,3439,15.5,71,American
pontiac catalina brougham,14.0,8,400,175,4464,11.5,71,American
pontiac firebird,19.0,6,250,100,3282,15.0,71,American
pontiac safari (sw),13.0,8,400,175,5140,12.0,71,American
fiat 124b,30.0,4,88,76,2065,14.5,71,European
opel 1900,28.0,4,116,90,2123,14.0,71,European
peugeot 304,30.0,4,79,70,2074,19.5,71,European
volkswagen model 111,27.0,4,97,60,1834,19.0,71,European
datsun 1200,35.0,4,72,69,1613,18.0,71,Japanese
datsun pl510,27.0,4,97,88,2130,14.5,71,Japanese
toyota corolla 1200,31.0,4,71,65,1773,19.0,71,Japanese
toyota corona,25.0,4,113,95,2228,14.0,71,Japanese
amc ambassador sst,17.0,8,304,150,3672,11.5,72,American
amc matador (sw),15.0,8,304,150,3892,12.5,72,American
buick lesabre custom,13.0,8,350,155,4502,13.5,72,American
chevrolet chevelle concours (sw),13.0,8,307,130,4098,14.0,72,American
chevrolet impala,13.0,8,350,165,4274,12.0,72,American
chevrolet vega,20.0,4,140,90,2408,19.5,72,American
chrysler newport royal,13.0,8,400,190,4422,12.5,72,American
dodge colt (sw),28.0,4,98,80,2164,15.0,72,American
dodge colt hardtop,25.0,4,97.5,80,2126,17.0,72,American
ford galaxie 500,14.0,8,351,153,4129,13.0,72,American
ford gran torino (sw),13.0,8,302,140,4294,16.0,72,American
ford pinto (sw),22.0,4,122,86,2395,16.0,72,American
ford pinto runabout,21.0,4,122,86,2226,16.5,72,American
mercury marquis,11.0,8,429,208,4633,11.0,72,American
oldsmobile delta 88 royale,12.0,8,350,160,4456,13.5,72,American
plymouth fury iii,15.0,8,318,150,4135,13.5,72,American
plymouth satellite custom (sw),14.0,8,318,150,4077,14.0,72,American
pontiac catalina,14.0,8,400,175,4385,12.0,72,American
peugeot 504 (sw),21.0,4,120,87,2979,19.5,72,European
renault 12 (sw),26.0,4,96,69,2189,18.0,72,European
volkswagen 411 (sw),22.0,4,121,76,2511,18.0,72,European
volkswagen type 3,23.0,4,97,54,2254,23.5,72,European
volvo 145e (sw),18.0,4,121,112,2933,14.5,72,European
datsun 510 (sw),28.0,4,97,92,2288,17.0,72,Japanese
mazda rx2 coupe,19.0,3,70,97,2330,13.5,72,Japanese
toyota corolla 1600 (sw),27.0,4,97,88,2100,16.5,72,Japanese
toyota corona hardtop,24.0,4,113,95,2278,15.5,72,Japanese
toyouta corona mark ii (sw),23.0,4,120,97,2506,14.5,72,Japanese
amc ambassador brougham,13.0,8,360,175,3821,11.0,73,American
amc gremlin,18.0,6,232,100,2789,15.0,73,American
amc hornet,18.0,6,232,100,2945,16.0,73,American
amc matador,14.0,8,304,150,3672,11.5,73,American
buick century 350,13.0,8,350,175,4100,13.0,73,American
buick electra 225 custom,12.0,8,455,225,4951,11.0,73,American
chevrolet caprice classic,13.0,8,400,150,4464,12.0,73,American
chevrolet impala,11.0,8,400,150,4997,14.0,73,American
chevrolet malibu,13.0,8,350,145,3988,13.0,73,American
chevrolet monte carlo s,15.0,8,350,145,4082,13.0,73,American
chevrolet nova custom,16.0,6,250,100,3278,18.0,73,American
chevrolet vega,21.0,4,140,72,2401,19.5,73,American
chrysler new yorker brougham,13.0,8,440,215,4735,11.0,73,American
dodge coronet custom,15.0,8,318,150,3777,12.5,73,American
dodge dart custom,15.0,8,318,150,3399,11.0,73,American
ford country,12.0,8,400,167,4906,12.5,73,American
ford gran torino,14.0,8,302,137,4042,14.5,73,American
ford ltd,13.0,8,351,158,4363,13.0,73,American
ford maverick,18.0,6,250,88,3021,16.5,73,American
ford pinto,19.0,4,122,85,2310,18.5,73,American
mercury capri v6,21.0,6,155,107,2472,14.0,73,American
mercury marquis brougham,12.0,8,429,198,4952,11.5,73,American
oldsmobile omega,11.0,8,350,180,3664,11.0,73,American
oldsmobile vista cruiser,12.0,8,350,180,4499,12.5,73,American
plymouth custom suburb,13.0,8,360,170,4654,13.0,73,American
plymouth duster,23.0,6,198,95,2904,16.0,73,American
plymouth fury gran sedan,14.0,8,318,150,4237,14.5,73,American
plymouth valiant,18.0,6,225,105,3121,16.5,73,American
pontiac grand prix,16.0,8,400,230,4278,9.5,73,American
audi 100ls,20.0,4,114,91,2582,14.0,73,European
fiat 124 sport coupe,26.0,4,98,90,2265,15.5,73,European
fiat 128,29.0,4,68,49,1867,19.5,73,European
opel manta,24.0,4,116,75,2158,15.5,73,European
saab 99le,24.0,4,121,110,2660,14.0,73,European
volkswagen super beetle,26.0,4,97,46,1950,21.0,73,European
volvo 144ea,19.0,4,121,112,2868,15.5,73,European
datsun 610,22.0,4,108,94,2379,16.5,73,Japanese
maxda rx3,18.0,3,70,90,2124,13.5,73,Japanese
toyota carina,20.0,4,97,88,2279,19.0,73,Japanese
toyota mark ii,20.0,6,156,122,2807,13.5,73,Japanese
amc hornet,19.0,6,232,100,2901,16.0,74,American
amc matador,16.0,6,258,110,3632,18.0,74,American
amc matador (sw),14.0,8,304,150,4257,15.5,74,American
buick century luxus (sw),13.0,8,350,150,4699,14.5,74,American
chevrolet chevelle malibu classic,16.0,6,250,100,3781,17.0,74,American
chevrolet nova,15.0,6,250,100,3336,17.0,74,American
chevrolet vega,25.0,4,140,75,2542,17.0,74,American
dodge colt,28.0,4,90,75,2125,14.5,74,American
dodge coronet custom (sw),14.0,8,318,150,4457,13.5,74,American
ford gran torino,16.0,8,302,140,4141,14.0,74,American
ford gran torino (sw),14.0,8,302,140,4638,16.0,74,American
ford pinto,26.0,4,122,80,2451,16.5,74,American
plymouth duster,20.0,6,198,95,3102,16.5,74,American
plymouth satellite sebring,18.0,6,225,105,3613,16.5,74,American
audi fox,29.0,4,98,83,2219,16.5,74,European
fiat 124 tc,26.0,4,116,75,2246,14.0,74,European
fiat 128,24.0,4,90,75,2108,15.5,74,European
fiat x1.9,31.0,4,79,67,2000,16.0,74,European
opel manta,26.0,4,97,78,2300,14.5,74,European
volkswagen dasher,26.0,4,79,67,1963,15.5,74,European
datsun 710,32.0,4,83,61,2003,19.0,74,Japanese
datsun b210,31.0,4,79,67,1950,19.0,74,Japanese
honda civic,24.0,4,120,97,2489,15.0,74,Japanese
subaru,26.0,4,108,93,2391,15.5,74,Japanese
toyota corolla 1200,32.0,4,71,65,1836,21.0,74,Japanese
toyota corona,31.0,4,76,52,1649,16.5,74,Japanese
amc gremlin,20.0,6,232,100,2914,16.0,75,American
amc matador,15.0,6,258,110,3730,19.0,75,American
amc pacer,19.0,6,232,90,3211,17.0,75,American
buick century,17.0,6,231,110,3907,21.0,75,American
buick skyhawk,21.0,6,231,110,3039,15.0,75,American
chevroelt chevelle malibu,16.0,6,250,105,3897,18.5,75,American
chevrolet bel air,15.0,8,350,145,4440,14.0,75,American
chevrolet monza 2+2,20.0,8,262,110,3221,13.5,75,American
chevrolet nova,18.0,6,250,105,3459,16.0,75,American
ford ltd,14.0,8,351,148,4657,13.5,75,American
ford maverick,15.0,6,250,72,3158,19.5,75,American
ford mustang ii,13.0,8,302,129,3169,12.0,75,American
ford pinto,23.0,4,140,83,2639,17.0,75,American
ford pinto,18.0,6,171,97,2984,14.5,75,American
mercury monarch,15.0,6,250,72,3432,21.0,75,American
plymouth fury,18.0,6,225,95,3785,19.0,75,American
plymouth grand fury,16.0,8,318,150,4498,14.5,75,American
plymouth valiant custom,19.0,6,225,95,3264,16.0,75,American
pontiac astro,23.0,4,140,78,2592,18.5,75,American
pontiac catalina,16.0,8,400,170,4668,11.5,75,American
audi 100ls,23.0,4,115,95,2694,15.0,75,European
peugeot 504,23.0,4,120,88,2957,17.0,75,European
saab 99le,25.0,4,121,115,2671,13.5,75,European
volkswagen dasher,25.0,4,90,71,2223,16.5,75,European
volkswagen rabbit,29.0,4,90,70,1937,14.0,75,European
volvo 244dl,22.0,4,121,98,2945,14.5,75,European
datsun 710,24.0,4,119,97,2545,17.0,75,Japanese
honda civic cvcc,33.0,4,91,53,1795,17.5,75,Japanese
toyota corolla,29.0,4,97,75,2171,16.0,75,Japanese
toyota corona,24.0,4,134,96,2702,13.5,75,Japanese
amc hornet,22.5,6,232,90,3085,17.6,76,American
amc matador,15.5,8,304,120,3962,13.9,76,American
amc pacer d/l,17.5,6,258,95,3193,17.8,76,American
cadillac seville,16.5,8,350,180,4380,12.1,76,American
capri ii,25.0,4,140,92,2572,14.9,76,American
chevrolet chevelle malibu classic,17.5,8,305,140,4215,13.0,76,American
chevrolet chevette,29.0,4,85,52,2035,22.2,76,American
chevrolet nova,22.0,6,250,105,3353,14.5,76,American
chevrolet woody,24.5,4,98,60,2164,22.1,76,American
chevy c10,13.0,8,350,145,4055,12.0,76,American
dodge aspen se,20.0,6,225,100,3651,17.7,76,American
dodge colt,26.0,4,98,79,2255,17.7,76,American
dodge coronet brougham,16.0,8,318,150,4190,13.0,76,American
dodge d100,13.0,8,318,150,3755,14.0,76,American
ford f108,13.0,8,302,130,3870,15.0,76,American
ford gran torino,14.5,8,351,152,4215,12.8,76,American
ford granada ghia,18.0,6,250,78,3574,21.0,76,American
ford maverick,24.0,6,200,81,3012,17.6,76,American
ford pinto,26.5,4,140,72,2565,13.6,76,American
plymouth valiant,22.0,6,225,100,3233,15.4,76,American
plymouth volare premier v8,13.0,8,318,150,3940,13.2,76,American
pontiac ventura sj,18.5,6,250,110,3645,16.2,76,American
fiat 131,28.0,4,107,86,2464,15.5,76,European
mercedes-benz 280s,16.5,6,168,120,3820,16.7,76,European
opel 1900,25.0,4,116,81,2220,16.9,76,European
peugeot 504,19.0,4,120,88,3270,21.9,76,European
renault 12tl,27.0,4,101,83,2202,15.3,76,European
volkswagen rabbit,29.5,4,97,71,1825,12.2,76,European
volvo 245,20.0,4,130,102,3150,15.7,76,European
vw rabbit,29.0,4,90,70,1937,14.2,76,European
datsun b-210,32.0,4,85,70,1990,17.0,76,Japanese
honda civic,33.0,4,91,53,1795,17.4,76,Japanese
toyota corolla,28.0,4,97,75,2155,16.4,76,Japanese
toyota mark ii,19.0,6,156,108,2930,15.5,76,Japanese
buick opel isuzu deluxe,30.0,4,111,80,2155,14.8,77,American
buick skylark,20.5,6,231,105,3425,16.9,77,American
chevrolet caprice classic,17.5,8,305,145,3880,12.5,77,American
chevrolet chevette,30.5,4,98,63,2051,17.0,77,American
chevrolet concours,17.5,6,250,110,3520,16.4,77,American
chevrolet monte carlo landau,15.5,8,350,170,4165,11.4,77,American
chrysler cordoba,15.5,8,400,190,4325,12.2,77,American
dodge colt m/m,33.5,4,98,83,2075,15.9,77,American
dodge monaco brougham,15.5,8,318,145,4140,13.7,77,American
ford granada,18.5,6,250,98,3525,19.0,77,American
ford mustang ii 2+2,25.5,4,140,89,2755,15.8,77,American
ford thunderbird,16.0,8,351,149,4335,14.5,77,American
mercury cougar brougham,15.0,8,302,130,4295,14.9,77,American
oldsmobile cutlass supreme,17.0,8,260,110,4060,19.0,77,American
plymouth arrow gs,25.5,4,122,96,2300,15.5,77,American
plymouth volare custom,19.0,6,225,100,3630,17.7,77,American
pontiac grand prix lj,16.0,8,400,180,4220,11.1,77,American
pontiac sunbird coupe,24.5,4,151,88,2740,16.0,77,American
bmw 320i,21.5,4,121,110,2600,12.8,77,European
renault 5 gtl,36.0,4,79,58,1825,18.6,77,European
volkswagen dasher,30.5,4,97,78,2190,14.1,77,European
volkswagen rabbit custom,29.0,4,97,78,1940,14.5,77,European
datsun 810,22.0,6,146,97,2815,14.5,77,Japanese
datsun f-10 hatchback,33.5,4,85,70,1945,16.8,77,Japanese
honda accord cvcc,31.5,4,98,68,2045,18.5,77,Japanese
mazda rx-4,21.5,3,80,110,2720,13.5,77,Japanese
subaru dl,30.0,4,97,67,1985,16.4,77,Japanese
toyota corolla liftback,26.0,4,97,75,2265,18.2,77,Japanese
amc concord,19.4,6,232,90,3210,17.2,78,American
amc concord d/l,18.1,6,258,120,3410,15.1,78,American
buick century special,20.6,6,231,105,3380,15.8,78,American
buick regal sport coupe (turbo),17.7,6,231,165,3445,13.4,78,American
chevrolet chevette,30.0,4,98,68,2155,16.5,78,American
chevrolet malibu,20.5,6,200,95,3155,18.2,78,American
chevrolet monte carlo landau,19.2,8,305,145,3425,13.2,78,American
dodge aspen,18.6,6,225,110,3620,18.7,78,American
dodge diplomat,19.4,8,318,140,3735,13.2,78,American
dodge magnum xe,17.5,8,318,140,4080,13.7,78,American
dodge omni,30.9,4,105,75,2230,14.5,78,American
ford fairmont (auto),20.2,6,200,85,2965,15.8,78,American
ford fairmont (man),25.1,4,140,88,2720,15.4,78,American
ford fiesta,36.1,4,98,66,1800,14.4,78,American
ford futura,18.1,8,302,139,3205,11.2,78,American
mercury monarch ghia,20.2,8,302,139,3570,12.8,78,American
mercury zephyr,20.8,6,200,85,3070,16.7,78,American
oldsmobile cutlass salon brougham,19.9,8,260,110,3365,15.5,78,American
oldsmobile starfire sx,23.8,4,151,85,2855,17.6,78,American
plymouth sapporo,23.2,4,156,105,2745,16.7,78,American
plymouth volare,20.5,6,225,100,3430,17.2,78,American
pontiac phoenix lj,19.2,6,231,105,3535,19.2,78,American
audi 5000,20.3,5,131,103,2830,15.9,78,European
peugeot 604sl,16.2,6,163,133,3410,15.8,78,European
saab 99gle,21.6,4,121,115,2795,15.7,78,European
volkswagen rabbit custom diesel,43.1,4,90,48,1985,21.5,78,European
volkswagen scirocco,31.5,4,89,71,1990,14.9,78,European
volvo 264gl,17.0,6,163,125,3140,13.6,78,European
datsun 200-sx,23.9,4,119,97,2405,14.9,78,Japanese
datsun 510,27.2,4,119,97,2300,14.7,78,Japanese
datsun b210 gx,39.4,4,85,70,2070,18.6,78,Japanese
honda accord lx,29.5,4,98,68,2135,16.6,78,Japanese
honda civic cvcc,36.1,4,91,60,1800,16.4,78,Japanese
mazda glc deluxe,32.8,4,78,52,1985,19.4,78,Japanese
toyota celica gt liftback,21.1,4,134,95,2515,14.8,78,Japanese
toyota corona,27.5,4,134,95,2560,14.2,78,Japanese
amc concord dl 6,20.2,6,232,90,3265,18.2,79,American
amc spirit dl,27.4,4,121,80,2670,15.0,79,American
buick estate wagon (sw),16.9,8,350,155,4360,14.9,79,American
buick skylark limited,28.4,4,151,90,2670,16.0,79,American
cadillac eldorado,23.0,8,350,125,3900,17.4,79,American
chevrolet caprice classic,17.0,8,305,130,3840,15.4,79,American
chevrolet citation,28.8,6,173,115,2595,11.3,79,American
chevrolet malibu classic (sw),19.2,8,267,125,3605,15.0,79,American
chrysler lebaron town @ country (sw),18.5,8,360,150,3940,13.0,79,American
dodge aspen 6,20.6,6,225,110,3360,16.6,79,American
dodge colt hatchback custom,35.7,4,98,80,1915,14.4,79,American
dodge st. regis,18.2,8,318,135,3830,15.2,79,American
ford country squire (sw),15.5,8,351,142,4054,14.3,79,American
ford fairmont 4,22.3,4,140,88,2890,17.3,79,American
ford ltd landau,17.6,8,302,129,3725,13.4,79,American
mercury grand marquis,16.5,8,351,138,3955,13.2,79,American
mercury zephyr 6,19.8,6,200,85,2990,18.2,79,American
oldsmobile cutlass salon brougham,23.9,8,260,90,3420,22.2,79,American
oldsmobile omega brougham,26.8,6,173,115,2700,12.9,79,American
plymouth horizon,34.2,4,105,70,2200,13.2,79,American
plymouth horizon tc3,34.5,4,105,70,2150,14.9,79,American
pontiac lemans v6,21.5,6,231,115,3245,15.4,79,American
pontiac phoenix,33.5,4,151,90,2556,13.2,79,American
fiat strada custom,37.3,4,91,69,2130,14.7,79,European
mercedes benz 300d,25.4,5,183,77,3530,20.1,79,European
peugeot 504,27.2,4,141,71,3190,24.8,79,European
vw rabbit custom,31.9,4,89,71,1925,14.0,79,European
datsun 210,31.8,4,85,65,2020,19.2,79,Japanese
maxda glc deluxe,34.1,4,86,65,1975,15.2,79,Japanese
amc concord,24.3,4,151,90,3003,20.1,80,American
chevrolet chevette,32.1,4,98,70,2120,15.5,80,American
chevrolet citation,28.0,4,151,90,2678,16.5,80,American
dodge aspen,19.1,6,225,90,3381,18.7,80,American
dodge colt,27.9,4,156,105,2800,14.4,80,American
ford fairmont,26.4,4,140,88,2870,18.1,80,American
audi 4000,34.3,4,97,78,2188,15.8,80,European
audi 5000s (diesel),36.4,5,121,67,2950,19.9,80,European
mercedes-benz 240d,30.0,4,146,67,3250,21.8,80,European
triumph tr7 coupe,35.0,4,122,88,2500,15.1,80,European
vokswagen rabbit,29.8,4,89,62,1845,15.3,80,European
vw dasher (diesel),43.4,4,90,48,2335,23.7,80,European
vw rabbit,41.5,4,98,76,2144,14.7,80,European
vw rabbit c (diesel),44.3,4,90,48,2085,21.7,80,European
datsun 210,40.8,4,85,65,2110,19.2,80,Japanese
datsun 280-zx,32.7,6,168,132,2910,11.4,80,Japanese
datsun 310,37.2,4,86,65,2019,16.4,80,Japanese
datsun 510 hatchback,37.0,4,119,92,2434,15.0,80,Japanese
honda accord,32.4,4,107,72,2290,17.0,80,Japanese
honda civic 1500 gl,44.6,4,91,67,1850,13.8,80,Japanese
mazda 626,31.3,4,120,75,2542,17.5,80,Japanese
mazda glc,46.6,4,86,65,2110,17.9,80,Japanese
mazda rx-7 gs,23.7,3,70,100,2420,12.5,80,Japanese
subaru dl,33.8,4,97,67,2145,18.0,80,Japanese
toyota corolla,32.2,4,108,75,2265,15.2,80,Japanese
toyota corolla tercel,38.1,4,89,60,1968,18.8,80,Japanese
toyota corona liftback,29.8,4,134,90,2711,15.5,80,Japanese
buick century,22.4,6,231,110,3415,15.8,81,American
buick skylark,26.6,4,151,84,2635,16.4,81,American
chevrolet citation,23.5,6,173,110,2725,12.6,81,American
chrysler lebaron salon,17.6,6,225,85,3465,16.6,81,American
dodge aries wagon (sw),25.8,4,156,92,2620,14.4,81,American
ford escort 2h,29.9,4,98,65,2380,20.7,81,American
ford escort 4w,34.4,4,98,65,2045,16.2,81,American
ford granada gl,20.2,6,200,88,3060,17.1,81,American
oldsmobile cutlass ls,26.6,8,350,105,3725,19.0,81,American
plymouth champ,39.0,4,86,64,1875,16.4,81,American
plymouth horizon 4,34.7,4,105,63,2215,14.9,81,American
plymouth reliant,27.2,4,135,84,2490,15.7,81,American
plymouth reliant,30.0,4,135,84,2385,12.9,81,American
peugeot 505s turbo diesel,28.1,4,141,80,3230,20.4,81,European
volkswagen jetta,33.0,4,105,74,2190,14.2,81,European
volvo diesel,30.7,6,145,76,3160,19.6,81,European
datsun 200sx,32.9,4,119,100,2615,14.8,81,Japanese
datsun 210 mpg,37.0,4,85,65,1975,19.4,81,Japanese
datsun 810 maxima,24.2,6,146,120,2930,13.8,81,Japanese
honda civic 1300,35.1,4,81,60,1760,16.1,81,Japanese
honda prelude,33.7,4,107,75,2210,14.4,81,Japanese
mazda 626,31.6,4,120,74,2635,18.3,81,Japanese
mazda glc 4,34.1,4,91,68,1985,16.0,81,Japanese
subaru,32.3,4,97,67,2065,17.8,81,Japanese
toyota corolla,32.4,4,108,75,2350,16.8,81,Japanese
toyota cressida,25.4,6,168,116,2900,12.6,81,Japanese
toyota starlet,39.1,4,79,58,1755,16.9,81,Japanese
toyota tercel,37.7,4,89,62,2050,17.3,81,Japanese
buick century limited,25.0,6,181,110,2945,16.4,82,American
chevrolet camaro,27.0,4,151,90,2950,17.3,82,American
chevrolet cavalier,28.0,4,112,88,2605,19.6,82,American
chevrolet cavalier 2-door,34.0,4,112,88,2395,18.0,82,American
chevrolet cavalier wagon,27.0,4,112,88,2640,18.6,82,American
chevy s-10,31.0,4,119,82,2720,19.4,82,American
chrysler lebaron medallion,26.0,4,156,92,2585,14.5,82,American
dodge aries se,29.0,4,135,84,2525,16.0,82,American
dodge charger 2.2,36.0,4,135,84,2370,13.0,82,American
dodge rampage,32.0,4,135,84,2295,11.6,82,American
ford fairmont futura,24.0,4,140,92,2865,16.4,82,American
ford granada l,22.0,6,232,112,2835,14.7,82,American
ford mustang gl,27.0,4,140,86,2790,15.6,82,American
ford ranger,28.0,4,120,79,2625,18.6,82,American
mercury lynx l,36.0,4,98,70,2125,17.3,82,American
oldsmobile cutlass ciera (diesel),38.0,6,262,85,3015,17.0,82,American
plymouth horizon miser,38.0,4,105,63,2125,14.7,82,American
pontiac j2000 se hatchback,31.0,4,112,85,2575,16.2,82,American
pontiac phoenix,27.0,4,151,90,2735,18.0,82,American
volkswagen rabbit l,36.0,4,105,74,1980,15.3,82,European
vw pickup,44.0,4,97,52,2130,24.6,82,European
datsun 310 gx,38.0,4,91,67,1995,16.2,82,Japanese
honda accord,36.0,4,107,75,2205,14.5,82,Japanese
honda civic,38.0,4,91,67,1965,15.0,82,Japanese
honda civic (auto),32.0,4,91,67,1965,15.7,82,Japanese
mazda glc custom,31.0,4,91,68,1970,17.6,82,Japanese
mazda glc custom l,37.0,4,91,68,2025,18.2,82,Japanese
nissan stanza xe,36.0,4,120,88,2160,14.5,82,Japanese
toyota celica gt,32.0,4,144,96,2665,13.9,82,Japanese
toyota corolla,34.0,4,108,70,2245,16.9,82,Japanese
/*!
* dc 2.0.0-dev, plus mr23 branch mod for table headers
* http://dc-js.github.io/dc.js/
* Copyright 2012 Nick Zhu and other contributors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
dc = (function(){
'use strict';
/**
#### Version 2.0.0-dev
The entire dc.js library is scoped under **dc** name space. It does not introduce anything else into the global
name space.
#### Function Chain
Majority of dc functions are designed to allow function chaining, meaning it will return the current chart instance
whenever it is appropriate. Therefore configuration of a chart can be written in the following style.
```js
chart.width(300)
.height(300)
.filter("sunday")
```
The API references will highlight the fact if a particular function is not chainable.
**/
var dc = {
version: "2.0.0-dev",
constants: {
CHART_CLASS: "dc-chart",
DEBUG_GROUP_CLASS: "debug",
STACK_CLASS: "stack",
DESELECTED_CLASS: "deselected",
SELECTED_CLASS: "selected",
NODE_INDEX_NAME: "__index__",
GROUP_INDEX_NAME: "__group_index__",
DEFAULT_CHART_GROUP: "__default_chart_group__",
EVENT_DELAY: 40,
NEGLIGIBLE_NUMBER: 1e-10
},
_renderlet: null
};
dc.chartRegistry = function() {
// chartGroup:string => charts:array
var _chartMap = {};
function initializeChartGroup(group) {
if (!group)
group = dc.constants.DEFAULT_CHART_GROUP;
if (!_chartMap[group])
_chartMap[group] = [];
return group;
}
return {
has: function(chart) {
for (var e in _chartMap) {
if (_chartMap[e].indexOf(chart) >= 0)
return true;
}
return false;
},
register: function(chart, group) {
group = initializeChartGroup(group);
_chartMap[group].push(chart);
},
deregister: function (chart, group) {
group = initializeChartGroup(group);
for (var i = 0; i < _chartMap[group].length; i++) {
if (_chartMap[group][i].anchorName() === chart.anchorName()) {
_chartMap[group].splice(i, 1);
break;
}
}
},
clear: function(group) {
if (group) {
delete _chartMap[group];
} else {
_chartMap = {};
}
},
list: function(group) {
group = initializeChartGroup(group);
return _chartMap[group];
}
};
}();
dc.registerChart = function(chart, group) {
dc.chartRegistry.register(chart, group);
};
dc.deregisterChart = function (chart, group) {
dc.chartRegistry.deregister(chart, group);
};
dc.hasChart = function(chart) {
return dc.chartRegistry.has(chart);
};
dc.deregisterAllCharts = function(group) {
dc.chartRegistry.clear(group);
};
/**
## Utilities
**/
/**
#### dc.filterAll([chartGroup])
Clear all filters on every chart within the given chart group. If the chart group is not given then only charts that
belong to the default chart group will be reset.
**/
dc.filterAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].filterAll();
}
};
/**
#### dc.refocusAll([chartGroup])
Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is not given then only charts that belong to
the default chart group will be reset.
**/
dc.refocusAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
if (charts[i].focus) charts[i].focus();
}
};
/**
#### dc.renderAll([chartGroup])
Re-render all charts belong to the given chart group. If the chart group is not given then only charts that belong to
the default chart group will be re-rendered.
**/
dc.renderAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].render();
}
if(dc._renderlet !== null)
dc._renderlet(group);
};
/**
#### dc.redrawAll([chartGroup])
Redraw all charts belong to the given chart group. If the chart group is not given then only charts that belong to the
default chart group will be re-drawn. Redraw is different from re-render since when redrawing dc charts try to update
the graphic incrementally instead of starting from scratch.
**/
dc.redrawAll = function(group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].redraw();
}
if(dc._renderlet !== null)
dc._renderlet(group);
};
dc.disableTransitions = false;
dc.transition = function(selections, duration, callback) {
if (duration <= 0 || duration === undefined || dc.disableTransitions)
return selections;
var s = selections
.transition()
.duration(duration);
if (typeof(callback) === 'function') {
callback(s);
}
return s;
};
dc.units = {};
/**
#### dc.units.integers
This function can be used to in [Coordinate Grid Chart](#coordinate-grid-chart) to define units on x axis.
dc.units.integers is the default x unit scale used by [Coordinate Grid Chart](#coordinate-grid-chart) and should be
used when x range is a sequential of integers.
**/
dc.units.integers = function(s, e) {
return Math.abs(e - s);
};
/**
#### dc.units.ordinal
This function can be used to in [Coordinate Grid Chart](#coordinate-grid-chart) to define ordinal units on x axis.
Usually this function is used in combination with d3.scale.ordinal() on x axis.
**/
dc.units.ordinal = function(s, e, domain){
return domain;
};
/**
#### dc.units.fp.precision(precision)
This function generates xunit function in floating-point numbers with the given precision. For example if the function
is invoked with 0.001 precision then the function created will divide a range [0.5, 1.0] with 500 units.
**/
dc.units.fp = {};
dc.units.fp.precision = function(precision){
var _f = function(s, e){
var d = Math.abs((e-s)/_f.resolution);
if(dc.utils.isNegligible(d - Math.floor(d)))
return Math.floor(d);
else
return Math.ceil(d);
};
_f.resolution = precision;
return _f;
};
dc.round = {};
dc.round.floor = function(n) {
return Math.floor(n);
};
dc.round.ceil = function(n) {
return Math.ceil(n);
};
dc.round.round = function(n) {
return Math.round(n);
};
dc.override = function(obj, functionName, newFunction) {
var existingFunction = obj[functionName];
obj["_" + functionName] = existingFunction;
obj[functionName] = newFunction;
};
dc.renderlet = function(_){
if(!arguments.length) return dc._renderlet;
dc._renderlet = _;
return dc;
};
dc.instanceOfChart = function (o) {
return o instanceof Object && o.__dc_flag__ && true;
};
dc.errors = {};
dc.errors.Exception = function(msg) {
var _msg = msg || "Unexpected internal error";
this.message = _msg;
this.toString = function(){
return _msg;
};
};
dc.errors.InvalidStateException = function() {
dc.errors.Exception.apply(this, arguments);
};
dc.dateFormat = d3.time.format("%m/%d/%Y");
dc.printers = {};
dc.printers.filters = function (filters) {
var s = "";
for (var i = 0; i < filters.length; ++i) {
if (i > 0) s += ", ";
s += dc.printers.filter(filters[i]);
}
return s;
};
dc.printers.filter = function (filter) {
var s = "";
if (filter) {
if (filter instanceof Array) {
if (filter.length >= 2)
s = "[" + dc.utils.printSingleValue(filter[0]) + " -> " + dc.utils.printSingleValue(filter[1]) + "]";
else if (filter.length >= 1)
s = dc.utils.printSingleValue(filter[0]);
} else {
s = dc.utils.printSingleValue(filter);
}
}
return s;
};
dc.pluck = function(n,f) {
if (!f) return function(d) { return d[n]; };
return function(d,i) { return f.call(d,d[n],i); };
};
dc.utils = {};
dc.utils.printSingleValue = function (filter) {
var s = "" + filter;
if (filter instanceof Date)
s = dc.dateFormat(filter);
else if (typeof(filter) == "string")
s = filter;
else if (dc.utils.isFloat(filter))
s = dc.utils.printSingleValue.fformat(filter);
else if (dc.utils.isInteger(filter))
s = Math.round(filter);
return s;
};
dc.utils.printSingleValue.fformat = d3.format(".2f");
dc.utils.add = function (l, r) {
if (typeof r === "string")
r = r.replace("%", "");
if (l instanceof Date) {
if (typeof r === "string") r = +r;
var d = new Date();
d.setTime(l.getTime());
d.setDate(l.getDate() + r);
return d;
} else if (typeof r === "string") {
var percentage = (+r / 100);
return l > 0 ? l * (1 + percentage) : l * (1 - percentage);
} else {
return l + r;
}
};
dc.utils.subtract = function (l, r) {
if (typeof r === "string")
r = r.replace("%", "");
if (l instanceof Date) {
if (typeof r === "string") r = +r;
var d = new Date();
d.setTime(l.getTime());
d.setDate(l.getDate() - r);
return d;
} else if (typeof r === "string") {
var percentage = (+r / 100);
return l < 0 ? l * (1 + percentage) : l * (1 - percentage);
} else {
return l - r;
}
};
dc.utils.isNumber = function(n) {
return n===+n;
};
dc.utils.isFloat = function (n) {
return n===+n && n!==(n|0);
};
dc.utils.isInteger = function (n) {
return n===+n && n===(n|0);
};
dc.utils.isNegligible = function (n) {
return !dc.utils.isNumber(n) || (n < dc.constants.NEGLIGIBLE_NUMBER && n > -dc.constants.NEGLIGIBLE_NUMBER);
};
dc.utils.clamp = function (val, min, max) {
return val < min ? min : (val > max ? max : val);
};
var _idCounter = 0;
dc.utils.uniqueId = function () {
return ++_idCounter;
};
dc.utils.nameToId = function (name) {
return name.toLowerCase().replace(/[\s]/g, "_").replace(/[\.']/g, "");
};
dc.utils.appendOrSelect = function (parent, name) {
var element = parent.select(name);
if (element.empty()) element = parent.append(name);
return element;
};
dc.utils.safeNumber = function(n){return dc.utils.isNumber(+n)?+n:0;};
dc.logger = {};
dc.logger.enableDebugLog = false;
dc.logger.warn = function (msg) {
if (console) {
if (console.warn) {
console.warn(msg);
} else if (console.log) {
console.log(msg);
}
}
return dc.logger;
};
dc.logger.debug = function (msg) {
if (dc.logger.enableDebugLog && console) {
if (console.debug) {
console.debug(msg);
} else if (console.log) {
console.log(msg);
}
}
return dc.logger;
};
dc.events = {
current: null
};
/**
#### dc.events.trigger(function[, delay])
This function is design to trigger throttled event function optionally with certain amount of delay(in milli-seconds).
Events that are triggered repetitively due to user interaction such as the dragging of the brush might over flood
library and cause too much rendering being scheduled. In this case, using this function to wrap your event function
allows the library to smooth out the rendering by throttling event flood and only respond to the most recent event.
```js
chart.renderlet(function(chart){
// smooth the rendering through event throttling
dc.events.trigger(function(){
// focus some other chart to the range selected by user on this chart
someOtherChart.focus(chart.filter());
});
})
```
**/
dc.events.trigger = function(closure, delay) {
if (!delay){
closure();
return;
}
dc.events.current = closure;
setTimeout(function() {
if (closure == dc.events.current)
closure();
}, delay);
};
dc.filters = {};
dc.filters.RangedFilter = function(low, high) {
var range = Array(low, high);
range.isFiltered = function(value) {
return value >= this[0] && value <= this[1];
};
return range;
};
dc.filters.TwoDimensionalFilter = function(array) {
if (array === null) { return null; }
var filter = array;
filter.isFiltered = function(value) {
return value.length && value.length == filter.length &&
value[0] == filter[0] && value[1] == filter[1];
};
return filter;
};
/**
* @param array in the form [[x1,y1],[x2,y2]]
*/
dc.filters.RangedTwoDimensionalFilter = function(array){
if (array === null) { return null; }
var filter = array;
var fromBottomLeft;
if (filter[0] instanceof Array) {
fromBottomLeft = [[Math.min(array[0][0], array[1][0]),
Math.min(array[0][1], array[1][1])],
[Math.max(array[0][0], array[1][0]),
Math.max(array[0][1], array[1][1])]];
} else {
fromBottomLeft = [[array[0], -Infinity],
[array[1], Infinity]];
}
filter.isFiltered = function(value) {
var x, y;
if (value instanceof Array) {
if (value.length != 2) return false;
x = value[0];
y = value[1];
} else {
x = value;
y = fromBottomLeft[0][1];
}
return x >= fromBottomLeft[0][0] && x <= fromBottomLeft[1][0] &&
y >= fromBottomLeft[0][1] && y <= fromBottomLeft[1][1];
};
return filter;
};
/**
## Base Mixin
Base Mixin is an abstract functional object representing a basic dc chart object
for all chart and widget implementations. Methods from the Base Mixin are inherited
and available on all chart implementation in the DC library.
**/
dc.baseMixin = function (_chart) {
_chart.__dc_flag__ = dc.utils.uniqueId();
var _dimension;
var _group;
var _anchor;
var _root;
var _svg;
var _minWidth = 200;
var _default_width = function (element) {
var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
return (width && width > _minWidth) ? width : _minWidth;
};
var _width = _default_width;
var _minHeight = 200;
var _default_height = function (element) {
var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
return (height && height > _minHeight) ? height : _minHeight;
};
var _height = _default_height;
var _keyAccessor = dc.pluck('key');
var _valueAccessor = dc.pluck('value');
var _label = dc.pluck('key');
var _ordering = dc.pluck('key');
var _orderSort;
var _renderLabel = false;
var _title = function (d) {
return _chart.keyAccessor()(d) + ": " + _chart.valueAccessor()(d);
};
var _renderTitle = false;
var _transitionDuration = 750;
var _filterPrinter = dc.printers.filters;
var _renderlets = [];
var _mandatoryAttributes = ['dimension', 'group'];
var _chartGroup = dc.constants.DEFAULT_CHART_GROUP;
var NULL_LISTENER = function () {};
var _listeners = {
preRender: NULL_LISTENER,
postRender: NULL_LISTENER,
preRedraw: NULL_LISTENER,
postRedraw: NULL_LISTENER,
filtered: NULL_LISTENER,
zoomed: NULL_LISTENER
};
var _legend;
var _filters = [];
var _filterHandler = function (dimension, filters) {
dimension.filter(null);
if (filters.length === 0)
dimension.filter(null);
else
dimension.filterFunction(function (d) {
for(var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.isFiltered && filter.isFiltered(d)) {
return true;
} else if (filter == d) {
return true;
}
}
return false;
});
return filters;
};
var _data = function (group) {
return group.all();
};
/**
#### .width([value])
Set or get width attribute of a chart. See `.height` below for further description of the behavior.
**/
_chart.width = function (w) {
if (!arguments.length) return _width(_root.node());
_width = d3.functor(w || _default_width);
return _chart;
};
/**
#### .height([value])
Set or get height attribute of a chart. The height is applied to the SVG element
generated by the chart when rendered (or rerendered). If a value is given, then it
will be used to calculate the new height and the chart returned for method chaining.
The value can either be a numeric, a function, or falsy. If no value specified then
value of the current height attribute will be returned.
By default, without an explicit height being given, the chart will select the width
of its anchor element. If that isn't possible it defaults to 200;
Examples:
```js
chart.height(250); // Set the chart's height to 250px;
chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
chart.height(null); // reset the height to the default auto calculation
```
**/
_chart.height = function (h) {
if (!arguments.length) return _height(_root.node());
_height = d3.functor(h || _default_height);
return _chart;
};
/**
#### .minWidth([value])
Set or get minimum width attribute of a chart. This only applicable if the width is calculated by DC.
**/
_chart.minWidth = function (w) {
if (!arguments.length) return _minWidth;
_minWidth = w;
return _chart;
};
/**
#### .minHeight([value])
Set or get minimum height attribute of a chart. This only applicable if the height is calculated by DC.
**/
_chart.minHeight = function (w) {
if (!arguments.length) return _minHeight;
_minHeight = w;
return _chart;
};
/**
#### .dimension([value]) - **mandatory**
Set or get dimension attribute of a chart. In dc a dimension can be any valid
[crossfilter dimension](https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension). If the value is given,
then it will be used as the new dimension.
If no value specified then the current dimension will be returned.
**/
_chart.dimension = function (d) {
if (!arguments.length) return _dimension;
_dimension = d;
_chart.expireCache();
return _chart;
};
/**
#### .data([callback])
Get the data callback or retreive the charts data set. The data callback is passed the chart's group and by default
will return `group.all()`. This behavior may be modified to, for instance, return only the top 5 groups:
```
chart.data(function(group) {
return group.top(5);
});
```
**/
_chart.data = function(d) {
if (!arguments.length) return _data.call(_chart,_group);
_data = d3.functor(d);
_chart.expireCache();
return _chart;
};
/**
#### .group([value, [name]]) - **mandatory**
Set or get group attribute of a chart. In dc a group is a
[crossfilter group](https://github.com/square/crossfilter/wiki/API-Reference#wiki-group). Usually the group should be
created from the particular dimension associated with the same chart. If the value is given, then it will be used as
the new group.
If no value specified then the current group will be returned.
If name is specified then it will be used to generate legend label.
**/
_chart.group = function (g, name) {
if (!arguments.length) return _group;
_group = g;
_chart._groupName = name;
_chart.expireCache();
return _chart;
};
/**
#### .ordering([orderFunction])
Get or set an accessor to order ordinal charts
**/
_chart.ordering = function(o) {
if (!arguments.length) return _ordering;
_ordering = o;
_orderSort = crossfilter.quicksort.by(_ordering);
_chart.expireCache();
return _chart;
};
_chart._computeOrderedGroups = function(data) {
var dataCopy = data.slice(0);
if (dataCopy.length <= 1)
return dataCopy;
if (!_orderSort)
_orderSort = crossfilter.quicksort.by(_ordering);
return _orderSort(dataCopy, 0, dataCopy.length);
};
/**
#### .filterAll()
Clear all filters associated with this chart.
**/
_chart.filterAll = function () {
return _chart.filter(null);
};
/**
#### .select(selector)
Execute in scope d3 single selection using the given selector and return d3 selection result. Roughly the same as:
```js
d3.select("#chart-id").select(selector);
```
This function is **not chainable** since it does not return a chart instance; however the d3 selection result is chainable
from d3's perspective.
**/
_chart.select = function (s) {
return _root.select(s);
};
/**
#### .selectAll(selector)
Execute in scope d3 selectAll using the given selector and return d3 selection result. Roughly the same as:
```js
d3.select("#chart-id").selectAll(selector);
```
This function is **not chainable** since it does not return a chart instance; however the d3 selection result is
chainable from d3's perspective.
**/
_chart.selectAll = function (s) {
return _root ? _root.selectAll(s) : null;
};
/**
#### .anchor([anchorChart/anchorSelector], [chartGroup])
Set the svg root to either be an existing chart's root or the first element returned from a d3 css string selector. Optionally registers the chart within the chartGroup. This class is called internally on chart initialization, but be called again to relocate the chart. However, it will orphan any previously created SVG elements.
**/
_chart.anchor = function (a, chartGroup) {
if (!arguments.length) return _anchor;
if (dc.instanceOfChart(a)) {
_anchor = a.anchor();
_root = a.root();
} else {
_anchor = a;
_root = d3.select(_anchor);
_root.classed(dc.constants.CHART_CLASS, true);
dc.registerChart(_chart, chartGroup);
}
_chartGroup = chartGroup;
return _chart;
};
/**
#### .anchorName()
Return the dom ID for chart's anchored location
**/
_chart.anchorName = function () {
var a = _chart.anchor();
if (a && a.id) return a.id;
if (a && a.replace) return a.replace('#','');
return "" + _chart.chartID();
};
/**
#### .root([rootElement])
Returns the root element where a chart resides. Usually it will be the parent div element where svg was created. You
can also pass in a new root element however this is usually handled as part of the dc internal. Resetting root element
on a chart outside of dc internal might have unexpected consequences.
**/
_chart.root = function (r) {
if (!arguments.length) return _root;
_root = r;
return _chart;
};
/**
#### .svg([svgElement])
Returns the top svg element for this specific chart. You can also pass in a new svg element however this is usually
handled as part of the dc internal. Resetting svg element on a chart outside of dc internal might have unexpected
consequences.
**/
_chart.svg = function (_) {
if (!arguments.length) return _svg;
_svg = _;
return _chart;
};
/**
#### .resetSvg()
Remove the chart's SVG elements from the dom and recreate the container SVG element.
**/
_chart.resetSvg = function () {
_chart.select("svg").remove();
return generateSvg();
};
function generateSvg() {
_svg = _chart.root().append("svg")
.attr("width", _chart.width())
.attr("height", _chart.height());
return _svg;
}
/**
#### .filterPrinter([filterPrinterFunction])
Set or get filter printer function. Filter printer function is used to generate human friendly text for filter value(s)
associated with the chart instance. By default dc charts shipped with a default filter printer implementation dc.printers.filter
that provides simple printing support for both single value and ranged filters.
**/
_chart.filterPrinter = function (_) {
if (!arguments.length) return _filterPrinter;
_filterPrinter = _;
return _chart;
};
/**
#### .turnOnControls() & .turnOffControls()
Turn on/off optional control elements within the root element. dc.js currently support the following html control elements.
* root.selectAll(".reset") elements are turned on if the chart has an active filter. This type of control elements are usually used to store reset link to allow user to reset filter on a certain chart. This element will be turned off automatically if the filter is cleared.
* root.selectAll(".filter") elements are turned on if the chart has an active filter. The text content of this element is then replaced with the current filter value using the filter printer function. This type of element will be turned off automatically if the filter is cleared.
**/
_chart.turnOnControls = function () {
if (_root) {
_chart.selectAll(".reset").style("display", null);
_chart.selectAll(".filter").text(_filterPrinter(_chart.filters())).style("display", null);
}
return _chart;
};
_chart.turnOffControls = function () {
if (_root) {
_chart.selectAll(".reset").style("display", "none");
_chart.selectAll(".filter").style("display", "none").text(_chart.filter());
}
return _chart;
};
/**
#### .transitionDuration([duration])
Set or get animation transition duration(in milliseconds) for specific chart instance. Default duration is 750ms.
**/
_chart.transitionDuration = function (d) {
if (!arguments.length) return _transitionDuration;
_transitionDuration = d;
return _chart;
};
_chart._mandatoryAttributes = function (_) {
if (!arguments.length) return _mandatoryAttributes;
_mandatoryAttributes = _;
return _chart;
};
function checkForMandatoryAttributes(a) {
if (!_chart[a] || !_chart[a]())
throw new dc.errors.InvalidStateException("Mandatory attribute chart." + a +
" is missing on chart[#" + _chart.anchorName() + "]");
}
/**
#### .render()
Invoke this method will force the chart to re-render everything from scratch. Generally it should be only used to
render the chart for the first time on the page or if you want to make sure everything is redrawn from scratch instead
of relying on the default incremental redrawing behaviour.
**/
_chart.render = function () {
_listeners.preRender(_chart);
if (_mandatoryAttributes)
_mandatoryAttributes.forEach(checkForMandatoryAttributes);
var result = _chart._doRender();
if (_legend) _legend.render();
_chart._activateRenderlets("postRender");
return result;
};
_chart._activateRenderlets = function (event) {
if (_chart.transitionDuration() > 0 && _svg) {
_svg.transition().duration(_chart.transitionDuration())
.each("end", function () {
runAllRenderlets();
if (event) _listeners[event](_chart);
});
} else {
runAllRenderlets();
if (event) _listeners[event](_chart);
}
};
/**
#### .redraw()
Calling redraw will cause the chart to re-render delta in data change incrementally. If there is no change in the
underlying data dimension then calling this method will have no effect on the chart. Most of the chart interaction in
dc library will automatically trigger this method through its internal event engine, therefore you only need to manually
invoke this function if data is manipulated outside of dc's control; for example if data is loaded on a periodic basis
in the background using crossfilter.add().
**/
_chart.redraw = function () {
_listeners.preRedraw(_chart);
var result = _chart._doRedraw();
if (_legend) _legend.render();
_chart._activateRenderlets("postRedraw");
return result;
};
_chart.redrawGroup = function () {
dc.redrawAll(_chart.chartGroup());
};
_chart._invokeFilteredListener = function (f) {
if (f !== undefined) _listeners.filtered(_chart, f);
};
_chart._invokeZoomedListener = function () {
_listeners.zoomed(_chart);
};
/**
#### .hasFilter([filter])
Check whether is any active filter or a specific filter is associated with particular chart instance.
This function is **not chainable**.
**/
_chart.hasFilter = function (filter) {
if (!arguments.length) return _filters.length > 0;
return _filters.indexOf(filter) >= 0;
};
function removeFilter(_) {
_filters.splice(_filters.indexOf(_), 1);
applyFilters();
_chart._invokeFilteredListener(_);
}
function addFilter(_) {
_filters.push(_);
applyFilters();
_chart._invokeFilteredListener(_);
}
function resetFilters() {
_filters = [];
applyFilters();
_chart._invokeFilteredListener(null);
}
function applyFilters() {
if (_chart.dimension() && _chart.dimension().filter) {
var fs = _filterHandler(_chart.dimension(), _filters);
_filters = fs ? fs : _filters;
}
}
_chart.replaceFilter = function (_) {
_filters = [];
_chart.filter(_);
};
/**
#### .filter([filterValue])
Filter the chart by the given value or return the current filter if the input parameter is missing.
```js
// filter by a single string
chart.filter("Sunday");
// filter by a single age
chart.filter(18);
```
**/
_chart.filter = function (_) {
if (!arguments.length) return _filters.length > 0 ? _filters[0] : null;
if (_ instanceof Array && _[0] instanceof Array && !_.isFiltered) {
_[0].forEach(function(d){
if (_chart.hasFilter(d)) {
_filters.splice(_filters.indexOf(d), 1);
} else {
_filters.push(d);
}
});
applyFilters();
_chart._invokeFilteredListener(_);
} else if (_ === null) {
resetFilters();
} else {
if (_chart.hasFilter(_))
removeFilter(_);
else
addFilter(_);
}
if (_root !== null && _chart.hasFilter()) {
_chart.turnOnControls();
} else {
_chart.turnOffControls();
}
return _chart;
};
/**
#### .filters()
Return all current filters. This method does not perform defensive cloning of the internal filter array before returning
therefore any modification of returned array will affact chart's internal filter storage.
**/
_chart.filters = function () {
return _filters;
};
_chart.highlightSelected = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, true);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
};
_chart.fadeDeselected = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, true);
};
_chart.resetHighlight = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
};
/**
#### .onClick(datum)
This function is passed to d3 as the onClick handler for each chart. By default it will filter the on the clicked datum
(as passed back to the callback) and redraw the chart group.
**/
_chart.onClick = function (d) {
var filter = _chart.keyAccessor()(d);
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
};
/**
#### .filterHandler([function])
Set or get filter handler. Filter handler is a function that performs the filter action on a specific dimension. Using
custom filter handler give you the flexibility to perform additional logic before or after filtering.
```js
// default filter handler
function(dimension, filter){
dimension.filter(filter); // perform filtering
return filter; // return the actual filter value
}
// custom filter handler
chart.filterHandler(function(dimension, filter){
var newFilter = filter + 10;
dimension.filter(newFilter);
return newFilter; // set the actual filter value to the new value
});
```
**/
_chart.filterHandler = function (_) {
if (!arguments.length) return _filterHandler;
_filterHandler = _;
return _chart;
};
// abstract function stub
_chart._doRender = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
_chart._doRedraw = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
_chart.legendables = function () {
// do nothing in base, should be overridden by sub-function
return [];
};
_chart.legendHighlight = function (d) {
// do nothing in base, should be overridden by sub-function
};
_chart.legendReset = function (d) {
// do nothing in base, should be overridden by sub-function
};
_chart.legendToggle = function (d) {
// do nothing in base, should be overriden by sub-function
};
_chart.isLegendableHidden = function (d) {
// do nothing in base, should be overridden by sub-function
return false;
};
/**
#### .keyAccessor([keyAccessorFunction])
Set or get the key accessor function. Key accessor function is used to retrieve key value in crossfilter group. Key
values are used differently in different charts, for example keys correspond to slices in pie chart and x axis position
in grid coordinate chart.
```js
// default key accessor
chart.keyAccessor(function(d) { return d.key; });
// custom key accessor for a multi-value crossfilter reduction
chart.keyAccessor(function(p) { return p.value.absGain; });
```
**/
_chart.keyAccessor = function (_) {
if (!arguments.length) return _keyAccessor;
_keyAccessor = _;
return _chart;
};
/**
#### .valueAccessor([valueAccessorFunction])
Set or get the value accessor function. Value accessor function is used to retrieve value in crossfilter group. Group
values are used differently in different charts, for example group values correspond to slices size in pie chart and y
axis position in grid coordinate chart.
```js
// default value accessor
chart.valueAccessor(function(d) { return d.value; });
// custom value accessor for a multi-value crossfilter reduction
chart.valueAccessor(function(p) { return p.value.percentageGain; });
```
**/
_chart.valueAccessor = function (_) {
if (!arguments.length) return _valueAccessor;
_valueAccessor = _;
return _chart;
};
/**
#### .label([labelFunction])
Set or get the label function. Chart class will use this function to render label for each child element in the chart,
i.e. a slice in a pie chart or a bubble in a bubble chart. Not every chart supports label function for example bar chart
and line chart do not use this function at all.
```js
// default label function just return the key
chart.label(function(d) { return d.key; });
// label function has access to the standard d3 data binding and can get quite complicated
chart.label(function(d) { return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)"; });
```
**/
_chart.label = function (_) {
if (!arguments.length) return _label;
_label = _;
_renderLabel = true;
return _chart;
};
/**
#### .renderLabel(boolean)
Turn on/off label rendering
**/
_chart.renderLabel = function (_) {
if (!arguments.length) return _renderLabel;
_renderLabel = _;
return _chart;
};
/**
#### .title([titleFunction])
Set or get the title function. Chart class will use this function to render svg title(usually interpreted by browser
as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart. Almost
every chart supports title function however in grid coordinate chart you need to turn off brush in order to use title
otherwise the brush layer will block tooltip trigger.
```js
// default title function just return the key
chart.title(function(d) { return d.key + ": " + d.value; });
// title function has access to the standard d3 data binding and can get quite complicated
chart.title(function(p) {
return p.key.getFullYear()
+ "\n"
+ "Index Gain: " + numberFormat(p.value.absGain) + "\n"
+ "Index Gain in Percentage: " + numberFormat(p.value.percentageGain) + "%\n"
+ "Fluctuation / Index Ratio: " + numberFormat(p.value.fluctuationPercentage) + "%";
});
```
**/
_chart.title = function (_) {
if (!arguments.length) return _title;
_title = _;
_renderTitle = true;
return _chart;
};
/**
#### .renderTitle(boolean)
Turn on/off title rendering
**/
_chart.renderTitle = function (_) {
if (!arguments.length) return _renderTitle;
_renderTitle = _;
return _chart;
};
/**
#### .renderlet(renderletFunction)
Renderlet is similar to an event listener on rendering event. Multiple renderlets can be added to an individual chart.
Every time when chart is rerendered or redrawn renderlet then will be invoked right after the chart finishes its own
drawing routine hence given you a way to override or modify certain behaviour. Renderlet function accepts the chart
instance as the only input parameter and you can either rely on dc API or use raw d3 to achieve pretty much any effect.
```js
// renderlet function
chart.renderlet(function(chart){
// mix of dc API and d3 manipulation
chart.select("g.y").style("display", "none");
// its a closure so you can also access other chart variable available in the closure scope
moveChart.filter(chart.filter());
});
```
**/
_chart.renderlet = function (_) {
_renderlets.push(_);
return _chart;
};
function runAllRenderlets() {
for (var i = 0; i < _renderlets.length; ++i) {
_renderlets[i](_chart);
}
}
/**
#### .chartGroup([group])
Get or set the chart group with which this chart belongs. Chart groups share common rendering events since it is
expected they share the same underlying crossfilter data set.
**/
_chart.chartGroup = function (_) {
if (!arguments.length) return _chartGroup;
_chartGroup = _;
return _chart;
};
/**
#### .expireCache()
Expire internal chart cache. dc.js chart cache some data internally on a per chart basis so it can speed up rendering
and avoid unnecessary calculation however under certain circumstances it might be useful to clear the cache e.g. after
you invoke crossfilter.add function or if you reset group or dimension post render it is always a good idea to clear
the cache to make sure charts are rendered properly.
**/
_chart.expireCache = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
/**
#### .legend([dc.legend])
Attach dc.legend widget to this chart. Legend widget will automatically draw legend labels based on the color setting
and names associated with each group.
```js
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
```
**/
_chart.legend = function (l) {
if (!arguments.length) return _legend;
_legend = l;
_legend.parent(_chart);
return _chart;
};
/**
#### .chartID()
Return the internal numeric ID of the chart.
**/
_chart.chartID = function () {
return _chart.__dc_flag__;
};
/**
#### .options(optionsObject)
Set chart options using a configuration object. Each object key will be call the fluent method of the same name to set that attribute for the chart.
Example:
```
chart.options({dimension: myDimension, group: myGroup});
```
**/
_chart.options = function(opts) {
for (var o in opts) {
if (typeof(_chart[o]) === 'function') {
_chart[o].call(_chart,opts[o]);
} else {
dc.logger.debug("Not a valid option setter name: " + o);
}
}
return _chart;
};
/**
## Listeners
All dc chart instance supports the following listeners.
#### .on("preRender", function(chart){...})
This listener function will be invoked before chart rendering.
#### .on("postRender", function(chart){...})
This listener function will be invoked after chart finish rendering including all renderlets' logic.
#### .on("preRedraw", function(chart){...})
This listener function will be invoked before chart redrawing.
#### .on("postRedraw", function(chart){...})
This listener function will be invoked after chart finish redrawing including all renderlets' logic.
#### .on("filtered", function(chart, filter){...})
This listener function will be invoked after a filter is applied, added or removed.
#### .on("zoomed", function(chart, filter){...})
This listener function will be invoked after a zoom is triggered.
**/
_chart.on = function (event, listener) {
_listeners[event] = listener;
return _chart;
};
return _chart;
};
/**
## Margin Mixin
Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid Charts.
**/
dc.marginMixin = function (_chart) {
var _margin = {top: 10, right: 50, bottom: 30, left: 30};
/**
#### .margins([margins])
Get or set the margins for a particular coordinate grid chart instance. The margins is stored as an associative Javascript
array. Default margins: {top: 10, right: 50, bottom: 30, left: 30}.
The margins can be accessed directly from the getter.
```js
var leftMargin = chart.margins().left; // 30 by default
chart.margins().left = 50;
leftMargin = chart.margins().left; // now 50
```
**/
_chart.margins = function (m) {
if (!arguments.length) return _margin;
_margin = m;
return _chart;
};
_chart.effectiveWidth = function () {
return _chart.width() - _chart.margins().left - _chart.margins().right;
};
_chart.effectiveHeight = function () {
return _chart.height() - _chart.margins().top - _chart.margins().bottom;
};
return _chart;
};
/**
## Color Mixin
Color Mixin is an abstract chart functional class created to provide universal coloring support as a mix-in for any concrete
chart implementation.
**/
dc.colorMixin = function(_chart) {
var _colors = d3.scale.category20c();
var _defaultAccessor = true;
var _colorAccessor = function(d) { return _chart.keyAccessor()(d); };
/**
#### .colors([colorScale])
Retrieve current color scale or set a new color scale. This methods accepts any
function the operate like a d3 scale. If not set the default is
`d3.scale.category20c()`.
```js
// alternate categorical scale
chart.colors(d3.scale.category20b());
// ordinal scale
chart.colors(d3.scale.ordinal().range(['red','green','blue']);
// convience method, the same as above
chart.ordinalColors(['red','green','blue']);
// set a linear scale
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
```
**/
_chart.colors = function(_) {
if (!arguments.length) return _colors;
if (_ instanceof Array) _colors = d3.scale.quantize().range(_); // depricated legacy support, note: this fails for ordinal domains
else _colors = d3.functor(_);
return _chart;
};
/**
#### .ordinalColors(r)
Convenience method to set the color scale to d3.scale.ordinal with range `r`.
**/
_chart.ordinalColors = function(r) {
return _chart.colors(d3.scale.ordinal().range(r));
};
/**
#### .linearColors(r)
Convenience method to set the color scale to an Hcl interpolated linear scale with range `r`.
**/
_chart.linearColors = function(r) {
return _chart.colors(d3.scale.linear()
.range(r)
.interpolate(d3.interpolateHcl));
};
/**
#### .colorAccessor([colorAccessorFunction])
Set or get color accessor function. This function will be used to map a data point on crossfilter group to a specific
color value on the color scale. Default implementation of this function simply returns the next color on the scale using
the index of a group.
```js
// default index based color accessor
.colorAccessor(function(d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function(d){return d.value.absGain;})
```
**/
_chart.colorAccessor = function(_){
if(!arguments.length) return _colorAccessor;
_colorAccessor = _;
_defaultAccessor = false;
return _chart;
};
_chart.defaultColorAccessor = function() {
return _defaultAccessor;
};
/**
#### .colorDomain([domain])
Set or get the current domain for the color mapping function. The domain must be supplied as an array.
Note: previously this method accepted a callback function. Instead you may use a custom scale set by `.colors`.
**/
_chart.colorDomain = function(_){
if(!arguments.length) return _colors.domain();
_colors.domain(_);
return _chart;
};
/**
#### .calculateColorDomain()
Set the domain by determining the min and max values as retrived by `.colorAccessor` over the chart's dataset.
**/
_chart.calculateColorDomain = function () {
var newDomain = [d3.min(_chart.data(), _chart.colorAccessor()),
d3.max(_chart.data(), _chart.colorAccessor())];
_colors.domain(newDomain);
};
/**
#### .getColor(d [, i])
Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.
**/
_chart.getColor = function(d, i){
return _colors(_colorAccessor.call(this,d, i));
};
_chart.colorCalculator = function(_){
if(!arguments.length) return _chart.getColor;
_chart.getColor = _;
return _chart;
};
return _chart;
};
/**
## Coordinate Grid Mixin
Includes: [Color Mixin](#color-mixin), [Margin Mixin](#margin-mixin), [Base Mixin](#base-mixin)
Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based concrete chart types,
i.e. bar chart, line chart, and bubble chart.
**/
dc.coordinateGridMixin = function (_chart) {
var GRID_LINE_CLASS = "grid-line";
var HORIZONTAL_CLASS = "horizontal";
var VERTICAL_CLASS = "vertical";
var Y_AXIS_LABEL_CLASS = 'y-axis-label';
var X_AXIS_LABEL_CLASS = 'x-axis-label';
var DEFAULT_AXIS_LABEL_PADDING = 12;
_chart = dc.colorMixin(dc.marginMixin(dc.baseMixin(_chart)));
_chart.colors(d3.scale.category10());
_chart._mandatoryAttributes().push('x');
var _parent;
var _g;
var _chartBodyG;
var _x;
var _xOriginalDomain;
var _xAxis = d3.svg.axis().orient("bottom");
var _xUnits = dc.units.integers;
var _xAxisPadding = 0;
var _xElasticity = false;
var _xAxisLabel;
var _xAxisLabelPadding = 0;
var _y;
var _yAxis = d3.svg.axis().orient("left");
var _yAxisPadding = 0;
var _yElasticity = false;
var _yAxisLabel;
var _yAxisLabelPadding = 0;
var _brush = d3.svg.brush();
var _brushOn = true;
var _round;
var _renderHorizontalGridLine = false;
var _renderVerticalGridLine = false;
var _refocused = false;
var _unitCount;
var _zoomScale = [1, Infinity];
var _zoomOutRestrict = true;
var _zoom = d3.behavior.zoom().on("zoom", zoomHandler);
var _nullZoom = d3.behavior.zoom().on("zoom", null);
var _hasBeenMouseZoomable = false;
var _rangeChart;
var _focusChart;
var _mouseZoomable = false;
var _clipPadding = 0;
var _outerRangeBandPadding = 0.5;
var _rangeBandPadding = 0;
var _useRightYAxis = false;
_chart.rescale = function () {
_unitCount = undefined;
};
/**
#### .rangeChart([chart])
Get or set the range selection chart associated with this instance. Setting the range selection chart using this function
will automatically update its selection brush when the current chart zooms in. In return the given range chart will also
automatically attach this chart as its focus chart hence zoom in when range brush updates. See the
[Nasdaq 100 Index](http://dc-js.github.com/dc.js/) example for this effect in action.
**/
_chart.rangeChart = function (_) {
if (!arguments.length) return _rangeChart;
_rangeChart = _;
_rangeChart.focusChart(_chart);
return _chart;
};
/**
#### .zoomScale([extent])
Get or set the scale extent for mouse zooms.
**/
_chart.zoomScale = function (_) {
if (!arguments.length) return _zoomScale;
_zoomScale = _;
return _chart;
};
/**
#### .zoomOutRestrict([true/false])
Get or set the zoom restriction for the chart. If true limits the zoom to origional domain of the chart.
**/
_chart.zoomOutRestrict = function (r) {
if (!arguments.length) return _zoomOutRestrict;
_zoomScale[0] = r ? 1 : 0;
_zoomOutRestrict = r;
return _chart;
};
_chart._generateG = function (parent) {
if (parent === undefined)
_parent = _chart.svg();
else
_parent = parent;
_g = _parent.append("g");
_chartBodyG = _g.append("g").attr("class", "chart-body")
.attr("transform", "translate(" + _chart.margins().left + ", " + _chart.margins().top + ")")
.attr("clip-path", "url(#" + getClipPathId() + ")");
return _g;
};
/**
#### .g([gElement])
Get or set the root g element. This method is usually used to retrieve the g element in order to overlay custom svg drawing
programatically. **Caution**: The root g element is usually generated by dc.js internals, and resetting it might produce unpredictable result.
**/
_chart.g = function (_) {
if (!arguments.length) return _g;
_g = _;
return _chart;
};
/**
#### .mouseZoomable([boolean])
Set or get mouse zoom capability flag (default: false). When turned on the chart will be zoomable through mouse wheel
. If range selector chart is also attached zooming will also update the range selection brush on associated range
selector chart.
**/
_chart.mouseZoomable = function (z) {
if (!arguments.length) return _mouseZoomable;
_mouseZoomable = z;
return _chart;
};
/**
#### .chartBodyG()
Retreive the svg group for the chart body.
**/
_chart.chartBodyG = function (_) {
if (!arguments.length) return _chartBodyG;
_chartBodyG = _;
return _chart;
};
/**
#### .x([xScale]) - **mandatory**
Get or set the x scale. x scale could be any [d3 quatitive scales](https://github.com/mbostock/d3/wiki/Quantitative-Scales).
For example a time scale for histogram or a linear/ordinal scale for visualizing data distribution.
```js
// set x to a linear scale
chart.x(d3.scale.linear().domain([-2500, 2500]))
// set x to a time scale to generate histogram
chart.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))
```
**/
_chart.x = function (_) {
if (!arguments.length) return _x;
_x = _;
_xOriginalDomain = _x.domain();
return _chart;
};
_chart.xOriginalDomain = function () {
return _xOriginalDomain;
};
/**
#### .xUnits([xUnits function])
Set or get the xUnits function. xUnits function is the coordinate grid chart uses to calculate number of data
projections on x axis such as number bars for a bar chart and number of dots for a line chart. This function is
expected to return an Javascript array of all data points on x axis. d3 time range functions d3.time.days, d3.time.months,
and d3.time.years are all valid xUnits function. dc.js also provides a few units function, see [Utilities](#utilities)
section for a list of built-in units functions. Default xUnits function is dc.units.integers.
```js
// set x units to day for a histogram
chart.xUnits(d3.time.days);
// set x units to month for a histogram
chart.xUnits(d3.time.months);
```
Custom xUnits function can be easily created using as long as it follows the following inteface:
```js
// units in integer
function(start, end, xDomain) {
// simply calculates how many integers in the domain
return Math.abs(end - start);
};
// fixed units
function(start, end, xDomain) {
// be aware using fixed units will disable the focus/zoom ability on the chart
return 1000;
};
```
**/
_chart.xUnits = function (_) {
if (!arguments.length) return _xUnits;
_xUnits = _;
return _chart;
};
/**
#### .xAxis([xAxis])
Set or get the x axis used by a particular coordinate grid chart instance. This function is most useful when certain x
axis customization is required. x axis in dc.js is simply an instance of
[d3 axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis) therefore it supports any valid d3 axis
manipulation. **Caution**: The x axis is typically generated by dc chart internal, resetting it might cause unexpected
outcome.
```js
// customize x axis tick format
chart.xAxis().tickFormat(function(v) {return v + "%";});
// customize x axis tick values
chart.xAxis().tickValues([0, 100, 200, 300]);
```
**/
_chart.xAxis = function (_) {
if (!arguments.length) return _xAxis;
_xAxis = _;
return _chart;
};
/**
#### .elasticX([boolean])
Turn on/off elastic x axis. If x axis elasticity is turned on, then the grid chart will attempt to generate and
recalculate x axis range whenever redraw event is triggered.
**/
_chart.elasticX = function (_) {
if (!arguments.length) return _xElasticity;
_xElasticity = _;
return _chart;
};
/**
#### .xAxisPadding([padding])
Set or get x axis padding when elastic x axis is turned on. The padding will be added to both end of the x axis if and
only if elasticX is turned on otherwise it will be simply ignored.
* padding - could be integer or percentage in string (e.g. "10%"). Padding can be applied to number or date.
When padding with date, integer represents number of days being padded while percentage string will be treated
as number.
**/
_chart.xAxisPadding = function (_) {
if (!arguments.length) return _xAxisPadding;
_xAxisPadding = _;
return _chart;
};
/**
#### .xUnitCount()
Returns the number of units displayed on the x axis using the unit measure configured by .xUnits.
**/
_chart.xUnitCount = function () {
if (_unitCount === undefined) {
var units = _chart.xUnits()(_chart.x().domain()[0], _chart.x().domain()[1], _chart.x().domain());
if (units instanceof Array)
_unitCount = units.length;
else
_unitCount = units;
}
return _unitCount;
};
_chart.useRightYAxis = function (_) {
if (!arguments.length) return _useRightYAxis;
_useRightYAxis = _;
return _chart;
};
/**
#### isOrdinal()
Returns true if the chart is using ordinal xUnits, false otherwise. Most charts must behave somewhat
differently when with ordinal data and use the result of this method to trigger those special case.
**/
_chart.isOrdinal = function () {
return _chart.xUnits() === dc.units.ordinal;
};
_chart._ordinalXDomain = function() {
var groups = _chart._computeOrderedGroups(_chart.data());
return groups.map(_chart.keyAccessor());
};
function prepareXAxis(g) {
if (_chart.elasticX() && !_chart.isOrdinal()) {
_x.domain([_chart.xAxisMin(), _chart.xAxisMax()]);
}
else if (_chart.isOrdinal() && _x.domain().length===0) {
_x.domain(_chart._ordinalXDomain());
}
if (_chart.isOrdinal()) {
_x.rangeBands([0,_chart.xAxisLength()],_rangeBandPadding,_outerRangeBandPadding);
} else {
_x.range([0, _chart.xAxisLength()]);
}
_xAxis = _xAxis.scale(_chart.x());
renderVerticalGridLines(g);
}
_chart.renderXAxis = function (g) {
var axisXG = g.selectAll("g.x");
if (axisXG.empty())
axisXG = g.append("g")
.attr("class", "axis x")
.attr("transform", "translate(" + _chart.margins().left + "," + _chart._xAxisY() + ")");
var axisXLab = g.selectAll("text."+X_AXIS_LABEL_CLASS);
if (axisXLab.empty() && _chart.xAxisLabel())
axisXLab = g.append('text')
.attr("transform", "translate(" + (_chart.margins().left + _chart.xAxisLength() / 2) + "," + (_chart.height() - _xAxisLabelPadding) + ")")
.attr('class', X_AXIS_LABEL_CLASS)
.attr('text-anchor', 'middle')
.text(_chart.xAxisLabel());
if (_chart.xAxisLabel() && axisXLab.text() != _chart.xAxisLabel())
axisXLab.text(_chart.xAxisLabel());
dc.transition(axisXG, _chart.transitionDuration())
.call(_xAxis);
};
function renderVerticalGridLines(g) {
var gridLineG = g.selectAll("g." + VERTICAL_CLASS);
if (_renderVerticalGridLine) {
if (gridLineG.empty())
gridLineG = g.insert("g", ":first-child")
.attr("class", GRID_LINE_CLASS + " " + VERTICAL_CLASS)
.attr("transform", "translate(" + _chart.margins().left + "," + _chart.margins().top + ")");
var ticks = _xAxis.tickValues() ? _xAxis.tickValues() : _x.ticks(_xAxis.ticks()[0]);
var lines = gridLineG.selectAll("line")
.data(ticks);
// enter
var linesGEnter = lines.enter()
.append("line")
.attr("x1", function (d) {
return _x(d);
})
.attr("y1", _chart._xAxisY() - _chart.margins().top)
.attr("x2", function (d) {
return _x(d);
})
.attr("y2", 0)
.attr("opacity", 0);
dc.transition(linesGEnter, _chart.transitionDuration())
.attr("opacity", 1);
// update
dc.transition(lines, _chart.transitionDuration())
.attr("x1", function (d) {
return _x(d);
})
.attr("y1", _chart._xAxisY() - _chart.margins().top)
.attr("x2", function (d) {
return _x(d);
})
.attr("y2", 0);
// exit
lines.exit().remove();
}
else {
gridLineG.selectAll("line").remove();
}
}
_chart._xAxisY = function () {
return (_chart.height() - _chart.margins().bottom);
};
_chart.xAxisLength = function () {
return _chart.effectiveWidth();
};
/**
#### .xAxisLabel([labelText, [, padding]])
Set or get the x axis label. If setting the label, you may optionally include additional padding to
the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
**/
_chart.xAxisLabel = function (_, padding) {
if (!arguments.length) return _xAxisLabel;
_xAxisLabel = _;
_chart.margins().bottom -= _xAxisLabelPadding;
_xAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
_chart.margins().bottom += _xAxisLabelPadding;
return _chart;
};
_chart._prepareYAxis = function(g) {
if (_y === undefined || _chart.elasticY()) {
_y = d3.scale.linear();
_y.domain([_chart.yAxisMin(), _chart.yAxisMax()]).rangeRound([_chart.yAxisHeight(), 0]);
}
_y.range([_chart.yAxisHeight(), 0]);
_yAxis = _yAxis.scale(_y);
if (_useRightYAxis)
_yAxis.orient("right");
_chart._renderHorizontalGridLinesForAxis(g, _y, _yAxis);
};
_chart.renderYAxisLabel = function(axisClass, text, rotation, labelXPosition) {
labelXPosition = labelXPosition || _yAxisLabelPadding;
var axisYLab = _chart.g().selectAll("text." + Y_AXIS_LABEL_CLASS + "." + axisClass + "-label");
if (axisYLab.empty() && text) {
var labelYPosition = (_chart.margins().top + _chart.yAxisHeight() / 2);
axisYLab = _chart.g().append('text')
.attr("transform", "translate(" + labelXPosition + "," + labelYPosition + "),rotate(" + rotation + ")")
.attr('class', Y_AXIS_LABEL_CLASS + " " + axisClass + "-label")
.attr('text-anchor', 'middle')
.text(text);
}
if (text && axisYLab.text() != text) {
axisYLab.text(text);
}
};
_chart.renderYAxisAt = function (axisClass, axis, position){
var axisYG = _chart.g().selectAll("g." + axisClass);
if (axisYG.empty()) {
axisYG = _chart.g().append("g")
.attr("class", "axis " + axisClass)
.attr("transform", "translate(" + position + "," + _chart.margins().top + ")");
}
dc.transition(axisYG, _chart.transitionDuration()).call(axis);
};
_chart.renderYAxis = function () {
var axisPosition = _useRightYAxis ? (_chart.width() - _chart.margins().right) : _chart._yAxisX();
_chart.renderYAxisAt("y", _yAxis, axisPosition);
var labelPosition = _useRightYAxis ? (_chart.width() - _yAxisLabelPadding) : _yAxisLabelPadding;
var rotation = _useRightYAxis ? 90 : -90;
_chart.renderYAxisLabel("y", _chart.yAxisLabel(), rotation, labelPosition);
};
_chart._renderHorizontalGridLinesForAxis = function (g, scale, axis) {
var gridLineG = g.selectAll("g." + HORIZONTAL_CLASS);
if (_renderHorizontalGridLine) {
var ticks = axis.tickValues() ? axis.tickValues() : scale.ticks(axis.ticks()[0]);
if (gridLineG.empty()) {
gridLineG = g.insert("g", ":first-child")
.attr("class", GRID_LINE_CLASS + " " + HORIZONTAL_CLASS)
.attr("transform", "translate(" + _chart.margins().left + "," + _chart.margins().top + ")");
}
var lines = gridLineG.selectAll("line")
.data(ticks);
// enter
var linesGEnter = lines.enter()
.append("line")
.attr("x1", 1)
.attr("y1", function (d) {
return scale(d);
})
.attr("x2", _chart.xAxisLength())
.attr("y2", function (d) {
return scale(d);
})
.attr("opacity", 0);
dc.transition(linesGEnter, _chart.transitionDuration())
.attr("opacity", 1);
// update
dc.transition(lines, _chart.transitionDuration())
.attr("x1", 1)
.attr("y1", function (d) {
return scale(d);
})
.attr("x2", _chart.xAxisLength())
.attr("y2", function (d) {
return scale(d);
});
// exit
lines.exit().remove();
}
else {
gridLineG.selectAll("line").remove();
}
};
_chart._yAxisX = function () {
return _chart.useRightYAxis() ? _chart.width() - _chart.margins().right : _chart.margins().left;
};
/**
#### .yAxisLabel([labelText, [, padding]])
Set or get the y axis label. If setting the label, you may optionally include additional padding to
the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
**/
_chart.yAxisLabel = function (_, padding) {
if (!arguments.length) return _yAxisLabel;
_yAxisLabel = _;
_chart.margins().left -= _yAxisLabelPadding;
_yAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
_chart.margins().left += _yAxisLabelPadding;
return _chart;
};
/**
#### .y([yScale])
Get or set the y scale. y scale is typically automatically generated by the chart implementation.
**/
_chart.y = function (_) {
if (!arguments.length) return _y;
_y = _;
return _chart;
};
/**
#### .yAxis([yAxis])
Set or get the y axis used by a particular coordinate grid chart instance. This function is most useful when certain y
axis customization is required. y axis in dc.js is simply an instance
of [d3 axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis) therefore it supports any valid d3 axis
manipulation. **Caution**: The y axis is typically generated by dc chart internal, resetting it might cause unexpected
outcome.
```js
// customize y axis tick format
chart.yAxis().tickFormat(function(v) {return v + "%";});
// customize y axis tick values
chart.yAxis().tickValues([0, 100, 200, 300]);
```
**/
_chart.yAxis = function (y) {
if (!arguments.length) return _yAxis;
_yAxis = y;
return _chart;
};
/**
#### .elasticY([boolean])
Turn on/off elastic y axis. If y axis elasticity is turned on, then the grid chart will attempt to generate and recalculate
y axis range whenever redraw event is triggered.
**/
_chart.elasticY = function (_) {
if (!arguments.length) return _yElasticity;
_yElasticity = _;
return _chart;
};
/**
#### .renderHorizontalGridLines([boolean])
Turn on/off horizontal grid lines.
**/
_chart.renderHorizontalGridLines = function (_) {
if (!arguments.length) return _renderHorizontalGridLine;
_renderHorizontalGridLine = _;
return _chart;
};
/**
#### .renderVerticalGridLines([boolean])
Turn on/off vertical grid lines.
**/
_chart.renderVerticalGridLines = function (_) {
if (!arguments.length) return _renderVerticalGridLine;
_renderVerticalGridLine = _;
return _chart;
};
/**
#### .xAxisMin()
Return the minimum x value to diplay in the chart. Includes xAxisPadding if set.
**/
_chart.xAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.keyAccessor()(e);
});
return dc.utils.subtract(min, _xAxisPadding);
};
/**
#### .xAxisMax()
Return the maximum x value to diplay in the chart. Includes xAxisPadding if set.
**/
_chart.xAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.keyAccessor()(e);
});
return dc.utils.add(max, _xAxisPadding);
};
/**
#### .yAxisMin()
Return the minimum y value to diplay in the chart. Includes yAxisPadding if set.
**/
_chart.yAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.valueAccessor()(e);
});
return dc.utils.subtract(min, _yAxisPadding);
};
/**
#### .yAxisMax()
Return the maximum y value to diplay in the chart. Includes yAxisPadding if set.
**/
_chart.yAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.valueAccessor()(e);
});
return dc.utils.add(max, _yAxisPadding);
};
/**
#### .yAxisPadding([padding])
if elasticY is turned on otherwise it will be simply ignored.
Set or get y axis padding when elastic y axis is turned on. The padding will be added to the top of the y axis if and only
* padding - could be integer or percentage in string (e.g. "10%"). Padding can be applied to number or date.
When padding with date, integer represents number of days being padded while percentage string will be treated
as number.
**/
_chart.yAxisPadding = function (_) {
if (!arguments.length) return _yAxisPadding;
_yAxisPadding = _;
return _chart;
};
_chart.yAxisHeight = function () {
return _chart.effectiveHeight();
};
/**
#### .round([rounding function])
Set or get the rounding function for x axis. Rounding is mainly used to provide stepping capability when in place
selection based filter is enable.
```js
// set x unit round to by month, this will make sure range selection brash will
// extend on a month-by-month basis
chart.round(d3.time.month.round);
```
**/
_chart.round = function (_) {
if (!arguments.length) return _round;
_round = _;
return _chart;
};
_chart._rangeBandPadding = function (_) {
if (!arguments.length) return _rangeBandPadding;
_rangeBandPadding = _;
return _chart;
};
_chart._outerRangeBandPadding = function (_) {
if (!arguments.length) return _outerRangeBandPadding;
_outerRangeBandPadding = _;
return _chart;
};
dc.override(_chart, "filter", function (_) {
if (!arguments.length) return _chart._filter();
_chart._filter(_);
if (_) {
_chart.brush().extent(_);
} else {
_chart.brush().clear();
}
return _chart;
});
_chart.brush = function (_) {
if (!arguments.length) return _brush;
_brush = _;
return _chart;
};
function brushHeight() {
return _chart._xAxisY() - _chart.margins().top;
}
_chart.renderBrush = function (g) {
if (_brushOn) {
_brush.on("brush", _chart._brushing);
_brush.on("brushstart", _chart._disableMouseZoom);
_brush.on("brushend", configureMouseZoom);
var gBrush = g.append("g")
.attr("class", "brush")
.attr("transform", "translate(" + _chart.margins().left + "," + _chart.margins().top + ")")
.call(_brush.x(_chart.x()));
_chart.setBrushY(gBrush);
_chart.setHandlePaths(gBrush);
if (_chart.hasFilter()) {
_chart.redrawBrush(g);
}
}
};
_chart.setHandlePaths = function (gBrush) {
gBrush.selectAll(".resize").append("path").attr("d", _chart.resizeHandlePath);
};
_chart.setBrushY = function(gBrush){
gBrush.selectAll("rect").attr("height", brushHeight());
};
_chart.extendBrush = function () {
var extent = _brush.extent();
if (_chart.round()) {
extent[0] = extent.map(_chart.round())[0];
extent[1] = extent.map(_chart.round())[1];
_g.select(".brush")
.call(_brush.extent(extent));
}
return extent;
};
_chart.brushIsEmpty = function (extent) {
return _brush.empty() || !extent || extent[1] <= extent[0];
};
_chart._brushing = function() {
var extent = _chart.extendBrush();
_chart.redrawBrush(_g);
if (_chart.brushIsEmpty(extent)) {
dc.events.trigger(function () {
_chart.filter(null);
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
} else {
var rangedFilter = dc.filters.RangedFilter(extent[0], extent[1]);
dc.events.trigger(function () {
_chart.replaceFilter(rangedFilter);
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
}
};
_chart.redrawBrush = function (g) {
if (_brushOn) {
if (_chart.filter() && _chart.brush().empty())
_chart.brush().extent(_chart.filter());
var gBrush = g.select("g.brush");
gBrush.call(_chart.brush().x(_chart.x()));
_chart.setBrushY(gBrush);
}
_chart.fadeDeselectedArea();
};
_chart.fadeDeselectedArea = function () {
// do nothing, sub-chart should override this function
};
// borrowed from Crossfilter example
_chart.resizeHandlePath = function (d) {
var e = +(d == "e"), x = e ? 1 : -1, y = brushHeight() / 3;
/*jshint -W014 */
return "M" + (0.5 * x) + "," + y
+ "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
+ "V" + (2 * y - 6)
+ "A6,6 0 0 " + e + " " + (0.5 * x) + "," + (2 * y)
+ "Z"
+ "M" + (2.5 * x) + "," + (y + 8)
+ "V" + (2 * y - 8)
+ "M" + (4.5 * x) + "," + (y + 8)
+ "V" + (2 * y - 8);
/*jshint +W014 */
};
function getClipPathId() {
return _chart.anchorName() + "-clip";
}
/**
#### .clipPadding([padding])
Get or set padding in pixel for clip path. Once set padding will be applied evenly to top, left, right, and bottom padding
when clip path is generated. If set to zero, then the clip area will be exactly the chart body area minus the margins.
Default: 5
**/
_chart.clipPadding = function (p) {
if (!arguments.length) return _clipPadding;
_clipPadding = p;
return _chart;
};
function generateClipPath() {
var defs = dc.utils.appendOrSelect(_parent, "defs");
var chartBodyClip = dc.utils.appendOrSelect(defs, "clipPath").attr("id", getClipPathId());
var padding = _clipPadding * 2;
dc.utils.appendOrSelect(chartBodyClip, "rect")
.attr("width", _chart.xAxisLength() + padding)
.attr("height", _chart.yAxisHeight() + padding);
}
_chart._preprocessData = function() {};
_chart._doRender = function () {
_chart.resetSvg();
_chart._preprocessData();
_chart._generateG();
generateClipPath();
drawChart(true);
configureMouseZoom();
return _chart;
};
_chart._doRedraw = function () {
_chart._preprocessData();
drawChart(false);
return _chart;
};
function drawChart (render) {
if (_chart.isOrdinal())
_brushOn = false;
prepareXAxis(_chart.g());
_chart._prepareYAxis(_chart.g());
_chart.plotData();
if (_chart.elasticX() || _refocused || render)
_chart.renderXAxis(_chart.g());
if (_chart.elasticY() || render)
_chart.renderYAxis(_chart.g());
if (render)
_chart.renderBrush(_chart.g());
else
_chart.redrawBrush(_chart.g());
}
function configureMouseZoom () {
if (_mouseZoomable) {
_chart._enableMouseZoom();
}
else if (_hasBeenMouseZoomable) {
_chart._disableMouseZoom();
}
}
_chart._enableMouseZoom = function () {
_hasBeenMouseZoomable = true;
_zoom.x(_chart.x())
.scaleExtent(_zoomScale)
.size([_chart.width(),_chart.height()]);
_chart.root().call(_zoom);
};
_chart._disableMouseZoom = function () {
_chart.root().call(_nullZoom);
};
function zoomHandler() {
_refocused = true;
if (_zoomOutRestrict) {
_chart.x().domain(constrainRange(_chart.x().domain(), _xOriginalDomain));
if (_rangeChart) {
_chart.x().domain(constrainRange(_chart.x().domain(), _rangeChart.x().domain()));
}
}
var domain = _chart.x().domain();
var domFilter = dc.filters.RangedFilter(domain[0], domain[1]);
_chart.replaceFilter(domFilter);
_chart.rescale();
_chart.redraw();
if (_rangeChart && !rangesEqual(_chart.filter(), _rangeChart.filter())) {
dc.events.trigger( function () {
_rangeChart.replaceFilter(domFilter);
_rangeChart.redraw();
});
}
_chart._invokeZoomedListener();
dc.events.trigger(function () {
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
_refocused = !rangesEqual(domain, _xOriginalDomain);
}
function constrainRange(range, constraint) {
var constrainedRange = [];
constrainedRange[0] = d3.max([range[0], constraint[0]]);
constrainedRange[1] = d3.min([range[1], constraint[1]]);
return constrainedRange;
}
/**
#### .focus([range])
Zoom this chart to focus on the given range. The given range should be an array containing only 2 element([start, end]) defining an range in x domain. If the range is not given or set to null, then the zoom will be reset. _For focus to work elasticX has to be turned off otherwise focus will be ignored._
```js
chart.renderlet(function(chart){
// smooth the rendering through event throttling
dc.events.trigger(function(){
// focus some other chart to the range selected by user on this chart
someOtherChart.focus(chart.filter());
});
})
```
**/
_chart.focus = function (range) {
if (hasRangeSelected(range))
_chart.x().domain(range);
else
_chart.x().domain(_xOriginalDomain);
_zoom.x(_chart.x());
zoomHandler();
};
_chart.refocused = function () {
return _refocused;
};
_chart.focusChart = function (c) {
if (!arguments.length) return _focusChart;
_focusChart = c;
_chart.on("filtered", function (chart) {
if (!chart.filter()) {
dc.events.trigger(function() {
_focusChart.x().domain(_focusChart.xOriginalDomain());
});
} else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
dc.events.trigger(function () {
_focusChart.focus(chart.filter());
});
}
});
return _chart;
};
function rangesEqual(range1, range2) {
if (!range1 && !range2) {
return true;
}
else if (!range1 || !range2) {
return false;
}
else if (range1.length === 0 && range2.length === 0) {
return true;
}
else if (range1[0].valueOf() === range2[0].valueOf() &&
range1[1].valueOf() === range2[1].valueOf()) {
return true;
}
else return false;
}
/**
#### .brushOn([boolean])
Turn on/off the brush based in-place range filter. When the brush is on then user will be able to simply drag the mouse
across the chart to perform range filtering based on the extend of the brush. However turning on brush filter will essentially
disable other interactive elements on the chart such as the highlighting, tool-tip, and reference lines on a chart. Zooming will still
be possible if enabled, but only via scrolling (panning will be disabled.) Default value is "true".
**/
_chart.brushOn = function (_) {
if (!arguments.length) return _brushOn;
_brushOn = _;
return _chart;
};
function hasRangeSelected(range) {
return range instanceof Array && range.length > 1;
}
return _chart;
};
/**
## Stack Mixin
Stack Mixin is an mixin that provides cross-chart support of stackability using d3.layout.stack.
**/
dc.stackMixin = function (_chart) {
var _stackLayout = d3.layout.stack()
.values(prepareValues);
var _stack = [];
var _titles = {};
var _hidableStacks = false;
function prepareValues(layer, layerIdx) {
var valAccessor = layer.accessor || _chart.valueAccessor();
layer.name = String(layer.name || layerIdx);
layer.values = layer.group.all().map(function(d,i) {
return {x: _chart.keyAccessor()(d,i),
y: layer.hidden ? null : valAccessor(d,i),
data: d,
layer: layer.name,
hidden: layer.hidden};
});
layer.values = layer.values.filter(domainFilter());
return layer.values;
}
function domainFilter() {
if (!_chart.x()) return d3.functor(true);
var xDomain = _chart.x().domain();
if (_chart.isOrdinal()) {
// TODO #416
//var domainSet = d3.set(xDomain);
return function(p) {
return true; //domainSet.has(p.x);
};
}
return function(p) {
//return true;
return p.x >= xDomain[0] && p.x <= xDomain[xDomain.length-1];
};
}
/**
#### .stack(group[, name, accessor])
Stack a new crossfilter group into this chart with optionally a custom value accessor. All stacks in the same chart will
share the same key accessor therefore share the same set of keys. In more concrete words, imagine in a stacked bar chart
all bars will be positioned using the same set of keys on the x axis while stacked vertically. If name is specified then
it will be used to generate legend label.
```js
// stack group using default accessor
chart.stack(valueSumGroup)
// stack group using custom accessor
.stack(avgByDayGroup, function(d){return d.value.avgByDay;});
```
**/
_chart.stack = function (group, name, accessor) {
if (!arguments.length) return _stack;
if (arguments.length <= 2)
accessor = name;
var layer = {group:group};
if (typeof name === 'string') layer.name = name;
if (typeof accessor === 'function') layer.accessor = accessor;
_stack.push(layer);
return _chart;
};
dc.override(_chart,'group', function (g,n,f) {
if (!arguments.length) return _chart._group();
_stack = [];
_titles = {};
_chart.stack(g,n);
if (f) _chart.valueAccessor(f);
return _chart._group(g,n);
});
/**
#### .hidableStacks([boolean])
Allow named stacks to be hidden or shown by clicking on legend items.
This does not affect the behavior of hideStack or showStack.
**/
_chart.hidableStacks = function(_) {
if (!arguments.length) return _hidableStacks;
_hidableStacks = _;
return _chart;
};
function findLayerByName(n) {
var i = _stack.map(dc.pluck('name')).indexOf(n);
return _stack[i];
}
/**
#### .hideStack(name)
Hide all stacks on the chart with the given name.
The chart must be re-rendered for this change to appear.
**/
_chart.hideStack = function (stackName) {
var layer = findLayerByName(stackName);
if (layer) layer.hidden = true;
return _chart;
};
/**
#### .showStack(name)
Show all stacks on the chart with the given name.
The chart must be re-rendered for this change to appear.
**/
_chart.showStack = function (stackName) {
var layer = findLayerByName(stackName);
if (layer) layer.hidden = false;
return _chart;
};
_chart.getValueAccessorByIndex = function (index) {
return _stack[index].accessor || _chart.valueAccessor();
};
_chart.yAxisMin = function () {
var min = d3.min(flattenStack(), function (p) {
return (p.y + p.y0 < p.y0) ? (p.y + p.y0) : p.y0;
});
return dc.utils.subtract(min, _chart.yAxisPadding());
};
_chart.yAxisMax = function () {
var max = d3.max(flattenStack(), function (p) {
return p.y + p.y0;
});
return dc.utils.add(max, _chart.yAxisPadding());
};
function flattenStack() {
return _chart.data().reduce(function(all,layer) {
return all.concat(layer.values);
},[]);
}
_chart.xAxisMin = function () {
var min = d3.min(flattenStack(), dc.pluck('x'));
return dc.utils.subtract(min, _chart.xAxisPadding());
};
_chart.xAxisMax = function () {
var max = d3.max(flattenStack(), dc.pluck('x'));
return dc.utils.add(max, _chart.xAxisPadding());
};
/**
#### .title([stackName], [titleFunction])
Set or get the title function. Chart class will use this function to render svg title (usually interpreted by browser
as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart. Almost
every chart supports title function however in grid coordinate chart you need to turn off brush in order to use title
otherwise the brush layer will block tooltip trigger.
If the first argument is a stack name, the title function will get or set the title for that stack. If stackName
is not provided, the first stack is implied.
```js
// set a title function on "first stack"
chart.title("first stack", function(d) { return d.key + ": " + d.value; });
// get a title function from "second stack"
var secondTitleFunction = chart.title("second stack");
);
```
**/
dc.override(_chart, "title", function (stackName, titleAccessor) {
if (!stackName) return _chart._title();
if (typeof stackName === 'function') return _chart._title(stackName);
if (stackName == _chart._groupName && typeof titleAccessor === 'function')
return _chart._title(titleAccessor);
if (typeof titleAccessor !== 'function') return _titles[stackName] || _chart._title();
_titles[stackName] = titleAccessor;
return _chart;
});
_chart.stackLayout = function (stack) {
if (!arguments.length) return _stackLayout;
_stackLayout = stack;
return _chart;
};
function visability(l) {
return !l.hidden;
}
_chart.data(function() {
// return _stackLayout(_stack);
var layers = _stack.filter(visability);
return layers.length ? _chart.stackLayout()(layers) : [];
});
_chart._ordinalXDomain = function () {
return flattenStack().map(dc.pluck('x'));
};
_chart.colorAccessor(function (d) {
var layer = this.layer || this.name || d.name || d.layer;
return layer;
});
_chart.legendables = function () {
return _stack.map(function (layer, i) {
return {chart:_chart, name:layer.name, hidden: layer.hidden || false, color:_chart.getColor.call(layer,layer.values,i)};
});
};
_chart.isLegendableHidden = function (d) {
var layer = findLayerByName(d.name);
return layer ? layer.hidden : false;
};
_chart.legendToggle = function (d) {
if(_hidableStacks) {
if (_chart.isLegendableHidden(d)) _chart.showStack(d.name);
else _chart.hideStack(d.name);
//_chart.redraw();
dc.renderAll(_chart.chartGroup());
}
};
return _chart;
};
/**
## Cap Mixin
Cap is a mixin that groups small data elements below a _cap_ into an *others* grouping for both the Row and Pie Charts.
The top ordered elements in the group up to the cap amount will be kept in the chart and
the sum of those below will be added to the *others* element. The keys of the elements below the cap limit are recorded
in order to repsond to onClick events and trigger filtering of all the within that grouping.
**/
dc.capMixin = function (_chart) {
var _cap = Infinity;
var _othersLabel = "Others";
var _othersGrouper = function (topRows) {
var topRowsSum = d3.sum(topRows, _chart.valueAccessor()),
allRows = _chart.group().all(),
allRowsSum = d3.sum(allRows, _chart.valueAccessor()),
topKeys = topRows.map(_chart.keyAccessor()),
allKeys = allRows.map(_chart.keyAccessor()),
topSet = d3.set(topKeys),
others = allKeys.filter(function(d){return !topSet.has(d);});
if (allRowsSum > topRowsSum)
return topRows.concat([{"others": others, "key": _othersLabel, "value": allRowsSum - topRowsSum}]);
return topRows;
};
_chart.cappedKeyAccessor = function(d,i) {
if (d.others)
return d.key;
return _chart.keyAccessor()(d,i);
};
_chart.cappedValueAccessor = function(d,i) {
if (d.others)
return d.value;
return _chart.valueAccessor()(d,i);
};
_chart.data(function(group) {
if (_cap == Infinity) {
return _chart._computeOrderedGroups(group.all());
} else {
var topRows = group.top(_cap); // ordered by crossfilter group order (default value)
topRows = _chart._computeOrderedGroups(topRows); // re-order using ordering (default key)
if (_othersGrouper) return _othersGrouper(topRows);
return topRows;
}
});
/**
#### .cap([count])
Get or set the count of elements to that will be included in the cap.
**/
_chart.cap = function (_) {
if (!arguments.length) return _cap;
_cap = _;
return _chart;
};
/**
#### .othersLabel([label])
Get or set the label for *Others* slice when slices cap is specified. Default label is **Others**.
**/
_chart.othersLabel = function (_) {
if (!arguments.length) return _othersLabel;
_othersLabel = _;
return _chart;
};
/**
#### .othersGrouper([grouperFunction])
Get or set the grouper function that will perform the insertion of data for the *Others* slice if the slices cap is
specified. If set to a falsy value, no others will be added. By default the grouper function computes the sum of all
values below the cap.
```js
chart.othersGrouper(function (data) {
// compute the value for others, presumably the sum of all values below the cap
var othersSum = yourComputeOthersValueLogic(data)
// the keys are needed to properly filter when the others element is clicked
var othersKeys = yourComputeOthersKeysArrayLogic(data);
// add the others row to the dataset
data.push({"key": "Others", "value": othersSum, "others": othersKeys });
return data;
});
```
**/
_chart.othersGrouper = function (_) {
if (!arguments.length) return _othersGrouper;
_othersGrouper = _;
return _chart;
};
dc.override(_chart, "onClick", function (d) {
if (d.others)
_chart.filter([d.others]);
_chart._onClick(d);
});
return _chart;
};
/**
## Bubble Mixin
Includes: [Color Mixin](#color-mixin)
This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
**/
dc.bubbleMixin = function (_chart) {
var _maxBubbleRelativeSize = 0.3;
var _minRadiusWithLabel = 10;
_chart.BUBBLE_NODE_CLASS = "node";
_chart.BUBBLE_CLASS = "bubble";
_chart.MIN_RADIUS = 10;
_chart = dc.colorMixin(_chart);
_chart.renderLabel(true);
_chart.renderTitle(false);
_chart.data(function(group) {
return group.top(Infinity);
});
var _r = d3.scale.linear().domain([0, 100]);
var _rValueAccessor = function (d) {
return d.r;
};
/**
#### .r([bubbleRadiusScale])
Get or set bubble radius scale. By default bubble chart uses ```d3.scale.linear().domain([0, 100])``` as it's r scale .
**/
_chart.r = function (_) {
if (!arguments.length) return _r;
_r = _;
return _chart;
};
/**
#### .radiusValueAccessor([radiusValueAccessor])
Get or set the radius value accessor function. The radius value accessor function if set will be used to retrieve data value
for each and every bubble rendered. The data retrieved then will be mapped using r scale to be used as the actual bubble
radius. In other words, this allows you to encode a data dimension using bubble size.
**/
_chart.radiusValueAccessor = function (_) {
if (!arguments.length) return _rValueAccessor;
_rValueAccessor = _;
return _chart;
};
_chart.rMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.radiusValueAccessor()(e);
});
return min;
};
_chart.rMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.radiusValueAccessor()(e);
});
return max;
};
_chart.bubbleR = function (d) {
var value = _chart.radiusValueAccessor()(d);
var r = _chart.r()(value);
if (isNaN(r) || value <= 0)
r = 0;
return r;
};
var labelFunction = function (d) {
return _chart.label()(d);
};
var labelOpacity = function (d) {
return (_chart.bubbleR(d) > _minRadiusWithLabel) ? 1 : 0;
};
_chart._doRenderLabel = function (bubbleGEnter) {
if (_chart.renderLabel()) {
var label = bubbleGEnter.select("text");
if (label.empty()) {
label = bubbleGEnter.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.on("click", _chart.onClick);
}
label
.attr("opacity", 0)
.text(labelFunction);
dc.transition(label, _chart.transitionDuration())
.attr("opacity", labelOpacity);
}
};
_chart.doUpdateLabels = function (bubbleGEnter) {
if (_chart.renderLabel()) {
var labels = bubbleGEnter.selectAll("text")
.text(labelFunction);
dc.transition(labels, _chart.transitionDuration())
.attr("opacity", labelOpacity);
}
};
var titleFunction = function (d) {
return _chart.title()(d);
};
_chart._doRenderTitles = function (g) {
if (_chart.renderTitle()) {
var title = g.select("title");
if (title.empty())
g.append("title").text(titleFunction);
}
};
_chart.doUpdateTitles = function (g) {
if (_chart.renderTitle()) {
g.selectAll("title").text(titleFunction);
}
};
/**
#### .minRadiusWithLabel([radius])
Get or set the minimum radius for label rendering. If a bubble's radius is less than this value then no label will be rendered.
Default value: 10.
**/
_chart.minRadiusWithLabel = function (_) {
if (!arguments.length) return _minRadiusWithLabel;
_minRadiusWithLabel = _;
return _chart;
};
/**
#### .maxBubbleRelativeSize([relativeSize])
Get or set the maximum relative size of a bubble to the length of x axis. This value is useful when the radius differences among
different bubbles are too great. Default value: 0.3
**/
_chart.maxBubbleRelativeSize = function (_) {
if (!arguments.length) return _maxBubbleRelativeSize;
_maxBubbleRelativeSize = _;
return _chart;
};
_chart.fadeDeselectedArea = function () {
if (_chart.hasFilter()) {
_chart.selectAll("g." + _chart.BUBBLE_NODE_CLASS).each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll("g." + _chart.BUBBLE_NODE_CLASS).each(function (d) {
_chart.resetHighlight(this);
});
}
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(d.key);
};
_chart.onClick = function (d) {
var filter = d.key;
dc.events.trigger(function () {
_chart.filter(filter);
dc.redrawAll(_chart.chartGroup());
});
};
return _chart;
};
/**
## Pie Chart
Includes: [Cap Mixin](#cap-mixin), [Color Mixin](#color-mixin), [Base Mixin](#base-mixin)
The pie chart implementation is usually used to visualize small number of categorical distributions.
Pie chart uses keyAccessor to generate slices, and valueAccessor to calculate the size of each slice(key)
relatively to the total sum of all values. Slices are ordered by `.ordering` which defaults to sorting by key.
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
#### dc.pieChart(parent[, chartGroup])
Create a pie chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such
as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created pie chart instance
```js
// create a pie chart under #chart-container1 element using the default global chart group
var chart1 = dc.pieChart("#chart-container1");
// create a pie chart under #chart-container2 element using chart group A
var chart2 = dc.pieChart("#chart-container2", "chartGroupA");
```
**/
dc.pieChart = function (parent, chartGroup) {
var DEFAULT_MIN_ANGLE_FOR_LABEL = 0.5;
var _sliceCssClass = "pie-slice";
var _radius,
_innerRadius = 0;
var _g;
var _minAngleForLabel = DEFAULT_MIN_ANGLE_FOR_LABEL;
var _externalLabelRadius;
var _chart = dc.capMixin(dc.colorMixin(dc.baseMixin({})));
_chart.colorAccessor(_chart.cappedKeyAccessor);
_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ": " + _chart.cappedValueAccessor(d);
});
/**
#### .slicesCap([cap])
Get or set the maximum number of slices the pie chart will generate. The top slices are determined by
value from high to low. Other slices exeeding the cap will be rolled up into one single *Others* slice.
The resulting data will still be sorted by .ordering (default by key).
**/
_chart.slicesCap = _chart.cap;
_chart.label(_chart.cappedKeyAccessor);
_chart.renderLabel(true);
_chart.transitionDuration(350);
_chart._doRender = function () {
_chart.resetSvg();
_g = _chart.svg()
.append("g")
.attr("transform", "translate(" + _chart.cx() + "," + _chart.cy() + ")");
drawChart();
return _chart;
};
function drawChart() {
// set radius on basis of chart dimension if missing
_radius = _radius ? _radius : d3.min([_chart.width(), _chart.height()]) /2;
var arc = buildArcs();
var pie = pieLayout();
var pieData = pie(_chart.data());
if (_g) {
var slices = _g.selectAll("g." + _sliceCssClass)
.data(pieData);
createElements(slices, arc, pieData);
updateElements(pieData, arc);
removeElements(slices);
highlightFilter();
}
}
function createElements(slices, arc, pieData) {
var slicesEnter = createSliceNodes(slices);
createSlicePath(slicesEnter, arc);
createTitles(slicesEnter);
createLabels(pieData, arc);
}
function createSliceNodes(slices) {
var slicesEnter = slices
.enter()
.append("g")
.attr("class", function (d, i) {
return _sliceCssClass + " _" + i;
});
return slicesEnter;
}
function createSlicePath(slicesEnter, arc) {
var slicePath = slicesEnter.append("path")
.attr("fill", fill)
.on("click", onClick)
.attr("d", function (d, i) {
return safeArc(d, i, arc);
});
dc.transition(slicePath, _chart.transitionDuration(), function (s) {
s.attrTween("d", tweenPie);
});
}
function createTitles(slicesEnter) {
if (_chart.renderTitle()) {
slicesEnter.append("title").text(function (d) {
return _chart.title()(d);
});
}
}
function positionLabels(labelsEnter, arc) {
dc.transition(labelsEnter, _chart.transitionDuration())
.attr("transform", function (d) {
return labelPosition(d, arc);
})
.attr("text-anchor", "middle")
.text(function (d) {
var data = d.data;
if (sliceHasNoData(data) || sliceTooSmall(d))
return "";
return _chart.label()(d.data);
});
}
function createLabels(pieData, arc) {
if (_chart.renderLabel()) {
var labels = _g.selectAll("text." + _sliceCssClass)
.data(pieData);
labels.exit().remove();
var labelsEnter = labels
.enter()
.append("text")
.attr("class", function (d, i) {
var classes = _sliceCssClass + " _" + i;
if(_externalLabelRadius)
classes += " external";
return classes;
})
.on("click", onClick);
positionLabels(labelsEnter, arc);
}
}
function updateElements(pieData, arc) {
updateSlicePaths(pieData, arc);
updateLabels(pieData, arc);
updateTitles(pieData);
}
function updateSlicePaths(pieData, arc) {
var slicePaths = _g.selectAll("g." + _sliceCssClass)
.data(pieData)
.select("path")
.attr("d", function (d, i) {
return safeArc(d, i, arc);
});
dc.transition(slicePaths, _chart.transitionDuration(),
function (s) {
s.attrTween("d", tweenPie);
}).attr("fill", fill);
}
function updateLabels(pieData, arc) {
if (_chart.renderLabel()) {
var labels = _g.selectAll("text." + _sliceCssClass)
.data(pieData);
positionLabels(labels, arc);
}
}
function updateTitles(pieData) {
if (_chart.renderTitle()) {
_g.selectAll("g." + _sliceCssClass)
.data(pieData)
.select("title")
.text(function (d) {
return _chart.title()(d.data);
});
}
}
function removeElements(slices) {
slices.exit().remove();
}
function highlightFilter() {
if (_chart.hasFilter()) {
_chart.selectAll("g." + _sliceCssClass).each(function (d) {
if (isSelectedSlice(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll("g." + _sliceCssClass).each(function (d) {
_chart.resetHighlight(this);
});
}
}
/**
#### .innerRadius([innerRadius])
Get or set the inner radius on a particular pie chart instance. If inner radius is greater than 0px then the pie chart
will be essentially rendered as a doughnut chart. Default inner radius is 0px.
**/
_chart.innerRadius = function (r) {
if (!arguments.length) return _innerRadius;
_innerRadius = r;
return _chart;
};
/**
#### .radius([radius])
Get or set the radius on a particular pie chart instance. Default radius is 90px.
**/
_chart.radius = function (r) {
if (!arguments.length) return _radius;
_radius = r;
return _chart;
};
/**
#### .cx()
Get center x coordinate position. This function is **not chainable**.
**/
_chart.cx = function () {
return _chart.width() / 2;
};
/**
#### .cy()
Get center y coordinate position. This function is **not chainable**.
**/
_chart.cy = function () {
return _chart.height() / 2;
};
function buildArcs() {
return d3.svg.arc().outerRadius(_radius).innerRadius(_innerRadius);
}
function isSelectedSlice(d) {
return _chart.hasFilter(_chart.cappedKeyAccessor(d.data));
}
_chart._doRedraw = function () {
drawChart();
return _chart;
};
/**
#### .minAngleForLabel([minAngle])
Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not render slice label.
Default min angle is 0.5.
**/
_chart.minAngleForLabel = function (_) {
if (!arguments.length) return _minAngleForLabel;
_minAngleForLabel = _;
return _chart;
};
function pieLayout() {
return d3.layout.pie().sort(null).value(_chart.cappedValueAccessor);
}
function sliceTooSmall(d) {
var angle = (d.endAngle - d.startAngle);
return isNaN(angle) || angle < _minAngleForLabel;
}
function sliceHasNoData(d) {
return _chart.cappedValueAccessor(d) === 0;
}
function tweenPie(b) {
b.innerRadius = _innerRadius;
var current = this._current;
if (isOffCanvas(current))
current = {startAngle: 0, endAngle: 0};
var i = d3.interpolate(current, b);
this._current = i(0);
return function (t) {
return safeArc(i(t), 0, buildArcs());
};
}
function isOffCanvas(current) {
return !current || isNaN(current.startAngle) || isNaN(current.endAngle);
}
function fill(d, i) {
return _chart.getColor(d.data, i);
}
function onClick(d, i) {
_chart.onClick(d.data, i);
}
function safeArc(d, i, arc) {
var path = arc(d, i);
if (path.indexOf("NaN") >= 0)
path = "M0,0";
return path;
}
/**
#### .externalLabels([radius])
Position slice labels offset from the outer edge of the chart
The given argument sets the radial offset.
*/
_chart.externalLabels = function(radius) {
if (arguments.length === 0) {
return _externalLabelRadius;
} else if(radius) {
_externalLabelRadius = radius;
} else {
_externalLabelRadius = undefined;
}
return _chart;
};
function labelPosition(d, arc) {
var centroid;
if( _externalLabelRadius ) {
centroid = d3.svg.arc()
.outerRadius(_radius+_externalLabelRadius)
.innerRadius(_radius+_externalLabelRadius)
.centroid(d);
} else {
centroid = arc.centroid(d);
}
if (isNaN(centroid[0]) || isNaN(centroid[1])) {
return "translate(0,0)";
} else {
return "translate(" + centroid + ")";
}
}
_chart.legendables = function() {
return _chart.data().map(function (d, i) {
var legendable = { name: d.key, data: d.value, others: d.others, chart:_chart };
legendable.color = _chart.getColor(d,i);
return legendable;
});
};
_chart.legendHighlight = function(d) {
highlightSliceFromLegendable(d, true);
};
_chart.legendReset = function(d) {
highlightSliceFromLegendable(d, false);
};
_chart.legendToggle = function(d) {
_chart.onClick({ key: d.name, others: d.others });
};
function highlightSliceFromLegendable(legendable, highlighted) {
_chart.selectAll('g.pie-slice').each(function (d) {
if (legendable.name == d.data.key) {
d3.select(this).classed("highlight", highlighted);
}
});
}
return _chart.anchor(parent, chartGroup);
};
/**
## Bar Chart
Includes: [Stack Mixin](#stack Mixin), [Coordinate Grid Mixin](#coordinate-grid-mixin)
Concrete bar chart/histogram implementation.
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
* [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
#### dc.barChart(parent[, chartGroup])
Create a bar chart instance and attach it to the given parent element.
Parameters:
* parent : string|compositeChart - any valid d3 single selector representing typically a dom block element such
as a div, or if this bar chart is a sub-chart in a [Composite Chart](#composite-chart) then pass in the parent composite chart instance.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created bar chart instance
```js
// create a bar chart under #chart-container1 element using the default global chart group
var chart1 = dc.barChart("#chart-container1");
// create a bar chart under #chart-container2 element using chart group A
var chart2 = dc.barChart("#chart-container2", "chartGroupA");
// create a sub-chart under a composite parent chart
var chart3 = dc.barChart(compositeChart);
```
**/
dc.barChart = function (parent, chartGroup) {
var MIN_BAR_WIDTH = 1;
var DEFAULT_GAP_BETWEEN_BARS = 2;
var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
var _gap = DEFAULT_GAP_BETWEEN_BARS;
var _centerBar = false;
var _alwaysUseRounding = false;
var _barWidth;
dc.override(_chart, 'rescale', function () {
_chart._rescale();
_barWidth = undefined;
});
dc.override(_chart, 'render', function () {
if (_chart.round() && _centerBar && !_alwaysUseRounding) {
dc.logger.warn("By default, brush rounding is disabled if bars are centered. " +
"See dc.js bar chart API documentation for details.");
}
_chart._render();
});
_chart.plotData = function () {
var layers = _chart.chartBodyG().selectAll("g.stack")
.data(_chart.data());
calculateBarWidth();
layers
.enter()
.append("g")
.attr("class", function (d, i) {
return "stack " + "_" + i;
});
layers.each(function (d, i) {
var layer = d3.select(this);
renderBars(layer, i, d);
});
};
function barHeight(d) {
return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
}
function renderBars(layer, layerIndex, d) {
var bars = layer.selectAll("rect.bar")
.data(d.values, dc.pluck('x'));
bars.enter()
.append("rect")
.attr("class", "bar")
.attr("fill", dc.pluck('data',_chart.getColor));
if (_chart.renderTitle())
bars.append("title").text(dc.pluck('data',_chart.title(d.name)));
if (_chart.isOrdinal())
bars.on("click", onClick);
dc.transition(bars, _chart.transitionDuration())
.attr("x", function (d) {
var x = _chart.x()(d.x);
if (_centerBar) x -= _barWidth / 2;
if (_chart.isOrdinal()) x += _gap/2;
return dc.utils.safeNumber(x);
})
.attr("y", function (d) {
var y = _chart.y()(d.y + d.y0);
if (d.y < 0)
y -= barHeight(d);
return dc.utils.safeNumber(y);
})
.attr("width", _barWidth)
.attr("height", function (d) {
return barHeight(d);
})
.attr("fill", dc.pluck('data',_chart.getColor))
.select("title").text(dc.pluck('data',_chart.title(d.name)));
dc.transition(bars.exit(), _chart.transitionDuration())
.attr("height", 0)
.remove();
}
function calculateBarWidth() {
if (_barWidth === undefined) {
var numberOfBars = _chart.xUnitCount();
if (_chart.isOrdinal() && !_gap)
_barWidth = Math.floor(_chart.x().rangeBand());
else if (_gap)
_barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
else
_barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
if (_barWidth == Infinity || isNaN(_barWidth) || _barWidth < MIN_BAR_WIDTH)
_barWidth = MIN_BAR_WIDTH;
}
}
_chart.fadeDeselectedArea = function () {
var bars = _chart.chartBodyG().selectAll("rect.bar");
var extent = _chart.brush().extent();
if (_chart.isOrdinal()) {
if (_chart.hasFilter()) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return _chart.hasFilter(d.x);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !_chart.hasFilter(d.x);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
} else {
if (!_chart.brushIsEmpty(extent)) {
var start = extent[0];
var end = extent[1];
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return d.x < start || d.x >= end;
});
} else {
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
}
};
/**
#### .centerBar(boolean)
Whether the bar chart will render each bar centered around the data position on x axis. Default to false.
**/
_chart.centerBar = function (_) {
if (!arguments.length) return _centerBar;
_centerBar = _;
return _chart;
};
function onClick(d) {
_chart.onClick(d.data);
}
/**
#### .barPadding([padding])
Get or set the spacing between bars as a fraction of bar size. Valid values are within 0-1.
Setting this value will also remove any previously set `gap`. See the
[d3 docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
for a visual description of how the padding is applied.
**/
_chart.barPadding = function (_) {
if (!arguments.length) return _chart._rangeBandPadding();
_chart._rangeBandPadding(_);
_gap = 0;
return _chart;
};
/**
#### .outerPadding([padding])
Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
Padding equivlent in width to `padding * barWidth` will be added on each side of the chart.
Default: 0.5
**/
_chart.outerPadding = _chart._outerRangeBandPadding;
/**
#### .gap(gapBetweenBars)
Manually set fixed gap (in px) between bars instead of relying on the default auto-generated gap. By default bar chart
implementation will calculate and set the gap automatically based on the number of data points and the length of the x axis.
**/
_chart.gap = function (_) {
if (!arguments.length) return _gap;
_gap = _;
return _chart;
};
_chart.extendBrush = function () {
var extent = _chart.brush().extent();
if (_chart.round() && (!_centerBar || _alwaysUseRounding)) {
extent[0] = extent.map(_chart.round())[0];
extent[1] = extent.map(_chart.round())[1];
_chart.chartBodyG().select(".brush")
.call(_chart.brush().extent(extent));
}
return extent;
};
/**
#### .alwaysUseRounding([boolean])
Set or get the flag which determines whether rounding is enabled when bars are centered (default: false).
If false, using rounding with centered bars will result in a warning and rounding will be ignored.
This flag has no effect if bars are not centered.
When using standard d3.js rounding methods, the brush often doesn't align correctly with centered bars since the bars are offset.
The rounding function must add an offset to compensate, such as in the following example.
```js
chart.round(function(n) {return Math.floor(n)+0.5});
```
**/
_chart.alwaysUseRounding = function (_) {
if (!arguments.length) return _alwaysUseRounding;
_alwaysUseRounding = _;
return _chart;
};
function colorFilter(color,inv) {
return function() {
var item = d3.select(this);
var match = item.attr('fill') == color;
return inv ? !match : match;
};
}
_chart.legendHighlight = function (d) {
if(!_chart.isLegendableHidden(d)) {
_chart.g().selectAll('rect.bar')
.classed('highlight', colorFilter(d.color))
.classed('fadeout', colorFilter(d.color,true));
}
};
_chart.legendReset = function () {
_chart.g().selectAll('rect.bar')
.classed('highlight', false)
.classed('fadeout', false);
};
dc.override(_chart, "xAxisMax", function() {
var max = this._xAxisMax();
if('resolution' in _chart.xUnits()) {
var res = _chart.xUnits().resolution;
max += res;
}
return max;
});
return _chart.anchor(parent, chartGroup);
};
/**
## Line Chart
Includes [Stack Mixin](#stack-mixin), [Coordinate Grid Mixin](#coordinate-grid-mixin)
Concrete line/area chart implementation.
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
* [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
#### dc.lineChart(parent[, chartGroup])
Create a line chart instance and attach it to the given parent element.
Parameters:
* parent : string|compositeChart - any valid d3 single selector representing typically a dom block element such
as a div, or if this line chart is a sub-chart in a [Composite Chart](#composite-chart) then pass in the parent composite chart instance.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created line chart instance
```js
// create a line chart under #chart-container1 element using the default global chart group
var chart1 = dc.lineChart("#chart-container1");
// create a line chart under #chart-container2 element using chart group A
var chart2 = dc.lineChart("#chart-container2", "chartGroupA");
// create a sub-chart under a composite parent chart
var chart3 = dc.lineChart(compositeChart);
```
**/
dc.lineChart = function (parent, chartGroup) {
var DEFAULT_DOT_RADIUS = 5;
var TOOLTIP_G_CLASS = "dc-tooltip";
var DOT_CIRCLE_CLASS = "dot";
var Y_AXIS_REF_LINE_CLASS = "yRef";
var X_AXIS_REF_LINE_CLASS = "xRef";
var DEFAULT_DOT_OPACITY = 1e-6;
var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
var _renderArea = false;
var _dotRadius = DEFAULT_DOT_RADIUS;
var _dataPointRadius = null;
var _dataPointFillOpacity = DEFAULT_DOT_OPACITY;
var _dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
var _interpolate = 'linear';
var _tension = 0.7;
var _defined;
var _dashStyle;
_chart.transitionDuration(500);
_chart._rangeBandPadding(1);
_chart.plotData = function () {
var chartBody = _chart.chartBodyG();
var layersList = chartBody.selectAll("g.stack-list");
if (layersList.empty()) layersList = chartBody.append("g").attr("class", "stack-list");
var layers = layersList.selectAll("g.stack").data(_chart.data());
var layersEnter = layers
.enter()
.append("g")
.attr("class", function (d, i) {
return "stack " + "_" + i;
});
drawLine(layersEnter, layers);
drawArea(layersEnter, layers);
drawDots(chartBody, layers);
};
_chart.interpolate = function(_){
if (!arguments.length) return _interpolate;
_interpolate = _;
return _chart;
};
_chart.tension = function(_){
if (!arguments.length) return _tension;
_tension = _;
return _chart;
};
_chart.defined = function(_){
if (!arguments.length) return _defined;
_defined = _;
return _chart;
};
/**
#### .dashStyle([array])
Set the line's d3 dashstyle. This value becomes "stroke-dasharray" of line. Defaults to empty array (solid line).
```js
// create a Dash Dot Dot Dot
chart.dashStyle([3,1,1,1]);
```
**/
_chart.dashStyle = function (_) {
if (!arguments.length) return _dashStyle;
_dashStyle = _;
return _chart;
};
/**
#### .renderArea([boolean])
Get or set render area flag. If the flag is set to true then the chart will render the area beneath each line and effectively
becomes an area chart.
**/
_chart.renderArea = function (_) {
if (!arguments.length) return _renderArea;
_renderArea = _;
return _chart;
};
function colors(d, i) {
return _chart.getColor.call(d,d.values,i);
}
function drawLine(layersEnter, layers) {
var line = d3.svg.line()
.x(function (d) {
return _chart.x()(d.x);
})
.y(function (d) {
return _chart.y()(d.y + d.y0);
})
.interpolate(_interpolate)
.tension(_tension);
if (_defined)
line.defined(_defined);
var path = layersEnter.append("path")
.attr("class", "line")
.attr("stroke", colors);
if (_dashStyle)
path.attr("stroke-dasharray", _dashStyle);
dc.transition(layers.select("path.line"), _chart.transitionDuration())
//.ease("linear")
.attr("stroke", colors)
.attr("d", function (d) {
return safeD(line(d.values));
});
}
function drawArea(layersEnter, layers) {
if (_renderArea) {
var area = d3.svg.area()
.x(function (d) {
return _chart.x()(d.x);
})
.y(function (d) {
return _chart.y()(d.y + d.y0);
})
.y0(function (d) {
return _chart.y()(d.y0);
})
.interpolate(_interpolate)
.tension(_tension);
if (_defined)
area.defined(_defined);
layersEnter.append("path")
.attr("class", "area")
.attr("fill", colors)
.attr("d", function (d) {
return safeD(area(d.values));
});
dc.transition(layers.select("path.area"), _chart.transitionDuration())
//.ease("linear")
.attr("fill", colors)
.attr("d", function (d) {
return safeD(area(d.values));
});
}
}
function safeD(d){
return (!d || d.indexOf("NaN") >= 0) ? "M0,0" : d;
}
function drawDots(chartBody, layers) {
if (!_chart.brushOn()) {
var tooltipListClass = TOOLTIP_G_CLASS + "-list";
var tooltips = chartBody.select("g." + tooltipListClass);
if (tooltips.empty()) tooltips = chartBody.append("g").attr("class", tooltipListClass);
layers.each(function (d, layerIndex) {
var points = d.values;
if (_defined) points = points.filter(_defined);
var g = tooltips.select("g." + TOOLTIP_G_CLASS + "._" + layerIndex);
if (g.empty()) g = tooltips.append("g").attr("class", TOOLTIP_G_CLASS + " _" + layerIndex);
createRefLines(g);
var dots = g.selectAll("circle." + DOT_CIRCLE_CLASS)
.data(points,dc.pluck('x'));
dots.enter()
.append("circle")
.attr("class", DOT_CIRCLE_CLASS)
.attr("r", getDotRadius())
.attr("fill", _chart.getColor)
.style("fill-opacity", _dataPointFillOpacity)
.style("stroke-opacity", _dataPointStrokeOpacity)
.on("mousemove", function (d) {
var dot = d3.select(this);
showDot(dot);
showRefLines(dot, g);
})
.on("mouseout", function (d) {
var dot = d3.select(this);
hideDot(dot);
hideRefLines(g);
})
.append("title").text(dc.pluck('data', _chart.title(d.name)));
dots.attr("cx", function (d) {
return dc.utils.safeNumber(_chart.x()(d.x));
})
.attr("cy", function (d) {
return dc.utils.safeNumber(_chart.y()(d.y + d.y0));
})
.attr("fill", _chart.getColor)
.select("title").text(dc.pluck('data', _chart.title(d.name)));
dots.exit().remove();
});
}
}
function createRefLines(g) {
var yRefLine = g.select("path." + Y_AXIS_REF_LINE_CLASS).empty() ? g.append("path").attr("class", Y_AXIS_REF_LINE_CLASS) : g.select("path." + Y_AXIS_REF_LINE_CLASS);
yRefLine.style("display", "none").attr("stroke-dasharray", "5,5");
var xRefLine = g.select("path." + X_AXIS_REF_LINE_CLASS).empty() ? g.append("path").attr("class", X_AXIS_REF_LINE_CLASS) : g.select("path." + X_AXIS_REF_LINE_CLASS);
xRefLine.style("display", "none").attr("stroke-dasharray", "5,5");
}
function showDot(dot) {
dot.style("fill-opacity", 0.8);
dot.style("stroke-opacity", 0.8);
dot.attr("r", _dotRadius);
return dot;
}
function showRefLines(dot, g) {
var x = dot.attr("cx");
var y = dot.attr("cy");
var yAxisX = (_chart._yAxisX() - _chart.margins().left);
var yAxisRefPathD = "M" + yAxisX + " " + y + "L" + (x) + " " + (y);
var xAxisRefPathD = "M" + x + " " + _chart.yAxisHeight() + "L" + x + " " + y;
g.select("path." + Y_AXIS_REF_LINE_CLASS).style("display", "").attr("d", yAxisRefPathD);
g.select("path." + X_AXIS_REF_LINE_CLASS).style("display", "").attr("d", xAxisRefPathD);
}
function getDotRadius() {
return _dataPointRadius || _dotRadius;
}
function hideDot(dot) {
dot.style("fill-opacity", _dataPointFillOpacity)
.style("stroke-opacity", _dataPointStrokeOpacity)
.attr("r", getDotRadius());
}
function hideRefLines(g) {
g.select("path." + Y_AXIS_REF_LINE_CLASS).style("display", "none");
g.select("path." + X_AXIS_REF_LINE_CLASS).style("display", "none");
}
/**
#### .dotRadius([dotRadius])
Get or set the radius (in px) for data points. Default dot radius is 5.
**/
_chart.dotRadius = function (_) {
if (!arguments.length) return _dotRadius;
_dotRadius = _;
return _chart;
};
/**
#### .renderDataPoints([options])
Always show individual dots for each datapoint.
Options, if given, is an object that can contain the following:
* fillOpacity (default 0.8)
* strokeOpacity (default 0.8)
* radius (default 2)
If `options` is falsy, it disables data point rendering.
If no `options` are provided, the current `options` values are instead returned.
Example:
```
chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.8})
```
**/
_chart.renderDataPoints = function (options) {
if (!arguments.length) {
return {
fillOpacity: _dataPointFillOpacity,
strokeOpacity: _dataPointStrokeOpacity,
radius: _dataPointRadius
};
} else if (!options) {
_dataPointFillOpacity = DEFAULT_DOT_OPACITY;
_dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
_dataPointRadius = null;
} else {
_dataPointFillOpacity = options.fillOpacity || 0.8;
_dataPointStrokeOpacity = options.strokeOpacity || 0.8;
_dataPointRadius = options.radius || 2;
}
return _chart;
};
function colorFilter(color, dashstyle, inv) {
return function() {
var item = d3.select(this);
var match = (item.attr('stroke') == color && item.attr("stroke-dasharray") == ((dashstyle instanceof Array) ? dashstyle.join(",") : null) )|| item.attr('fill') == color;
return inv ? !match : match;
};
}
_chart.legendHighlight = function (d) {
if(!_chart.isLegendableHidden(d)) {
_chart.g().selectAll('path.line, path.area')
.classed('highlight', colorFilter(d.color, d.dashstyle))
.classed('fadeout', colorFilter(d.color, d.dashstyle, true));
}
};
_chart.legendReset = function () {
_chart.g().selectAll('path.line, path.area')
.classed('highlight', false)
.classed('fadeout', false);
};
dc.override(_chart,'legendables', function() {
var legendables = _chart._legendables();
if (!_dashStyle) return legendables;
return legendables.map(function(l) {
l.dashstyle = _dashStyle;
return l;
});
});
return _chart.anchor(parent, chartGroup);
};
/**
## Data Count Widget
Includes: [Base Mixin](#base-mixin)
Data count is a simple widget designed to display total number records in the data set vs. the number records selected
by the current filters. Once created data count widget will automatically update the text content of the following elements
under the parent element.
* ".total-count" - total number of records
* ".filter-count" - number of records matched by the current filters
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
#### dc.dataCount(parent[, chartGroup])
Create a data count widget instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created data count widget instance
#### .dimension(allData) - **mandatory**
For data count widget the only valid dimension is the entire data set.
#### .group(groupAll) - **mandatory**
For data count widget the only valid group is the all group.
```js
var ndx = crossfilter(data);
var all = ndx.groupAll();
dc.dataCount(".dc-data-count")
.dimension(ndx)
.group(all);
```
**/
dc.dataCount = function(parent, chartGroup) {
var _formatNumber = d3.format(",d");
var _chart = dc.baseMixin({});
_chart._doRender = function() {
_chart.selectAll(".total-count").text(_formatNumber(_chart.dimension().size()));
_chart.selectAll(".filter-count").text(_formatNumber(_chart.group().value()));
return _chart;
};
_chart._doRedraw = function(){
return _chart._doRender();
};
return _chart.anchor(parent, chartGroup);
};
/**
## Data Table Widget
Includes: [Base Mixin](#base-mixin)
Data table is a simple widget designed to list crossfilter focused data set (rows being filtered) in a good old tabular
fashion.
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
#### dc.dataTable(parent[, chartGroup])
Create a data table widget instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created data table widget instance
**/
dc.dataTable = function(parent, chartGroup) {
var LABEL_CSS_CLASS = "dc-table-label";
var ROW_CSS_CLASS = "dc-table-row";
var COLUMN_CSS_CLASS = "dc-table-column";
var GROUP_CSS_CLASS = "dc-table-group";
var HEAD_CSS_CLASS = "dc-table-head";
var _chart = dc.baseMixin({});
var _size = 25;
var _columns = [];
var _sortBy = function(d) {
return d;
};
var _order = d3.ascending;
_chart._doRender = function() {
_chart.selectAll("tbody").remove();
renderRows(renderGroups());
return _chart;
};
_chart._doColumnValueFormat = function(v,d) {
return ((typeof v === 'function') ?
v(d) : // v as function
((typeof v === 'string') ?
d[v] : // v is field name string
v[1](d) // v is Object, use fn (element 2)
)
);
}
_chart._doColumnHeaderFormat = function(d) {
// if 'function', convert to string representation
// show a string capitalized
// if an object then display it's label string as-is.
return (typeof d === 'function') ?
_chart._doColumnHeaderFnToString(d) :
((typeof d === 'string') ?
_chart._doColumnHeaderCapitalize(d) : String(d[0]) );
}
_chart._doColumnHeaderCapitalize = function(s) {
// capitalize
return s.charAt(0).toUpperCase() + s.slice(1);
}
_chart._doColumnHeaderFnToString = function(f) {
// columnString(f) {
var s = String(f);
var i1 = s.indexOf("return ");
if (i1>=0) {
var i2 = s.lastIndexOf(";");
if (i2>=0) {
s = s.substring(i1+7,i2);
var i3 = s.indexOf("numberFormat");
if (i3>=0)
s = s.replace("numberFormat","");
}
}
return s;
}
function renderGroups() {
// The 'original' example uses all 'functions'.
// If all 'functions' are used, then don't remove/add a header, and leave
// the html alone. This preserves the functionality of earlier releases.
// A 2nd option is a string representing a field in the data.
// A third option is to supply an Object such as an array of 'information', and
// supply your own _doColumnHeaderFormat and _doColumnValueFormat functions to
// create what you need.
var bAllFunctions = true;
_columns.forEach(function(f,i) {
bAllFunctions = bAllFunctions & (typeof f === 'function');
});
if (!bAllFunctions) {
_chart.selectAll("th").remove();
var headcols = _chart.root().selectAll("th")
.data( _columns );
var headGroup = headcols
.enter()
.append("th");
headGroup
.attr("class", HEAD_CSS_CLASS)
.html(function(d) {
return (_chart._doColumnHeaderFormat(d));
});
}
var groups = _chart.root().selectAll("tbody")
.data(nestEntries(), function(d) {
return _chart.keyAccessor()(d);
});
var rowGroup = groups
.enter()
.append("tbody");
rowGroup
.append("tr")
.attr("class", GROUP_CSS_CLASS)
.append("td")
.attr("class", LABEL_CSS_CLASS)
.attr("colspan", _columns.length)
.html(function(d) {
return _chart.keyAccessor()(d);
});
groups.exit().remove();
return rowGroup;
}
function nestEntries() {
var entries = _chart.dimension().top(_size);
return d3.nest()
.key(_chart.group())
.sortKeys(_order)
.entries(entries.sort(function(a, b){
return _order(_sortBy(a), _sortBy(b));
}));
}
function renderRows(groups) {
var rows = groups.order()
.selectAll("tr." + ROW_CSS_CLASS)
.data(function(d) {
return d.values;
});
var rowEnter = rows.enter()
.append("tr")
.attr("class", ROW_CSS_CLASS);
_columns.forEach(function(v,i) {
rowEnter.append("td")
.attr("class", COLUMN_CSS_CLASS + " _" + i)
.html(function(d) {
return _chart._doColumnValueFormat(v,d);
});
});
rows.exit().remove();
return rows;
}
_chart._doRedraw = function() {
return _chart._doRender();
};
/**
#### .size([size])
Get or set the table size which determines the number of rows displayed by the widget.
**/
_chart.size = function(s) {
if (!arguments.length) return _size;
_size = s;
return _chart;
};
/**
#### .columns([columnFunctionArray])
Get or set column functions. Data table widget now supports several methods of specifying the columns to display.
The original method, first shown below, uses an array of functions to generate dynamic columns. Column functions are
simple javascript function with only one input argument d which represents a row in the data set, and the return value of
these functions will be used directly to generate table content for each cell. However, this method requires the .html
table entry to have a fixed set of column headers.
```js
chart.columns([
function(d) {
return d.date;
},
function(d) {
return d.open;
},
function(d) {
return d.close;
},
function(d) {
return numberFormat(d.close - d.open);
},
function(d) {
return d.volume;
}
]);
```
This next example shows you can simply list the data (d) content directly without
specifying it as a function, except where necessary (ie, computed columns). Note
the data element accessor name is capitalized when displayed in the table. You can
also mix in functions as desired or necessary, but you must use the
Object = [Label, Fn] method as shown below.
You may wish to override the following two functions, which are internally used to
translate the column information or function into a displayed header. The first one
is used on the simple "string" column specifier, the second is used to transform the
String(fn) into something displayable. For the Stock example, the function for Change
becomes a header of 'd.close - d.open'.
_chart._doColumnHeaderCapitalize _chart._doColumnHeaderFnToString
You may use your own Object definition, however you must then override
_chart._doColumnHeaderFormat , _chart._doColumnValueFormat
Be aware that fields without numberFormat specification will be displayed just as
they are stored in the data, unformatted.
```js
chart.columns([
"date", // d["date"], ie, a field accessor; capitalized automatically
"open", // ...
"close", // ...
["Change", // Specify an Object = [Label, Fn]
function (d) {
return numberFormat(d.close - d.open);
}],
"volume" // d["volume"], ie, a field accessor; capitalized automatically
]);
```
A third example, where all fields are specified using the Object = [Label, Fn] method.
```js
chart.columns([
["Date", // Specify an Object = [Label, Fn]
function (d) {
return d.date;
}],
["Open",
function (d) {
return numberFormat(d.open);
}],
["Close",
function (d) {
return numberFormat(d.close);
}],
["Change",
function (d) {
return numberFormat(d.close - d.open);
}],
["Volume",
function (d) {
return d.volume;
}]
]);
```
**/
_chart.columns = function(_) {
if (!arguments.length) return _columns;
_columns = _;
return _chart;
};
/**
#### .sortBy([sortByFunction])
Get or set sort-by function. This function works as a value accessor at row level and returns a particular field to be sorted
by. Default value: ``` function(d) {return d;}; ```
```js
chart.sortBy(function(d) {
return d.date;
});
```
**/
_chart.sortBy = function(_) {
if (!arguments.length) return _sortBy;
_sortBy = _;
return _chart;
};
/**
#### .order([order])
Get or set sort order. Default value: ``` d3.ascending ```
```js
chart.order(d3.descending);
```
**/
_chart.order = function(_) {
if (!arguments.length) return _order;
_order = _;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
## Bubble Chart
Includes: [Bubble Mixin](#bubble-mixin), [Coordinate Grid Mixin](#coordinate-grid-mixin)
A concrete implementation of a general purpose bubble chart that allows data visualization using the following dimensions:
* x axis position
* y axis position
* bubble radius
* color
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
* [US Venture Capital Landscape 2011](http://dc-js.github.com/dc.js/vc/index.html)
#### dc.bubbleChart(parent[, chartGroup])
Create a bubble chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created bubble chart instance
```js
// create a bubble chart under #chart-container1 element using the default global chart group
var bubbleChart1 = dc.bubbleChart("#chart-container1");
// create a bubble chart under #chart-container2 element using chart group A
var bubbleChart2 = dc.bubbleChart("#chart-container2", "chartGroupA");
```
**/
dc.bubbleChart = function(parent, chartGroup) {
var _chart = dc.bubbleMixin(dc.coordinateGridMixin({}));
var _elasticRadius = false;
_chart.transitionDuration(750);
var bubbleLocator = function(d) {
return "translate(" + (bubbleX(d)) + "," + (bubbleY(d)) + ")";
};
/**
#### .elasticRadius([boolean])
Turn on or off elastic bubble radius feature. If this feature is turned on, then bubble radiuses will be automatically rescaled
to fit the chart better.
**/
_chart.elasticRadius = function(_) {
if (!arguments.length) return _elasticRadius;
_elasticRadius = _;
return _chart;
};
_chart.plotData = function() {
if (_elasticRadius)
_chart.r().domain([_chart.rMin(), _chart.rMax()]);
_chart.r().range([_chart.MIN_RADIUS, _chart.xAxisLength() * _chart.maxBubbleRelativeSize()]);
var bubbleG = _chart.chartBodyG().selectAll("g." + _chart.BUBBLE_NODE_CLASS)
.data(_chart.data(), function (d) { return d.key; });
renderNodes(bubbleG);
updateNodes(bubbleG);
removeNodes(bubbleG);
_chart.fadeDeselectedArea();
};
function renderNodes(bubbleG) {
var bubbleGEnter = bubbleG.enter().append("g");
bubbleGEnter
.attr("class", _chart.BUBBLE_NODE_CLASS)
.attr("transform", bubbleLocator)
.append("circle").attr("class", function(d, i) {
return _chart.BUBBLE_CLASS + " _" + i;
})
.on("click", _chart.onClick)
.attr("fill", _chart.getColor)
.attr("r", 0);
dc.transition(bubbleG, _chart.transitionDuration())
.selectAll("circle." + _chart.BUBBLE_CLASS)
.attr("r", function(d) {
return _chart.bubbleR(d);
})
.attr("opacity", function(d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});
_chart._doRenderLabel(bubbleGEnter);
_chart._doRenderTitles(bubbleGEnter);
}
function updateNodes(bubbleG) {
dc.transition(bubbleG, _chart.transitionDuration())
.attr("transform", bubbleLocator)
.selectAll("circle." + _chart.BUBBLE_CLASS)
.attr("fill", _chart.getColor)
.attr("r", function(d) {
return _chart.bubbleR(d);
})
.attr("opacity", function(d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});
_chart.doUpdateLabels(bubbleG);
_chart.doUpdateTitles(bubbleG);
}
function removeNodes(bubbleG) {
bubbleG.exit().remove();
}
function bubbleX(d) {
var x = _chart.x()(_chart.keyAccessor()(d));
if (isNaN(x))
x = 0;
return x;
}
function bubbleY(d) {
var y = _chart.y()(_chart.valueAccessor()(d));
if (isNaN(y))
y = 0;
return y;
}
_chart.renderBrush = function(g) {
// override default x axis brush from parent chart
};
_chart.redrawBrush = function(g) {
// override default x axis brush from parent chart
_chart.fadeDeselectedArea();
};
return _chart.anchor(parent, chartGroup);
};
/**
## Composite Chart
Includes: [Coordinate Grid Mixin](#coordinate-grid-mixin)
Composite charts are a special kind of chart that allow you to render multiple
charts on the same Coordinate Grid. You can overlay(compose) different
bar/line/area charts in a single composite chart to achieve some quite flexible
charting effects.
#### dc.compositeChart(parent[, chartGroup])
Create a composite chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created composite chart instance
```js
// create a composite chart under #chart-container1 element using the default global chart group
var compositeChart1 = dc.compositeChart("#chart-container1");
// create a composite chart under #chart-container2 element using chart group A
var compositeChart2 = dc.compositeChart("#chart-container2", "chartGroupA");
```
**/
dc.compositeChart = function (parent, chartGroup) {
var SUB_CHART_CLASS = "sub";
var DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING = 12;
var _chart = dc.coordinateGridMixin({});
var _children = [];
var _childOptions = {};
var _shareColors = false,
_shareTitle = true;
var _rightYAxis = d3.svg.axis(),
_rightYAxisLabel = 0,
_rightYAxisLabelPadding = DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING,
_rightY,
_rightAxisGridLines = false;
_chart._mandatoryAttributes([]);
_chart.transitionDuration(500);
dc.override(_chart, "_generateG", function () {
var g = this.__generateG();
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
generateChildG(child, i);
if (!child.dimension()) child.dimension(_chart.dimension());
if (!child.group()) child.group(_chart.group());
child.chartGroup(_chart.chartGroup());
child.svg(_chart.svg());
child.xUnits(_chart.xUnits());
child.transitionDuration(_chart.transitionDuration());
child.brushOn(_chart.brushOn());
}
return g;
});
_chart._brushing = function () {
var extent = _chart.extendBrush();
var brushIsEmpty = _chart.brushIsEmpty(extent);
for (var i = 0; i < _children.length; ++i) {
_children[i].filter(null);
if (!brushIsEmpty) _children[i].filter(extent);
}
};
_chart._prepareYAxis = function () {
if (leftYAxisChildren().length !== 0) { prepareLeftYAxis(); }
if (rightYAxisChildren().length !== 0) { prepareRightYAxis(); }
if (leftYAxisChildren().length > 0 && !_rightAxisGridLines) {
_chart._renderHorizontalGridLinesForAxis(_chart.g(), _chart.y(), _chart.yAxis());
}
else if (rightYAxisChildren().length > 0) {
_chart._renderHorizontalGridLinesForAxis(_chart.g(), _rightY, _rightYAxis);
}
};
_chart.renderYAxis = function () {
if (leftYAxisChildren().length !== 0) {
_chart.renderYAxisAt("y", _chart.yAxis(), _chart.margins().left);
_chart.renderYAxisLabel("y", _chart.yAxisLabel(), -90);
}
if (rightYAxisChildren().length !== 0) {
_chart.renderYAxisAt("yr", _chart.rightYAxis(), _chart.width() - _chart.margins().right);
_chart.renderYAxisLabel("yr", _chart.rightYAxisLabel(), 90, _chart.width() - _rightYAxisLabelPadding);
}
};
function prepareRightYAxis() {
if (_chart.rightY() === undefined || _chart.elasticY()) {
_chart.rightY(d3.scale.linear());
_chart.rightY().domain([rightYAxisMin(), rightYAxisMax()]).rangeRound([_chart.yAxisHeight(), 0]);
}
_chart.rightY().range([_chart.yAxisHeight(), 0]);
_chart.rightYAxis(_chart.rightYAxis().scale(_chart.rightY()));
_chart.rightYAxis().orient("right");
}
function prepareLeftYAxis() {
if (_chart.y() === undefined || _chart.elasticY()) {
_chart.y(d3.scale.linear());
_chart.y().domain([yAxisMin(), yAxisMax()]).rangeRound([_chart.yAxisHeight(), 0]);
}
_chart.y().range([_chart.yAxisHeight(), 0]);
_chart.yAxis(_chart.yAxis().scale(_chart.y()));
_chart.yAxis().orient("left");
}
function generateChildG(child, i) {
child._generateG(_chart.g());
child.g().attr("class", SUB_CHART_CLASS + " _" + i);
}
_chart.plotData = function () {
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
if (!child.g()) {
generateChildG(child, i);
}
if (_shareColors) {
child.colors(_chart.colors());
}
child.x(_chart.x());
child.xAxis(_chart.xAxis());
if (child.useRightYAxis()) {
child.y(_chart.rightY());
child.yAxis(_chart.rightYAxis());
}
else {
child.y(_chart.y());
child.yAxis(_chart.yAxis());
}
child.plotData();
child._activateRenderlets();
}
};
/**
#### .useRightAxisGridLines(bool)
Get or set whether to draw gridlines from the right y axis.
Drawing from the left y axis is the default behavior. This option is only respected when
subcharts with both left and right y-axes are present.
**/
_chart.useRightAxisGridLines = function(_) {
if (!arguments) return _rightAxisGridLines;
_rightAxisGridLines = _;
return _chart;
};
/**
#### .childOptions({object})
Get or set chart-specific options for all child charts. This is equivalent to calling `.options` on each child chart.
**/
_chart.childOptions = function (_) {
if(!arguments.length) return _childOptions;
_childOptions = _;
_children.forEach(function(child){
child.options(_childOptions);
});
return _chart;
};
_chart.fadeDeselectedArea = function () {
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
child.brush(_chart.brush());
child.fadeDeselectedArea();
}
};
/**
#### .rightYAxisLabel([labelText])
Set or get the right y axis label.
**/
_chart.rightYAxisLabel = function (_, padding) {
if (!arguments.length) return _rightYAxisLabel;
_rightYAxisLabel = _;
_chart.margins().right -= _rightYAxisLabelPadding;
_rightYAxisLabelPadding = (padding === undefined) ? DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING : padding;
_chart.margins().right += _rightYAxisLabelPadding;
return _chart;
};
/**
#### .compose(subChartArray)
Combine the given charts into one single composite coordinate grid chart.
```js
// compose the given charts in the array into one single composite chart
moveChart.compose([
// when creating sub-chart you need to pass in the parent chart
dc.lineChart(moveChart)
.group(indexAvgByMonthGroup) // if group is missing then parent's group will be used
.valueAccessor(function(d){return d.value.avg;})
// most of the normal functions will continue to work in a composed chart
.renderArea(true)
.stack(monthlyMoveGroup, function(d){return d.value;})
.title(function(d){
var value = d.value.avg?d.value.avg:d.value;
if(isNaN(value)) value = 0;
return dateFormat(d.key) + "\n" + numberFormat(value);
}),
dc.barChart(moveChart)
.group(volumeByMonthGroup)
.centerBar(true)
]);
```
**/
_chart.compose = function (charts) {
_children = charts;
_children.forEach(function(child) {
child.height(_chart.height());
child.width(_chart.width());
child.margins(_chart.margins());
if (_shareTitle) child.title(_chart.title());
child.options(_childOptions);
});
return _chart;
};
_chart.children = function () {
return _children;
};
/**
#### .shareColors([boolean])
Get or set color sharing for the chart. If set, the `.colors()` value from this chart
will be shared with composed children. Additionally if the child chart implements
Stackable and has not set a custom .colorAccessor, then it will generate a color
specific to its order in the composition.
**/
_chart.shareColors = function (_) {
if (!arguments.length) return _shareColors;
_shareColors = _;
return _chart;
};
/**
#### .shareTitle([[boolean])
Get or set title sharing for the chart. If set, the `.title()` value from this chart
will be shared with composed children. Default value is true.
**/
_chart.shareTitle = function (_) {
if (!arguments.length) return _shareTitle;
_shareTitle = _;
return _chart;
};
/**
#### .rightY([yScale])
Get or set the y scale for the right axis. Right y scale is typically automatically generated by the chart implementation.
**/
_chart.rightY = function (_) {
if (!arguments.length) return _rightY;
_rightY = _;
return _chart;
};
function leftYAxisChildren() {
return _children.filter(function (child) {
return !child.useRightYAxis();
});
}
function rightYAxisChildren() {
return _children.filter(function (child) {
return child.useRightYAxis();
});
}
function getYAxisMin(charts) {
return charts.map(function(c) {
return c.yAxisMin();
});
}
delete _chart.yAxisMin;
function yAxisMin() {
return d3.min(getYAxisMin(leftYAxisChildren()));
}
function rightYAxisMin() {
return d3.min(getYAxisMin(rightYAxisChildren()));
}
function getYAxisMax(charts) {
return charts.map(function(c) {
return c.yAxisMax();
});
}
delete _chart.yAxisMax;
function yAxisMax() {
return dc.utils.add(d3.max(getYAxisMax(leftYAxisChildren())), _chart.yAxisPadding());
}
function rightYAxisMax() {
return dc.utils.add(d3.max(getYAxisMax(rightYAxisChildren())), _chart.yAxisPadding());
}
function getAllXAxisMinFromChildCharts() {
return _children.map(function(c) {
return c.xAxisMin();
});
}
dc.override(_chart, 'xAxisMin',function () {
return dc.utils.subtract(d3.min(getAllXAxisMinFromChildCharts()), _chart.xAxisPadding());
});
function getAllXAxisMaxFromChildCharts() {
return _children.map(function(c) {
return c.xAxisMax();
});
}
dc.override(_chart, 'xAxisMax',function () {
return dc.utils.add(d3.max(getAllXAxisMaxFromChildCharts()), _chart.xAxisPadding());
});
_chart.legendables = function () {
return _children.reduce(function(items,child) {
if (_shareColors) child.colors(_chart.colors());
items.push.apply(items, child.legendables());
return items;
},[]);
};
_chart.legendHighlight = function (d) {
for (var j = 0; j < _children.length; ++j) {
var child = _children[j];
child.legendHighlight(d);
}
};
_chart.legendReset = function (d) {
for (var j = 0; j < _children.length; ++j) {
var child = _children[j];
child.legendReset(d);
}
};
_chart.legendToggle = function (d) {
for (var j = 0; j < _children.length; ++j) {
var child = _children[j];
if (d.name == child._groupName) child.legendToggle(d);
}
};
/**
#### .rightYAxis([yAxis])
Set or get the right y axis used by the composite chart. This function is most useful when certain y
axis customization is required. y axis in dc.js is simply an instance
of [d3 axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis) therefore it supports any valid d3 axis
manipulation. **Caution**: The y axis is typically generated by dc chart internal, resetting it might cause unexpected
outcome.
```js
// customize y axis tick format
chart.rightYAxis().tickFormat(function(v) {return v + "%";});
// customize y axis tick values
chart.rightYAxis().tickValues([0, 100, 200, 300]);
```
**/
_chart.rightYAxis = function (rightYAxis) {
if (!arguments.length) return _rightYAxis;
_rightYAxis = rightYAxis;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
## Series Chart
Includes: [Composite Chart](#composite chart)
A series chart is a chart that shows multiple series of data as lines, where the series
is specified in the data. It is a special implementation Composite Chart and inherits
all composite features other than recomposing the chart.
#### dc.seriesChart(parent[, chartGroup])
Create a series chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created series chart instance
```js
// create a series chart under #chart-container1 element using the default global chart group
var seriesChart1 = dc.seriesChart("#chart-container1");
// create a series chart under #chart-container2 element using chart group A
var seriesChart2 = dc.seriesChart("#chart-container2", "chartGroupA");
```
**/
dc.seriesChart = function (parent, chartGroup) {
var _chart = dc.compositeChart(parent, chartGroup);
var _charts = {};
var _chartFunction = dc.lineChart;
var _seriesAccessor;
var _seriesSort = d3.ascending;
var _valueSort = keySort;
_chart._mandatoryAttributes().push('seriesAccessor','chart');
_chart.shareColors(true);
function keySort(a,b) {
return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
}
_chart._preprocessData = function () {
var keep = [];
var children_changed;
var nester = d3.nest().key(_seriesAccessor);
if(_seriesSort)
nester.sortKeys(_seriesSort);
if(_valueSort)
nester.sortValues(_valueSort);
var nesting = nester.entries(_chart.data());
var children =
nesting.map(function(sub,i) {
var subChart = _charts[sub.key] || _chartFunction.call(_chart,_chart,chartGroup,sub.key,i);
if(!_charts[sub.key])
children_changed = true;
_charts[sub.key] = subChart;
keep.push(sub.key);
return subChart
.dimension(_chart.dimension())
.group({all:d3.functor(sub.values)}, sub.key)
.keyAccessor(_chart.keyAccessor())
.valueAccessor(_chart.valueAccessor());
});
// this works around the fact compositeChart doesn't really
// have a removal interface
Object.keys(_charts)
.filter(function(c) {return keep.indexOf(c) === -1;})
.forEach(function(c) {
clearChart(c);
children_changed = true;
});
_chart._compose(children);
if(children_changed && _chart.legend())
_chart.legend().render();
};
function clearChart(c) {
if(_charts[c].g())
_charts[c].g().remove();
delete _charts[c];
}
function resetChildren() {
Object.keys(_charts).map(clearChart);
_charts = {};
}
_chart.chart = function(_) {
if (!arguments.length) return _chartFunction;
_chartFunction = _;
resetChildren();
return _chart;
};
/**
#### .seriesAccessor([accessor])
Get or set accessor function for the displayed series. Given a datum, this function
should return the series that datum belongs to.
**/
_chart.seriesAccessor = function(_) {
if (!arguments.length) return _seriesAccessor;
_seriesAccessor = _;
resetChildren();
return _chart;
};
/**
#### .seriesSort([sortFunction])
Get or set a function to sort the list of series by, given series values.
Example:
```
chart.seriesSort(d3.descending);
```
**/
_chart.seriesSort = function(_) {
if (!arguments.length) return _seriesSort;
_seriesSort = _;
resetChildren();
return _chart;
};
/**
#### .valueSort([sortFunction])
Get or set a function to the sort each series values by. By default this is
the key accessor which, for example, a will ensure lineChart a series connects
its points in increasing key/x order, rather than haphazardly.
**/
_chart.valueSort = function(_) {
if (!arguments.length) return _valueSort;
_valueSort = _;
resetChildren();
return _chart;
};
// make compose private
_chart._compose = _chart.compose;
delete _chart.compose;
return _chart;
};
/**
## Geo Choropleth Chart
Includes: [Color Mixin](#color-mixin), [Base Mixin](#base-mixin)
Geo choropleth chart is designed to make creating crossfilter driven choropleth
map from GeoJson data an easy process. This chart implementation was inspired by
[the great d3 choropleth example](http://bl.ocks.org/4060606).
Examples:
* [US Venture Capital Landscape 2011](http://dc-js.github.com/dc.js/vc/index.html)
#### dc.geoChoroplethChart(parent[, chartGroup])
Create a choropleth chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created choropleth chart instance
```js
// create a choropleth chart under "#us-chart" element using the default global chart group
var chart1 = dc.geoChoroplethChart("#us-chart");
// create a choropleth chart under "#us-chart2" element using chart group A
var chart2 = dc.compositeChart("#us-chart2", "chartGroupA");
```
**/
dc.geoChoroplethChart = function (parent, chartGroup) {
var _chart = dc.colorMixin(dc.baseMixin({}));
_chart.colorAccessor(function (d) {
return d || 0;
});
var _geoPath = d3.geo.path();
var _projectionFlag;
var _geoJsons = [];
_chart._doRender = function () {
_chart.resetSvg();
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
var states = _chart.svg().append("g")
.attr("class", "layer" + layerIndex);
var regionG = states.selectAll("g." + geoJson(layerIndex).name)
.data(geoJson(layerIndex).data)
.enter()
.append("g")
.attr("class", geoJson(layerIndex).name);
regionG
.append("path")
.attr("fill", "white")
.attr("d", _geoPath);
regionG.append("title");
plotData(layerIndex);
}
_projectionFlag = false;
};
function plotData(layerIndex) {
var data = generateLayeredData();
if (isDataLayer(layerIndex)) {
var regionG = renderRegionG(layerIndex);
renderPaths(regionG, layerIndex, data);
renderTitle(regionG, layerIndex, data);
}
}
function generateLayeredData() {
var data = {};
var groupAll = _chart.data();
for (var i = 0; i < groupAll.length; ++i) {
data[_chart.keyAccessor()(groupAll[i])] = _chart.valueAccessor()(groupAll[i]);
}
return data;
}
function isDataLayer(layerIndex) {
return geoJson(layerIndex).keyAccessor;
}
function renderRegionG(layerIndex) {
var regionG = _chart.svg()
.selectAll(layerSelector(layerIndex))
.classed("selected", function (d) {
return isSelected(layerIndex, d);
})
.classed("deselected", function (d) {
return isDeselected(layerIndex, d);
})
.attr("class", function (d) {
var layerNameClass = geoJson(layerIndex).name;
var regionClass = dc.utils.nameToId(geoJson(layerIndex).keyAccessor(d));
var baseClasses = layerNameClass + " " + regionClass;
if (isSelected(layerIndex, d)) baseClasses += " selected";
if (isDeselected(layerIndex, d)) baseClasses += " deselected";
return baseClasses;
});
return regionG;
}
function layerSelector(layerIndex) {
return "g.layer" + layerIndex + " g." + geoJson(layerIndex).name;
}
function isSelected(layerIndex, d) {
return _chart.hasFilter() && _chart.hasFilter(getKey(layerIndex, d));
}
function isDeselected(layerIndex, d) {
return _chart.hasFilter() && !_chart.hasFilter(getKey(layerIndex, d));
}
function getKey(layerIndex, d) {
return geoJson(layerIndex).keyAccessor(d);
}
function geoJson(index) {
return _geoJsons[index];
}
function renderPaths(regionG, layerIndex, data) {
var paths = regionG
.select("path")
.attr("fill", function () {
var currentFill = d3.select(this).attr("fill");
if (currentFill)
return currentFill;
return "none";
})
.on("click", function (d) {
return _chart.onClick(d, layerIndex);
});
dc.transition(paths, _chart.transitionDuration()).attr("fill", function (d, i) {
return _chart.getColor(data[geoJson(layerIndex).keyAccessor(d)], i);
});
}
_chart.onClick = function (d, layerIndex) {
var selectedRegion = geoJson(layerIndex).keyAccessor(d);
dc.events.trigger(function () {
_chart.filter(selectedRegion);
_chart.redrawGroup();
});
};
function renderTitle(regionG, layerIndex, data) {
if (_chart.renderTitle()) {
regionG.selectAll("title").text(function (d) {
var key = getKey(layerIndex, d);
var value = data[key];
return _chart.title()({key: key, value: value});
});
}
}
_chart._doRedraw = function () {
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
plotData(layerIndex);
if(_projectionFlag) {
_chart.svg().selectAll("g." + geoJson(layerIndex).name + " path").attr("d", _geoPath);
}
}
_projectionFlag = false;
};
/**
#### .overlayGeoJson(json, name, keyAccessor) - **mandatory**
Use this function to insert a new GeoJson map layer. This function can be invoked multiple times if you have multiple GeoJson
data layer to render on top of each other. If you overlay mutiple layers with the same name the new overlay will simply
override the existing one.
Parameters:
* json - GeoJson feed
* name - name of the layer
* keyAccessor - accessor function used to extract "key" from the GeoJson data. Key extracted by this function should match
the keys generated in crossfilter groups.
```js
// insert a layer for rendering US states
chart.overlayGeoJson(statesJson.features, "state", function(d) {
return d.properties.name;
});
```
**/
_chart.overlayGeoJson = function (json, name, keyAccessor) {
for (var i = 0; i < _geoJsons.length; ++i) {
if (_geoJsons[i].name == name) {
_geoJsons[i].data = json;
_geoJsons[i].keyAccessor = keyAccessor;
return _chart;
}
}
_geoJsons.push({name: name, data: json, keyAccessor: keyAccessor});
return _chart;
};
/**
#### .projection(projection)
Set custom geo projection function. Available [d3 geo projection functions](https://github.com/mbostock/d3/wiki/Geo-Projections).
Default value: albersUsa.
**/
_chart.projection = function (projection) {
_geoPath.projection(projection);
_projectionFlag = true;
return _chart;
};
/**
#### .geoJsons()
Return all GeoJson layers currently registered with thit chart. The returned array is a reference to this chart's internal
registration data structure without copying thus any modification to this array will also modify this chart's internal
registration.
Return:
An array of objects containing fields {name, data, accessor}
**/
_chart.geoJsons = function () {
return _geoJsons;
};
/**
#### .removeGeoJson(name)
Remove a GeoJson layer from this chart by name
Return: chart instance
**/
_chart.removeGeoJson = function (name) {
var geoJsons = [];
for (var i = 0; i < _geoJsons.length; ++i) {
var layer = _geoJsons[i];
if (layer.name != name) {
geoJsons.push(layer);
}
}
_geoJsons = geoJsons;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
## Bubble Overlay Chart
Includes: [Bubble Mixin](#bubble-mixin), [Base Mixin](#base-mixin)
Bubble overlay chart is quite different from the typical bubble chart. With bubble overlay chart you can arbitrarily place
a finite number of bubbles on an existing svg or bitmap image (overlay on top of it), thus losing the typical x and y
positioning that we are used to whiling retaining the capability to visualize data using it's bubble radius and
coloring.
Examples:
* [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
#### dc.bubbleOverlay(parent[, chartGroup])
Create a bubble overlay chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div. Typically
this element should also be the parent of the underlying image.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created bubble overlay chart instance
```js
// create a bubble overlay chart on top of "#chart-container1 svg" element using the default global chart group
var bubbleChart1 = dc.bubbleOverlayChart("#chart-container1").svg(d3.select("#chart-container1 svg"));
// create a bubble overlay chart on top of "#chart-container2 svg" element using chart group A
var bubbleChart2 = dc.compositeChart("#chart-container2", "chartGroupA").svg(d3.select("#chart-container2 svg"));
```
#### .svg(imageElement) - **mandatory**
Set the underlying svg image element. Unlike other dc charts this chart will not generate svg element therefore bubble overlay
chart will not work if this function is not properly invoked. If the underlying image is a bitmap, then an empty svg will need
to be manually created on top of the image.
```js
// set up underlying svg element
chart.svg(d3.select("#chart svg"));
```
**/
dc.bubbleOverlay = function(root, chartGroup) {
var BUBBLE_OVERLAY_CLASS = "bubble-overlay";
var BUBBLE_NODE_CLASS = "node";
var BUBBLE_CLASS = "bubble";
var _chart = dc.bubbleMixin(dc.baseMixin({}));
var _g;
var _points = [];
_chart.transitionDuration(750);
_chart.radiusValueAccessor(function(d) {
return d.value;
});
/**
#### .point(name, x, y) - **mandatory**
Set up a data point on the overlay. The name of a data point should match a specific "key" among data groups generated using keyAccessor.
If a match is found (point name <-> data group key) then a bubble will be automatically generated at the position specified by the
function. x and y value specified here are relative to the underlying svg.
**/
_chart.point = function(name, x, y) {
_points.push({name: name, x: x, y: y});
return _chart;
};
_chart._doRender = function() {
_g = initOverlayG();
_chart.r().range([_chart.MIN_RADIUS, _chart.width() * _chart.maxBubbleRelativeSize()]);
initializeBubbles();
_chart.fadeDeselectedArea();
return _chart;
};
function initOverlayG() {
_g = _chart.select("g." + BUBBLE_OVERLAY_CLASS);
if (_g.empty())
_g = _chart.svg().append("g").attr("class", BUBBLE_OVERLAY_CLASS);
return _g;
}
function initializeBubbles() {
var data = mapData();
_points.forEach(function(point) {
var nodeG = getNodeG(point, data);
var circle = nodeG.select("circle." + BUBBLE_CLASS);
if (circle.empty())
circle = nodeG.append("circle")
.attr("class", BUBBLE_CLASS)
.attr("r", 0)
.attr("fill", _chart.getColor)
.on("click", _chart.onClick);
dc.transition(circle, _chart.transitionDuration())
.attr("r", function(d) {
return _chart.bubbleR(d);
});
_chart._doRenderLabel(nodeG);
_chart._doRenderTitles(nodeG);
});
}
function mapData() {
var data = {};
_chart.data().forEach(function(datum) {
data[_chart.keyAccessor()(datum)] = datum;
});
return data;
}
function getNodeG(point, data) {
var bubbleNodeClass = BUBBLE_NODE_CLASS + " " + dc.utils.nameToId(point.name);
var nodeG = _g.select("g." + dc.utils.nameToId(point.name));
if (nodeG.empty()) {
nodeG = _g.append("g")
.attr("class", bubbleNodeClass)
.attr("transform", "translate(" + point.x + "," + point.y + ")");
}
nodeG.datum(data[point.name]);
return nodeG;
}
_chart._doRedraw = function() {
updateBubbles();
_chart.fadeDeselectedArea();
return _chart;
};
function updateBubbles() {
var data = mapData();
_points.forEach(function(point) {
var nodeG = getNodeG(point, data);
var circle = nodeG.select("circle." + BUBBLE_CLASS);
dc.transition(circle, _chart.transitionDuration())
.attr("r", function(d) {
return _chart.bubbleR(d);
})
.attr("fill", _chart.getColor);
_chart.doUpdateLabels(nodeG);
_chart.doUpdateTitles(nodeG);
});
}
_chart.debug = function(flag) {
if(flag){
var debugG = _chart.select("g." + dc.constants.DEBUG_GROUP_CLASS);
if(debugG.empty())
debugG = _chart.svg()
.append("g")
.attr("class", dc.constants.DEBUG_GROUP_CLASS);
var debugText = debugG.append("text")
.attr("x", 10)
.attr("y", 20);
debugG
.append("rect")
.attr("width", _chart.width())
.attr("height", _chart.height())
.on("mousemove", function() {
var position = d3.mouse(debugG.node());
var msg = position[0] + ", " + position[1];
debugText.text(msg);
});
}else{
_chart.selectAll(".debug").remove();
}
return _chart;
};
_chart.anchor(root, chartGroup);
return _chart;
};
/**
## Row Chart
Includes: [Cap Mixin](#cap-mixin), [Margin Mixin](#margin-mixin), [Color Mixin](#color-mixin), [Base Mixin](#base-mixin)
Concrete row chart implementation.
#### dc.rowChart(parent[, chartGroup])
Create a row chart instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed in a certain chart group then any interaction with such instance will only trigger events and redraw within the same chart group.
Return a newly created row chart instance
```js
// create a row chart under #chart-container1 element using the default global chart group
var chart1 = dc.rowChart("#chart-container1");
// create a row chart under #chart-container2 element using chart group A
var chart2 = dc.rowChart("#chart-container2", "chartGroupA");
```
**/
dc.rowChart = function (parent, chartGroup) {
var _g;
var _labelOffsetX = 10;
var _labelOffsetY = 15;
var _titleLabelOffsetX = 2;
var _gap = 5;
var _fixedBarHeight = false;
var _rowCssClass = "row";
var _titleRowCssClass = "titlerow";
var _renderTitleLabel = false;
var _chart = dc.capMixin(dc.marginMixin(dc.colorMixin(dc.baseMixin({}))));
var _x;
var _elasticX;
var _xAxis = d3.svg.axis().orient("bottom");
var _rowData;
_chart.rowsCap = _chart.cap;
function calculateAxisScale() {
if (!_x || _elasticX) {
var extent = d3.extent(_rowData, _chart.cappedValueAccessor);
if (extent[0] > 0) extent[0] = 0;
_x = d3.scale.linear().domain(extent)
.range([0, _chart.effectiveWidth()]);
}
_xAxis.scale(_x);
}
function drawAxis() {
var axisG = _g.select("g.axis");
calculateAxisScale();
if (axisG.empty())
axisG = _g.append("g").attr("class", "axis")
.attr("transform", "translate(0, " + _chart.effectiveHeight() + ")");
dc.transition(axisG, _chart.transitionDuration())
.call(_xAxis);
}
_chart._doRender = function () {
_chart.resetSvg();
_g = _chart.svg()
.append("g")
.attr("transform", "translate(" + _chart.margins().left + "," + _chart.margins().top + ")");
drawChart();
return _chart;
};
_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ": " + _chart.cappedValueAccessor(d);
});
_chart.label(_chart.cappedKeyAccessor);
_chart.x = function(x){
if(!arguments.length) return _x;
_x = x;
return _chart;
};
function drawGridLines() {
_g.selectAll("g.tick")
.select("line.grid-line")
.remove();
_g.selectAll("g.tick")
.append("line")
.attr("class", "grid-line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", function () {
return -_chart.effectiveHeight();
});
}
function drawChart() {
_rowData = _chart.data();
drawAxis();
drawGridLines();
var rows = _g.selectAll("g." + _rowCssClass)
.data(_rowData);
createElements(rows);
removeElements(rows);
updateElements(rows);
}
function createElements(rows) {
var rowEnter = rows.enter()
.append("g")
.attr("class", function (d, i) {
return _rowCssClass + " _" + i;
});
rowEnter.append("rect").attr("width", 0);
createLabels(rowEnter);
updateLabels(rows);
}
function removeElements(rows) {
rows.exit().remove();
}
function updateElements(rows) {
var n = _rowData.length;
var height;
if (!_fixedBarHeight) height = (_chart.effectiveHeight() - (n + 1) * _gap) / n;
else height = _fixedBarHeight;
var rect = rows.attr("transform",function (d, i) {
return "translate(0," + ((i + 1) * _gap + i * height) + ")";
}).select("rect")
.attr("height", height)
.attr("fill", _chart.getColor)
.on("click", onClick)
.classed("deselected", function (d) {
return (_chart.hasFilter()) ? !isSelectedRow(d) : false;
})
.classed("selected", function (d) {
return (_chart.hasFilter()) ? isSelectedRow(d) : false;
});
dc.transition(rect, _chart.transitionDuration())
.attr("width", function (d) {
var start = _x(0) == -Infinity ? _x(1) : _x(0);
return Math.abs(start - _x(_chart.valueAccessor()(d)));
})
.attr("transform", translateX);
createTitles(rows);
updateLabels(rows);
}
function createTitles(rows) {
if (_chart.renderTitle()) {
rows.selectAll("title").remove();
rows.append("title").text(_chart.title());
}
}
function createLabels(rowEnter) {
if (_chart.renderLabel()) {
rowEnter.append("text")
.on("click", onClick);
}
if (_chart.renderTitleLabel()) {
rowEnter.append("text")
.attr("class", _titleRowCssClass)
.on("click", onClick);
}
}
function updateLabels(rows) {
if (_chart.renderLabel()) {
var lab = rows.select("text")
.attr("x", _labelOffsetX)
.attr("y", _labelOffsetY)
.on("click", onClick)
.attr("class", function (d, i) {
return _rowCssClass + " _" + i;
})
.text(function (d) {
return _chart.label()(d);
});
dc.transition(lab, _chart.transitionDuration())
.attr("transform", translateX);
}
if (_chart.renderTitleLabel()) {
var titlelab = rows.select("." + _titleRowCssClass)
.attr("x", _chart.effectiveWidth() - _titleLabelOffsetX)
.attr("y", _labelOffsetY)
.attr("text-anchor", "end")
.on("click", onClick)
.attr("class", function (d, i) {
return _titleRowCssClass + " _" + i ;
})
.text(function (d) {
return _chart.title()(d);
});
dc.transition(titlelab, _chart.transitionDuration())
.attr("transform", translateX);
}
}
/**
#### .renderTitleLabel(boolean)
Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'
**/
_chart.renderTitleLabel = function (_) {
if (!arguments.length) return _renderTitleLabel;
_renderTitleLabel = _;
return _chart;
};
function onClick(d) {
_chart.onClick(d);
}
function translateX(d) {
var x = _x(_chart.cappedValueAccessor(d)),
x0 = _x(0),
s = x > x0 ? x0 : x;
return "translate("+s+",0)";
}
_chart._doRedraw = function () {
drawChart();
return _chart;
};
/**
#### .xAxis()
Get the x axis for the row chart instance. Note: not settable for row charts.
See the [d3 axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis) documention for more information.
```js
// customize x axis tick format
chart.xAxis().tickFormat(function(v) {return v + "%";});
// customize x axis tick values
chart.xAxis().tickValues([0, 100, 200, 300]);
```
**/
_chart.xAxis = function () {
return _xAxis;
};
/**
#### .fixedBarHeight([height])
Get or set the fixed bar height. Default is [false] which will auto-scale bars.
For example, if you want to fix the height for a specific number of bars (useful in TopN charts)
you could fix height as follows (where count = total number of bars in your TopN and gap is your vertical gap space).
```js
chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
```
**/
_chart.fixedBarHeight = function (g) {
if (!arguments.length) return _fixedBarHeight;
_fixedBarHeight = g;
return _chart;
};
/**
#### .fixedBarHeight([height])
Get or set the fixed bar height. Default is [false] which will auto-scale bars.
For example, if you want to fix the height for a specific number of bars (useful in TopN charts)
you could fix height as follows (where count = total number of bars in your TopN and gap is your vertical gap space).
```js
chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
```
**/
_chart.fixedBarHeight = function (g) {
if (!arguments.length) return _fixedBarHeight;
_fixedBarHeight = g;
return _chart;
};
/**
#### .gap([gap])
Get or set the vertical gap space between rows on a particular row chart instance. Default gap is 5px;
**/
_chart.gap = function (g) {
if (!arguments.length) return _gap;
_gap = g;
return _chart;
};
/**
#### .elasticX([boolean])
Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescle to auto-fit the data
range when filtered.
**/
_chart.elasticX = function (_) {
if (!arguments.length) return _elasticX;
_elasticX = _;
return _chart;
};
/**
#### .labelOffsetX([x])
Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart. Default x offset is 10px;
**/
_chart.labelOffsetX = function (o) {
if (!arguments.length) return _labelOffsetX;
_labelOffsetX = o;
return _chart;
};
/**
#### .labelOffsetY([y])
Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart. Default y offset is 15px;
**/
_chart.labelOffsetY = function (o) {
if (!arguments.length) return _labelOffsetY;
_labelOffsetY = o;
return _chart;
};
/**
#### .titleLabelOffsetx([x])
Get of set the x offset (horizontal space between right edge of row and right edge or text. Default x offset is 2px;
**/
_chart.titleLabelOffsetX = function (o) {
if (!arguments.length) return _titleLabelOffsetX;
_titleLabelOffsetX = o;
return _chart;
};
function isSelectedRow (d) {
return _chart.hasFilter(_chart.cappedKeyAccessor(d));
}
return _chart.anchor(parent, chartGroup);
};
/**
## Legend
Legend is a attachable widget that can be added to other dc charts to render horizontal legend labels.
```js
chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
```
Examples:
* [Nasdaq 100 Index](http://dc-js.github.com/dc.js/)
* [Canadian City Crime Stats](http://dc-js.github.com/dc.js/crime/index.html)
**/
dc.legend = function () {
var LABEL_GAP = 2;
var _legend = {},
_parent,
_x = 0,
_y = 0,
_itemHeight = 12,
_gap = 5,
_horizontal = false,
_legendWidth = 560,
_itemWidth = 70;
var _g;
_legend.parent = function (p) {
if (!arguments.length) return _parent;
_parent = p;
return _legend;
};
_legend.render = function () {
_parent.svg().select("g.dc-legend").remove();
_g = _parent.svg().append("g")
.attr("class", "dc-legend")
.attr("transform", "translate(" + _x + "," + _y + ")");
var legendables = _parent.legendables();
var itemEnter = _g.selectAll('g.dc-legend-item')
.data(legendables)
.enter()
.append("g")
.attr("class", "dc-legend-item")
.on("mouseover", function(d) {
_parent.legendHighlight(d);
})
.on("mouseout", function (d) {
_parent.legendReset(d);
})
.on("click", function (d) {
_parent.legendToggle(d);
});
_g.selectAll('g.dc-legend-item')
.classed("fadeout", function(d) {
return d.chart.isLegendableHidden(d);
});
if (legendables.some(dc.pluck('dashstyle'))) {
itemEnter
.append("line")
.attr("x1", 0)
.attr("y1", _itemHeight / 2)
.attr("x2", _itemHeight)
.attr("y2", _itemHeight / 2)
.attr("stroke-width", 2)
.attr("stroke-dasharray", dc.pluck('dashstyle'))
.attr("stroke", dc.pluck('color'));
} else {
itemEnter
.append("rect")
.attr("width", _itemHeight)
.attr("height", _itemHeight)
.attr("fill", function(d){return d?d.color:"blue";});
}
itemEnter.append("text")
.text(dc.pluck('name'))
.attr("x", _itemHeight + LABEL_GAP)
.attr("y", function(){return _itemHeight / 2 + (this.clientHeight?this.clientHeight:13) / 2 - 2;});
var _cumulativeLegendTextWidth = 0;
var row = 0;
itemEnter.attr("transform", function(d, i) {
if(_horizontal) {
var translateBy = "translate(" + _cumulativeLegendTextWidth + "," + row * legendItemHeight() + ")";
if ((_cumulativeLegendTextWidth + _itemWidth) >= _legendWidth) {
++row ;
_cumulativeLegendTextWidth = 0 ;
} else {
_cumulativeLegendTextWidth += _itemWidth;
}
return translateBy;
}
else {
return "translate(0," + i * legendItemHeight() + ")";
}
});
};
function legendItemHeight() {
return _gap + _itemHeight;
}
/**
#### .x([value])
Set or get x coordinate for legend widget. Default value: 0.
**/
_legend.x = function (x) {
if (!arguments.length) return _x;
_x = x;
return _legend;
};
/**
#### .y([value])
Set or get y coordinate for legend widget. Default value: 0.
**/
_legend.y = function (y) {
if (!arguments.length) return _y;
_y = y;
return _legend;
};
/**
#### .gap([value])
Set or get gap between legend items. Default value: 5.
**/
_legend.gap = function (gap) {
if (!arguments.length) return _gap;
_gap = gap;
return _legend;
};
/**
#### .itemHeight([value])
Set or get legend item height. Default value: 12.
**/
_legend.itemHeight = function (h) {
if (!arguments.length) return _itemHeight;
_itemHeight = h;
return _legend;
};
/**
#### .horizontal([boolean])
Position legend horizontally instead of vertically
**/
_legend.horizontal = function(_) {
if (!arguments.length) return _horizontal;
_horizontal = _;
return _legend;
};
/**
#### .legendWidth([value])
Maximum width for horizontal legend. Default value: 560.
**/
_legend.legendWidth = function(_) {
if (!arguments.length) return _legendWidth;
_legendWidth = _;
return _legend;
};
/**
#### .itemWidth([value])
legendItem width for horizontal legend. Default value: 70.
**/
_legend.itemWidth = function(_) {
if (!arguments.length) return _itemWidth;
_itemWidth = _;
return _legend;
};
return _legend;
};
/**
## Scatter Plot
Includes: [Coordinate Grid Mixin](#coordinate-grid-mixin)
A scatter plot chart
#### dc.scatterPlot(parent[, chartGroup])
Create a scatter plot instance and attach it to the given parent element.
Parameters:
* parent : string|compositeChart - any valid d3 single selector representing typically a dom block element such
as a div, or if this scatter plot is a sub-chart in a [Composite Chart](#composite-chart) then pass in the parent composite chart instance.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created scatter plot instance
```js
// create a scatter plot under #chart-container1 element using the default global chart group
var chart1 = dc.scatterPlot("#chart-container1");
// create a scatter plot under #chart-container2 element using chart group A
var chart2 = dc.scatterPlot("#chart-container2", "chartGroupA");
// create a sub-chart under a composite parent chart
var chart3 = dc.scatterPlot(compositeChart);
```
**/
dc.scatterPlot = function (parent, chartGroup) {
var _chart = dc.coordinateGridMixin({});
var _symbol = d3.svg.symbol();
var originalKeyAccessor = _chart.keyAccessor();
_chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; });
_chart.valueAccessor(function (d) { return originalKeyAccessor(d)[1]; });
_chart.colorAccessor(function (d) { return _chart._groupName; });
var _locator = function (d) {
return "translate(" + _chart.x()(_chart.keyAccessor()(d)) + "," +
_chart.y()(_chart.valueAccessor()(d)) + ")";
};
var _symbolSize = 3;
var _highlightedSize = 5;
_symbol.size(function(d) {
return this.filtered ? Math.pow(_highlightedSize, 2) : Math.pow(_symbolSize, 2);
});
dc.override(_chart, "_filter", function(filter) {
if (!arguments.length) return _chart.__filter();
return _chart.__filter(dc.filters.RangedTwoDimensionalFilter(filter));
});
_chart.plotData = function () {
var symbols = _chart.chartBodyG().selectAll("path.symbol")
.data(_chart.data());
symbols
.enter()
.append("path")
.attr("class", "symbol")
.attr("opacity", 0)
.attr("fill", _chart.getColor)
.attr("transform", _locator);
dc.transition(symbols, _chart.transitionDuration())
.attr("opacity", 1)
.attr("fill", _chart.getColor)
.attr("transform", _locator)
.attr("d", _symbol);
dc.transition(symbols.exit(), _chart.transitionDuration())
.attr("opacity", 0).remove();
};
/**
#### .symbol([type])
Get or set the symbol type used for each point. By default a circle. See the D3
[docs](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol_type) for acceptable types;
Type can be a constant or an accessor.
**/
_chart.symbol = function(type) {
if(!arguments.length) return _symbol.type();
_symbol.type(type);
return _chart;
};
/**
#### .symbolSize([radius])
Set or get radius for symbols, default: 3.
**/
_chart.symbolSize = function(s){
if(!arguments.length) return _symbolSize;
_symbolSize = s;
return _chart;
};
/**
#### .highlightedSize([radius])
Set or get radius for highlighted symbols, default: 4.
**/
_chart.highlightedSize = function(s){
if(!arguments.length) return _highlightedSize;
_highlightedSize = s;
return _chart;
};
_chart.legendables = function () {
return [{chart: _chart, name: _chart._groupName, color: _chart.getColor()}];
};
_chart.legendHighlight = function (d) {
resizeSymbolsWhere(function (symbol) {
return symbol.attr('fill') == d.color;
}, _highlightedSize);
_chart.selectAll('.chart-body path.symbol').filter(function () {
return d3.select(this).attr('fill') != d.color;
}).classed('fadeout', true);
};
_chart.legendReset = function (d) {
resizeSymbolsWhere(function (symbol) {
return symbol.attr('fill') == d.color;
}, _symbolSize);
_chart.selectAll('.chart-body path.symbol').filter(function () {
return d3.select(this).attr('fill') != d.color;
}).classed('fadeout', false);
};
function resizeSymbolsWhere(condition, size) {
var symbols = _chart.selectAll('.chart-body path.symbol').filter(function (d) {
return condition(d3.select(this));
});
var oldSize = _symbol.size();
_symbol.size(Math.pow(size, 2));
dc.transition(symbols, _chart.transitionDuration()).attr("d", _symbol);
_symbol.size(oldSize);
}
_chart.setHandlePaths = function () {
// no handle paths for poly-brushes
};
_chart.extendBrush = function () {
var extent = _chart.brush().extent();
console.log("eB b " + extent);
if (_chart.round()) {
extent[0] = extent[0].map(_chart.round());
extent[1] = extent[1].map(_chart.round());
_chart.g().select(".brush")
.call(_chart.brush().extent(extent));
}
console.log("eB a " + extent);
return extent;
};
_chart.brushIsEmpty = function (extent) {
return _chart.brush().empty() || !extent || extent[0][0] >= extent[1][0] || extent[0][1] >= extent[1][1];
};
function resizeFiltered(filter) {
var symbols = _chart.selectAll('.chart-body path.symbol').each(function (d) {
this.filtered = filter && filter.isFiltered(d.key);
});
dc.transition(symbols, _chart.transitionDuration()).attr("d", _symbol);
}
_chart._brushing = function () {
var extent = _chart.extendBrush();
_chart.redrawBrush(_chart.g());
if (_chart.brushIsEmpty(extent)) {
dc.events.trigger(function () {
_chart.filter(null);
dc.redrawAll(_chart.chartGroup());
});
resizeFiltered(false);
} else {
var ranged2DFilter = dc.filters.RangedTwoDimensionalFilter(extent);
dc.events.trigger(function () {
_chart.filter(null);
_chart.filter(ranged2DFilter);
dc.redrawAll(_chart.chartGroup());
}, dc.constants.EVENT_DELAY);
resizeFiltered(ranged2DFilter);
}
};
_chart.setBrushY = function (gBrush) {
gBrush.call(_chart.brush().y(_chart.y()));
};
return _chart.anchor(parent, chartGroup);
};
/**
## Number Display Widget
Includes: [Base Mixin](#base-mixin)
A display of a single numeric value.
Examples:
* [Test Example](http://dc-js.github.io/dc.js/examples/number.html)
#### dc.numberDisplay(parent[, chartGroup])
Create a Number Display instance and attach it to the given parent element.
Unlike other charts, you do not need to set a dimension. Instead a valid group object must be provided and valueAccessor that is expected to return a single value.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div or span
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created number display instance
```js
// create a number display under #chart-container1 element using the default global chart group
var display1 = dc.numberDisplay("#chart-container1");
```
**/
dc.numberDisplay = function (parent, chartGroup) {
var SPAN_CLASS = 'number-display';
var _formatNumber = d3.format(".2s");
var _chart = dc.baseMixin({});
// dimension not required
_chart._mandatoryAttributes(['group']);
/**
#### .value()
Calculate and return the underlying value of the display
**/
_chart.value = function () {
return _chart.data();
};
_chart.data(function (group) {
var valObj = group.value ? group.value() : group.top(1)[0];
return _chart.valueAccessor()(valObj);
});
_chart.transitionDuration(250); // good default
_chart._doRender = function () {
var newValue = _chart.value(),
span = _chart.selectAll("."+SPAN_CLASS);
if(span.empty())
span = span.data([0])
.enter()
.append("span")
.attr("class", SPAN_CLASS);
span.transition()
.duration(_chart.transitionDuration())
.ease('quad-out-in')
.tween("text", function () {
var interp = d3.interpolateNumber(this.lastValue || 0, newValue);
this.lastValue = newValue;
return function (t) {
this.textContent = _chart.formatNumber()(interp(t));
};
});
};
_chart._doRedraw = function(){
return _chart._doRender();
};
/**
#### .formatNumber([formatter])
Get or set a function to format the value for the display. By default `d3.format(".2s");` is used.
**/
_chart.formatNumber = function (_) {
if (!arguments.length) return _formatNumber;
_formatNumber = _;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
## Heat Map
Includes: [Color Mixin](#color-mixin), [Margin Mixin](#margin-mixin), [Base Mixin](#base-mixin)
A heat map is matrix that represents the values of two dimensions of data using colors.
#### dc.heatMap(parent[, chartGroup])
Create a heat map instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created heat map instance
```js
// create a heat map under #chart-container1 element using the default global chart group
var heatMap1 = dc.heatMap("#chart-container1");
// create a heat map under #chart-container2 element using chart group A
var heatMap2 = dc.heatMap("#chart-container2", "chartGroupA");
```
**/
dc.heatMap = function (parent, chartGroup) {
var DEFAULT_BORDER_RADIUS = 6.75;
var _chartBody;
var _cols;
var _rows;
var _xBorderRadius = DEFAULT_BORDER_RADIUS;
var _yBorderRadius = DEFAULT_BORDER_RADIUS;
var _chart = dc.colorMixin(dc.marginMixin(dc.baseMixin({})));
_chart._mandatoryAttributes(['group']);
_chart.title(_chart.colorAccessor());
var _xAxisOnClick = function (d) { filterAxis(0, d); };
var _yAxisOnClick = function (d) { filterAxis(1, d); };
var _boxOnClick = function (d) {
var filter = d.key;
dc.events.trigger(function() {
_chart.filter(filter);
_chart.redrawGroup();
});
};
function filterAxis(axis, value) {
var cellsOnAxis = _chart.selectAll(".box-group").filter( function (d) {
return d.key[axis] == value;
});
var unfilteredCellsOnAxis = cellsOnAxis.filter( function (d) {
return !_chart.hasFilter(d.key);
});
dc.events.trigger(function() {
if(unfilteredCellsOnAxis.empty()) {
cellsOnAxis.each( function (d) {
_chart.filter(d.key);
});
} else {
unfilteredCellsOnAxis.each( function (d) {
_chart.filter(d.key);
});
}
_chart.redrawGroup();
});
}
dc.override(_chart, "filter", function(filter) {
if (!arguments.length) return _chart._filter();
return _chart._filter(dc.filters.TwoDimensionalFilter(filter));
});
function uniq(d,i,a) {
return !i || a[i-1] != d;
}
_chart.rows = function (_) {
if (arguments.length) {
_rows = _;
return _chart;
}
if (_rows) return _rows;
var rowValues = _chart.data().map(_chart.valueAccessor());
rowValues.sort(d3.ascending);
return d3.scale.ordinal().domain(rowValues.filter(uniq));
};
_chart.cols = function (_) {
if (arguments.length) {
_cols = _;
return _chart;
}
if (_cols) return _cols;
var colValues = _chart.data().map(_chart.keyAccessor());
colValues.sort(d3.ascending);
return d3.scale.ordinal().domain(colValues.filter(uniq));
};
_chart._doRender = function () {
_chart.resetSvg();
_chartBody = _chart.svg()
.append("g")
.attr("class", "heatmap")
.attr("transform", "translate(" + _chart.margins().left + "," + _chart.margins().top + ")");
return _chart._doRedraw();
};
_chart._doRedraw = function () {
var rows = _chart.rows(),
cols = _chart.cols(),
rowCount = rows.domain().length,
colCount = cols.domain().length,
boxWidth = Math.floor(_chart.effectiveWidth() / colCount),
boxHeight = Math.floor(_chart.effectiveHeight() / rowCount);
cols.rangeRoundBands([0, _chart.effectiveWidth()]);
rows.rangeRoundBands([_chart.effectiveHeight(), 0]);
var boxes = _chartBody.selectAll("g.box-group").data(_chart.data(), function(d,i) {
return _chart.keyAccessor()(d,i) + '\0' + _chart.valueAccessor()(d,i);
});
var gEnter = boxes.enter().append("g")
.attr("class", "box-group");
gEnter.append("rect")
.attr("class","heat-box")
.attr("fill", "white")
.on("click", _chart.boxOnClick());
gEnter.append("title")
.text(_chart.title());
dc.transition(boxes.selectAll("rect"), _chart.transitionDuration())
.attr("x", function(d,i) { return cols(_chart.keyAccessor()(d,i)); })
.attr("y", function(d,i) { return rows(_chart.valueAccessor()(d,i)); })
.attr("rx", _xBorderRadius)
.attr("ry", _yBorderRadius)
.attr("fill", _chart.getColor)
.attr("width", boxWidth)
.attr("height", boxHeight);
boxes.exit().remove();
var gCols = _chartBody.selectAll("g.cols");
if (gCols.empty())
gCols = _chartBody.append("g").attr("class", "cols axis");
gCols.selectAll('text').data(cols.domain())
.enter().append("text")
.attr("x", function(d) { return cols(d) + boxWidth/2; })
.style("text-anchor", "middle")
.attr("y", _chart.effectiveHeight())
.attr("dy", 12)
.on("click", _chart.xAxisOnClick())
.text(function(d) { return d; });
var gRows = _chartBody.selectAll("g.rows");
if (gRows.empty())
gRows = _chartBody.append("g").attr("class", "rows axis");
gRows.selectAll('text').data(rows.domain())
.enter().append("text")
.attr("dy", 6)
.style("text-anchor", "end")
.attr("x", 0)
.attr("dx", -2)
.on("click", _chart.yAxisOnClick())
.text(function(d) { return d; });
dc.transition(gRows.selectAll('text'), _chart.transitionDuration())
.text(function(d) { return d; })
.attr("y", function(d) { return rows(d) + boxHeight/2; });
if (_chart.hasFilter()) {
_chart.selectAll("g.box-group").each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll("g.box-group").each(function () {
_chart.resetHighlight(this);
});
}
return _chart;
};
_chart.boxOnClick = function (f) {
if (!arguments.length) return _boxOnClick;
_boxOnClick = f;
return _chart;
};
_chart.xAxisOnClick = function (f) {
if (!arguments.length) return _xAxisOnClick;
_xAxisOnClick = f;
return _chart;
};
_chart.yAxisOnClick = function (f) {
if (!arguments.length) return _yAxisOnClick;
_yAxisOnClick = f;
return _chart;
};
_chart.xBorderRadius = function (d) {
if (arguments.length) {
_xBorderRadius = d;
}
return _xBorderRadius;
};
_chart.yBorderRadius = function (d) {
if (arguments.length) {
_yBorderRadius = d;
}
return _yBorderRadius;
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(d.key);
};
return _chart.anchor(parent, chartGroup);
};
// https://raw.github.com/d3/d3-plugins/56f25a3b54446c921e23a7360f1a0dea2508870f/box/box.js
(function() {
// Inspired by http://informationandvisualization.de/blog/box-plot
d3.box = function() {
var width = 1,
height = 1,
duration = 0,
domain = null,
value = Number,
whiskers = boxWhiskers,
quartiles = boxQuartiles,
tickFormat = null;
// For each small multiple…
function box(g) {
g.each(function(d, i) {
d = d.map(value).sort(d3.ascending);
var g = d3.select(this),
n = d.length,
min = d[0],
max = d[n - 1];
// Compute quartiles. Must return exactly 3 elements.
var quartileData = d.quartiles = quartiles(d);
// Compute whiskers. Must return exactly 2 elements, or null.
var whiskerIndices = whiskers && whiskers.call(this, d, i),
whiskerData = whiskerIndices && whiskerIndices.map(function(i) { return d[i]; });
// Compute outliers. If no whiskers are specified, all data are "outliers".
// We compute the outliers as indices, so that we can join across transitions!
var outlierIndices = whiskerIndices
? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
: d3.range(n);
// Compute the new x-scale.
var x1 = d3.scale.linear()
.domain(domain && domain.call(this, d, i) || [min, max])
.range([height, 0]);
// Retrieve the old x-scale, if this is an update.
var x0 = this.__chart__ || d3.scale.linear()
.domain([0, Infinity])
.range(x1.range());
// Stash the new scale.
this.__chart__ = x1;
// Note: the box, median, and box tick elements are fixed in number,
// so we only have to handle enter and update. In contrast, the outliers
// and other elements are variable, so we need to exit them! Variable
// elements also fade in and out.
// Update center line: the vertical line spanning the whiskers.
var center = g.selectAll("line.center")
.data(whiskerData ? [whiskerData] : []);
center.enter().insert("line", "rect")
.attr("class", "center")
.attr("x1", width / 2)
.attr("y1", function(d) { return x0(d[0]); })
.attr("x2", width / 2)
.attr("y2", function(d) { return x0(d[1]); })
.style("opacity", 1e-6)
.transition()
.duration(duration)
.style("opacity", 1)
.attr("y1", function(d) { return x1(d[0]); })
.attr("y2", function(d) { return x1(d[1]); });
center.transition()
.duration(duration)
.style("opacity", 1)
.attr("y1", function(d) { return x1(d[0]); })
.attr("y2", function(d) { return x1(d[1]); });
center.exit().transition()
.duration(duration)
.style("opacity", 1e-6)
.attr("y1", function(d) { return x1(d[0]); })
.attr("y2", function(d) { return x1(d[1]); })
.remove();
// Update innerquartile box.
var box = g.selectAll("rect.box")
.data([quartileData]);
box.enter().append("rect")
.attr("class", "box")
.attr("x", 0)
.attr("y", function(d) { return x0(d[2]); })
.attr("width", width)
.attr("height", function(d) { return x0(d[0]) - x0(d[2]); })
.transition()
.duration(duration)
.attr("y", function(d) { return x1(d[2]); })
.attr("height", function(d) { return x1(d[0]) - x1(d[2]); });
box.transition()
.duration(duration)
.attr("y", function(d) { return x1(d[2]); })
.attr("height", function(d) { return x1(d[0]) - x1(d[2]); });
// Update median line.
var medianLine = g.selectAll("line.median")
.data([quartileData[1]]);
medianLine.enter().append("line")
.attr("class", "median")
.attr("x1", 0)
.attr("y1", x0)
.attr("x2", width)
.attr("y2", x0)
.transition()
.duration(duration)
.attr("y1", x1)
.attr("y2", x1);
medianLine.transition()
.duration(duration)
.attr("y1", x1)
.attr("y2", x1);
// Update whiskers.
var whisker = g.selectAll("line.whisker")
.data(whiskerData || []);
whisker.enter().insert("line", "circle, text")
.attr("class", "whisker")
.attr("x1", 0)
.attr("y1", x0)
.attr("x2", width)
.attr("y2", x0)
.style("opacity", 1e-6)
.transition()
.duration(duration)
.attr("y1", x1)
.attr("y2", x1)
.style("opacity", 1);
whisker.transition()
.duration(duration)
.attr("y1", x1)
.attr("y2", x1)
.style("opacity", 1);
whisker.exit().transition()
.duration(duration)
.attr("y1", x1)
.attr("y2", x1)
.style("opacity", 1e-6)
.remove();
// Update outliers.
var outlier = g.selectAll("circle.outlier")
.data(outlierIndices, Number);
outlier.enter().insert("circle", "text")
.attr("class", "outlier")
.attr("r", 5)
.attr("cx", width / 2)
.attr("cy", function(i) { return x0(d[i]); })
.style("opacity", 1e-6)
.transition()
.duration(duration)
.attr("cy", function(i) { return x1(d[i]); })
.style("opacity", 1);
outlier.transition()
.duration(duration)
.attr("cy", function(i) { return x1(d[i]); })
.style("opacity", 1);
outlier.exit().transition()
.duration(duration)
.attr("cy", function(i) { return x1(d[i]); })
.style("opacity", 1e-6)
.remove();
// Compute the tick format.
var format = tickFormat || x1.tickFormat(8);
// Update box ticks.
var boxTick = g.selectAll("text.box")
.data(quartileData);
boxTick.enter().append("text")
.attr("class", "box")
.attr("dy", ".3em")
.attr("dx", function(d, i) { return i & 1 ? 6 : -6; })
.attr("x", function(d, i) { return i & 1 ? width : 0; })
.attr("y", x0)
.attr("text-anchor", function(d, i) { return i & 1 ? "start" : "end"; })
.text(format)
.transition()
.duration(duration)
.attr("y", x1);
boxTick.transition()
.duration(duration)
.text(format)
.attr("y", x1);
// Update whisker ticks. These are handled separately from the box
// ticks because they may or may not exist, and we want don't want
// to join box ticks pre-transition with whisker ticks post-.
var whiskerTick = g.selectAll("text.whisker")
.data(whiskerData || []);
whiskerTick.enter().append("text")
.attr("class", "whisker")
.attr("dy", ".3em")
.attr("dx", 6)
.attr("x", width)
.attr("y", x0)
.text(format)
.style("opacity", 1e-6)
.transition()
.duration(duration)
.attr("y", x1)
.style("opacity", 1);
whiskerTick.transition()
.duration(duration)
.text(format)
.attr("y", x1)
.style("opacity", 1);
whiskerTick.exit().transition()
.duration(duration)
.attr("y", x1)
.style("opacity", 1e-6)
.remove();
});
d3.timer.flush();
}
box.width = function(x) {
if (!arguments.length) return width;
width = x;
return box;
};
box.height = function(x) {
if (!arguments.length) return height;
height = x;
return box;
};
box.tickFormat = function(x) {
if (!arguments.length) return tickFormat;
tickFormat = x;
return box;
};
box.duration = function(x) {
if (!arguments.length) return duration;
duration = x;
return box;
};
box.domain = function(x) {
if (!arguments.length) return domain;
domain = x == null ? x : d3.functor(x);
return box;
};
box.value = function(x) {
if (!arguments.length) return value;
value = x;
return box;
};
box.whiskers = function(x) {
if (!arguments.length) return whiskers;
whiskers = x;
return box;
};
box.quartiles = function(x) {
if (!arguments.length) return quartiles;
quartiles = x;
return box;
};
return box;
};
function boxWhiskers(d) {
return [0, d.length - 1];
}
function boxQuartiles(d) {
return [
d3.quantile(d, .25),
d3.quantile(d, .5),
d3.quantile(d, .75)
];
}
})();
/**
## Box Plot
Includes: [Coordinate Grid Mixin](#coordinate-grid-mixin)
A box plot is a chart that depicts numerical data via their quartile ranges.
#### dc.boxPlot(parent[, chartGroup])
Create a box plot instance and attach it to the given parent element.
Parameters:
* parent : string - any valid d3 single selector representing typically a dom block element such as a div.
* chartGroup : string (optional) - name of the chart group this chart instance should be placed in. Once a chart is placed
in a certain chart group then any interaction with such instance will only trigger events and redraw within the same
chart group.
Return:
A newly created box plot instance
```js
// create a box plot under #chart-container1 element using the default global chart group
var boxPlot1 = dc.boxPlot("#chart-container1");
// create a box plot under #chart-container2 element using chart group A
var boxPlot2 = dc.boxPlot("#chart-container2", "chartGroupA");
```
**/
dc.boxPlot = function (parent, chartGroup) {
var _chart = dc.coordinateGridMixin({});
var _whisker_iqr_factor = 1.5;
var _whiskers_iqr = default_whiskers_iqr;
var _whiskers = _whiskers_iqr(_whisker_iqr_factor);
var _box = d3.box();
var _tickFormat = null;
var _boxWidth = function (innerChartWidth, xUnits) {
if (_chart.isOrdinal())
return _chart.x().rangeBand();
else
return innerChartWidth / (1 + _chart.boxPadding()) / xUnits;
};
// default padding to handle min/max whisker text
_chart.yAxisPadding(12);
// default to ordinal
_chart.x(d3.scale.ordinal());
_chart.xUnits(dc.units.ordinal);
// valueAccessor should return an array of values that can be coerced into numbers
// or if data is overloaded for a static array of arrays, it should be `Number`.
// Empty arrays are not included.
_chart.data(function(group) {
return group.all().map(function (d) {
d.map = function(accessor) { return accessor.call(d,d); };
return d;
}).filter(function (d) {
var values = _chart.valueAccessor()(d);
return values.length !== 0;
});
});
/**
#### .boxPadding([padding])
Get or set the spacing between boxes as a fraction of bar size. Valid values are within 0-1.
See the [d3 docs](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands)
for a visual description of how the padding is applied.
Default: 0.8
**/
_chart.boxPadding = _chart._rangeBandPadding;
_chart.boxPadding(0.8);
/**
#### .outerPadding([padding])
Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts
or on charts with a custom `.boxWidth`. Padding equivlent in width to `padding * barWidth` will be
added on each side of the chart.
Default: 0.5
**/
_chart.outerPadding = _chart._outerRangeBandPadding;
_chart.outerPadding(0.5);
/**
#### .boxWidth(width || function(innerChartWidth, xUnits) { ... })
Get or set the numerical width of the boxplot box. Provided width may also be a function.
This function takes as parameters the chart width without the right and left margins
as well as the number of x units.
**/
_chart.boxWidth = function(_) {
if (!arguments.length) return _boxWidth;
_boxWidth = d3.functor(_);
return _chart;
};
var boxTransform = function (d, i) {
var xOffset = _chart.x()(_chart.keyAccessor()(d,i));
return "translate(" + xOffset + ",0)";
};
_chart._preprocessData = function () {
if (_chart.elasticX()) {
_chart.x().domain([]);
}
};
_chart.plotData = function () {
var _calculatedBoxWidth = _boxWidth(_chart.effectiveWidth(), _chart.xUnitCount());
_box.whiskers(_whiskers)
.width(_calculatedBoxWidth)
.height(_chart.effectiveHeight())
.value(_chart.valueAccessor())
.domain(_chart.y().domain())
.duration(_chart.transitionDuration())
.tickFormat(_tickFormat);
var boxesG = _chart.chartBodyG().selectAll('g.box').data(_chart.data(), function (d) { return d.key; });
renderBoxes(boxesG);
updateBoxes(boxesG);
removeBoxes(boxesG);
_chart.fadeDeselectedArea();
};
function renderBoxes(boxesG) {
var boxesGEnter = boxesG.enter().append("g");
boxesGEnter
.attr("class", "box")
.attr("transform", boxTransform)
.call(_box)
.on("click", function(d) {
_chart.filter(d.key);
_chart.redrawGroup();
});
}
function updateBoxes(boxesG) {
dc.transition(boxesG, _chart.transitionDuration())
.attr("transform", boxTransform)
.call(_box)
.each(function() {
d3.select(this).select('rect.box').attr("fill", _chart.getColor);
});
}
function removeBoxes(boxesG) {
boxesG.exit().remove().call(_box);
}
_chart.fadeDeselectedArea = function () {
if (_chart.hasFilter()) {
_chart.g().selectAll("g.box").each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.g().selectAll("g.box").each(function () {
_chart.resetHighlight(this);
});
}
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(d.key);
};
_chart.yAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return d3.min(_chart.valueAccessor()(e));
});
return dc.utils.subtract(min, _chart.yAxisPadding());
};
_chart.yAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return d3.max(_chart.valueAccessor()(e));
});
return dc.utils.add(max, _chart.yAxisPadding());
};
/**
#### .tickFormat()
Set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to integer.
```js
// format ticks to 2 decimal places
chart.tickFormat(d3.format(".2f"));
```
**/
_chart.tickFormat = function(x) {
if (!arguments.length) return _tickFormat;
_tickFormat = x;
return _chart;
};
// Returns a function to compute the interquartile range.
function default_whiskers_iqr(k) {
return function (d) {
var q1 = d.quartiles[0],
q3 = d.quartiles[2],
iqr = (q3 - q1) * k,
i = -1,
j = d.length;
while (d[++i] < q1 - iqr);
while (d[--j] > q3 + iqr);
return [i, j];
};
}
return _chart.anchor(parent, chartGroup);
};
// Renamed functions
dc.abstractBubbleChart = dc.bubbleMixin;
dc.baseChart = dc.baseMixin;
dc.capped = dc.capMixin;
dc.colorChart = dc.colorMixin;
dc.coordinateGridChart = dc.coordinateGridMixin;
dc.marginable = dc.marginMixin;
dc.stackableChart = dc.stackMixin;
return dc;})();
(function(exports){
crossfilter.version = "1.3.7";
function crossfilter_identity(d) {
return d;
}
crossfilter.permute = permute;
function permute(array, index) {
for (var i = 0, n = index.length, copy = new Array(n); i < n; ++i) {
copy[i] = array[index[i]];
}
return copy;
}
var bisect = crossfilter.bisect = bisect_by(crossfilter_identity);
bisect.by = bisect_by;
function bisect_by(f) {
// Locate the insertion point for x in a to maintain sorted order. The
// arguments lo and hi may be used to specify a subset of the array which
// should be considered; by default the entire array is used. If x is already
// present in a, the insertion point will be before (to the left of) any
// existing entries. The return value is suitable for use as the first
// argument to `array.splice` assuming that a is already sorted.
//
// The returned insertion point i partitions the array a into two halves so
// that all v < x for v in a[lo:i] for the left side and all v >= x for v in
// a[i:hi] for the right side.
function bisectLeft(a, x, lo, hi) {
while (lo < hi) {
var mid = lo + hi >>> 1;
if (f(a[mid]) < x) lo = mid + 1;
else hi = mid;
}
return lo;
}
// Similar to bisectLeft, but returns an insertion point which comes after (to
// the right of) any existing entries of x in a.
//
// The returned insertion point i partitions the array into two halves so that
// all v <= x for v in a[lo:i] for the left side and all v > x for v in
// a[i:hi] for the right side.
function bisectRight(a, x, lo, hi) {
while (lo < hi) {
var mid = lo + hi >>> 1;
if (x < f(a[mid])) hi = mid;
else lo = mid + 1;
}
return lo;
}
bisectRight.right = bisectRight;
bisectRight.left = bisectLeft;
return bisectRight;
}
var heap = crossfilter.heap = heap_by(crossfilter_identity);
heap.by = heap_by;
function heap_by(f) {
// Builds a binary heap within the specified array a[lo:hi]. The heap has the
// property such that the parent a[lo+i] is always less than or equal to its
// two children: a[lo+2*i+1] and a[lo+2*i+2].
function heap(a, lo, hi) {
var n = hi - lo,
i = (n >>> 1) + 1;
while (--i > 0) sift(a, i, n, lo);
return a;
}
// Sorts the specified array a[lo:hi] in descending order, assuming it is
// already a heap.
function sort(a, lo, hi) {
var n = hi - lo,
t;
while (--n > 0) t = a[lo], a[lo] = a[lo + n], a[lo + n] = t, sift(a, 1, n, lo);
return a;
}
// Sifts the element a[lo+i-1] down the heap, where the heap is the contiguous
// slice of array a[lo:lo+n]. This method can also be used to update the heap
// incrementally, without incurring the full cost of reconstructing the heap.
function sift(a, i, n, lo) {
var d = a[--lo + i],
x = f(d),
child;
while ((child = i << 1) <= n) {
if (child < n && f(a[lo + child]) > f(a[lo + child + 1])) child++;
if (x <= f(a[lo + child])) break;
a[lo + i] = a[lo + child];
i = child;
}
a[lo + i] = d;
}
heap.sort = sort;
return heap;
}
var heapselect = crossfilter.heapselect = heapselect_by(crossfilter_identity);
heapselect.by = heapselect_by;
function heapselect_by(f) {
var heap = heap_by(f);
// Returns a new array containing the top k elements in the array a[lo:hi].
// The returned array is not sorted, but maintains the heap property. If k is
// greater than hi - lo, then fewer than k elements will be returned. The
// order of elements in a is unchanged by this operation.
function heapselect(a, lo, hi, k) {
var queue = new Array(k = Math.min(hi - lo, k)),
min,
i,
x,
d;
for (i = 0; i < k; ++i) queue[i] = a[lo++];
heap(queue, 0, k);
if (lo < hi) {
min = f(queue[0]);
do {
if (x = f(d = a[lo]) > min) {
queue[0] = d;
min = f(heap(queue, 0, k)[0]);
}
} while (++lo < hi);
}
return queue;
}
return heapselect;
}
var insertionsort = crossfilter.insertionsort = insertionsort_by(crossfilter_identity);
insertionsort.by = insertionsort_by;
function insertionsort_by(f) {
function insertionsort(a, lo, hi) {
for (var i = lo + 1; i < hi; ++i) {
for (var j = i, t = a[i], x = f(t); j > lo && f(a[j - 1]) > x; --j) {
a[j] = a[j - 1];
}
a[j] = t;
}
return a;
}
return insertionsort;
}
// Algorithm designed by Vladimir Yaroslavskiy.
// Implementation based on the Dart project; see lib/dart/LICENSE for details.
var quicksort = crossfilter.quicksort = quicksort_by(crossfilter_identity);
quicksort.by = quicksort_by;
function quicksort_by(f) {
var insertionsort = insertionsort_by(f);
function sort(a, lo, hi) {
return (hi - lo < quicksort_sizeThreshold
? insertionsort
: quicksort)(a, lo, hi);
}
function quicksort(a, lo, hi) {
// Compute the two pivots by looking at 5 elements.
var sixth = (hi - lo) / 6 | 0,
i1 = lo + sixth,
i5 = hi - 1 - sixth,
i3 = lo + hi - 1 >> 1, // The midpoint.
i2 = i3 - sixth,
i4 = i3 + sixth;
var e1 = a[i1], x1 = f(e1),
e2 = a[i2], x2 = f(e2),
e3 = a[i3], x3 = f(e3),
e4 = a[i4], x4 = f(e4),
e5 = a[i5], x5 = f(e5);
var t;
// Sort the selected 5 elements using a sorting network.
if (x1 > x2) t = e1, e1 = e2, e2 = t, t = x1, x1 = x2, x2 = t;
if (x4 > x5) t = e4, e4 = e5, e5 = t, t = x4, x4 = x5, x5 = t;
if (x1 > x3) t = e1, e1 = e3, e3 = t, t = x1, x1 = x3, x3 = t;
if (x2 > x3) t = e2, e2 = e3, e3 = t, t = x2, x2 = x3, x3 = t;
if (x1 > x4) t = e1, e1 = e4, e4 = t, t = x1, x1 = x4, x4 = t;
if (x3 > x4) t = e3, e3 = e4, e4 = t, t = x3, x3 = x4, x4 = t;
if (x2 > x5) t = e2, e2 = e5, e5 = t, t = x2, x2 = x5, x5 = t;
if (x2 > x3) t = e2, e2 = e3, e3 = t, t = x2, x2 = x3, x3 = t;
if (x4 > x5) t = e4, e4 = e5, e5 = t, t = x4, x4 = x5, x5 = t;
var pivot1 = e2, pivotValue1 = x2,
pivot2 = e4, pivotValue2 = x4;
// e2 and e4 have been saved in the pivot variables. They will be written
// back, once the partitioning is finished.
a[i1] = e1;
a[i2] = a[lo];
a[i3] = e3;
a[i4] = a[hi - 1];
a[i5] = e5;
var less = lo + 1, // First element in the middle partition.
great = hi - 2; // Last element in the middle partition.
// Note that for value comparison, <, <=, >= and > coerce to a primitive via
// Object.prototype.valueOf; == and === do not, so in order to be consistent
// with natural order (such as for Date objects), we must do two compares.
var pivotsEqual = pivotValue1 <= pivotValue2 && pivotValue1 >= pivotValue2;
if (pivotsEqual) {
// Degenerated case where the partitioning becomes a dutch national flag
// problem.
//
// [ | < pivot | == pivot | unpartitioned | > pivot | ]
// ^ ^ ^ ^ ^
// left less k great right
//
// a[left] and a[right] are undefined and are filled after the
// partitioning.
//
// Invariants:
// 1) for x in ]left, less[ : x < pivot.
// 2) for x in [less, k[ : x == pivot.
// 3) for x in ]great, right[ : x > pivot.
for (var k = less; k <= great; ++k) {
var ek = a[k], xk = f(ek);
if (xk < pivotValue1) {
if (k !== less) {
a[k] = a[less];
a[less] = ek;
}
++less;
} else if (xk > pivotValue1) {
// Find the first element <= pivot in the range [k - 1, great] and
// put [:ek:] there. We know that such an element must exist:
// When k == less, then el3 (which is equal to pivot) lies in the
// interval. Otherwise a[k - 1] == pivot and the search stops at k-1.
// Note that in the latter case invariant 2 will be violated for a
// short amount of time. The invariant will be restored when the
// pivots are put into their final positions.
while (true) {
var greatValue = f(a[great]);
if (greatValue > pivotValue1) {
great--;
// This is the only location in the while-loop where a new
// iteration is started.
continue;
} else if (greatValue < pivotValue1) {
// Triple exchange.
a[k] = a[less];
a[less++] = a[great];
a[great--] = ek;
break;
} else {
a[k] = a[great];
a[great--] = ek;
// Note: if great < k then we will exit the outer loop and fix
// invariant 2 (which we just violated).
break;
}
}
}
}
} else {
// We partition the list into three parts:
// 1. < pivot1
// 2. >= pivot1 && <= pivot2
// 3. > pivot2
//
// During the loop we have:
// [ | < pivot1 | >= pivot1 && <= pivot2 | unpartitioned | > pivot2 | ]
// ^ ^ ^ ^ ^
// left less k great right
//
// a[left] and a[right] are undefined and are filled after the
// partitioning.
//
// Invariants:
// 1. for x in ]left, less[ : x < pivot1
// 2. for x in [less, k[ : pivot1 <= x && x <= pivot2
// 3. for x in ]great, right[ : x > pivot2
for (var k = less; k <= great; k++) {
var ek = a[k], xk = f(ek);
if (xk < pivotValue1) {
if (k !== less) {
a[k] = a[less];
a[less] = ek;
}
++less;
} else {
if (xk > pivotValue2) {
while (true) {
var greatValue = f(a[great]);
if (greatValue > pivotValue2) {
great--;
if (great < k) break;
// This is the only location inside the loop where a new
// iteration is started.
continue;
} else {
// a[great] <= pivot2.
if (greatValue < pivotValue1) {
// Triple exchange.
a[k] = a[less];
a[less++] = a[great];
a[great--] = ek;
} else {
// a[great] >= pivot1.
a[k] = a[great];
a[great--] = ek;
}
break;
}
}
}
}
}
}
// Move pivots into their final positions.
// We shrunk the list from both sides (a[left] and a[right] have
// meaningless values in them) and now we move elements from the first
// and third partition into these locations so that we can store the
// pivots.
a[lo] = a[less - 1];
a[less - 1] = pivot1;
a[hi - 1] = a[great + 1];
a[great + 1] = pivot2;
// The list is now partitioned into three partitions:
// [ < pivot1 | >= pivot1 && <= pivot2 | > pivot2 ]
// ^ ^ ^ ^
// left less great right
// Recursive descent. (Don't include the pivot values.)
sort(a, lo, less - 1);
sort(a, great + 2, hi);
if (pivotsEqual) {
// All elements in the second partition are equal to the pivot. No
// need to sort them.
return a;
}
// In theory it should be enough to call _doSort recursively on the second
// partition.
// The Android source however removes the pivot elements from the recursive
// call if the second partition is too large (more than 2/3 of the list).
if (less < i1 && great > i5) {
var lessValue, greatValue;
while ((lessValue = f(a[less])) <= pivotValue1 && lessValue >= pivotValue1) ++less;
while ((greatValue = f(a[great])) <= pivotValue2 && greatValue >= pivotValue2) --great;
// Copy paste of the previous 3-way partitioning with adaptions.
//
// We partition the list into three parts:
// 1. == pivot1
// 2. > pivot1 && < pivot2
// 3. == pivot2
//
// During the loop we have:
// [ == pivot1 | > pivot1 && < pivot2 | unpartitioned | == pivot2 ]
// ^ ^ ^
// less k great
//
// Invariants:
// 1. for x in [ *, less[ : x == pivot1
// 2. for x in [less, k[ : pivot1 < x && x < pivot2
// 3. for x in ]great, * ] : x == pivot2
for (var k = less; k <= great; k++) {
var ek = a[k], xk = f(ek);
if (xk <= pivotValue1 && xk >= pivotValue1) {
if (k !== less) {
a[k] = a[less];
a[less] = ek;
}
less++;
} else {
if (xk <= pivotValue2 && xk >= pivotValue2) {
while (true) {
var greatValue = f(a[great]);
if (greatValue <= pivotValue2 && greatValue >= pivotValue2) {
great--;
if (great < k) break;
// This is the only location inside the loop where a new
// iteration is started.
continue;
} else {
// a[great] < pivot2.
if (greatValue < pivotValue1) {
// Triple exchange.
a[k] = a[less];
a[less++] = a[great];
a[great--] = ek;
} else {
// a[great] == pivot1.
a[k] = a[great];
a[great--] = ek;
}
break;
}
}
}
}
}
}
// The second partition has now been cleared of pivot elements and looks
// as follows:
// [ * | > pivot1 && < pivot2 | * ]
// ^ ^
// less great
// Sort the second partition using recursive descent.
// The second partition looks as follows:
// [ * | >= pivot1 && <= pivot2 | * ]
// ^ ^
// less great
// Simply sort it by recursive descent.
return sort(a, less, great + 1);
}
return sort;
}
var quicksort_sizeThreshold = 32;
var crossfilter_array8 = crossfilter_arrayUntyped,
crossfilter_array16 = crossfilter_arrayUntyped,
crossfilter_array32 = crossfilter_arrayUntyped,
crossfilter_arrayLengthen = crossfilter_arrayLengthenUntyped,
crossfilter_arrayWiden = crossfilter_arrayWidenUntyped;
if (typeof Uint8Array !== "undefined") {
crossfilter_array8 = function(n) { return new Uint8Array(n); };
crossfilter_array16 = function(n) { return new Uint16Array(n); };
crossfilter_array32 = function(n) { return new Uint32Array(n); };
crossfilter_arrayLengthen = function(array, length) {
if (array.length >= length) return array;
var copy = new array.constructor(length);
copy.set(array);
return copy;
};
crossfilter_arrayWiden = function(array, width) {
var copy;
switch (width) {
case 16: copy = crossfilter_array16(array.length); break;
case 32: copy = crossfilter_array32(array.length); break;
default: throw new Error("invalid array width! " + width + " " + JSON.stringify(array));
}
copy.set(array);
return copy;
};
}
function crossfilter_arrayUntyped(n) {
var array = new Array(n), i = -1;
while (++i < n) array[i] = 0;
return array;
}
function crossfilter_arrayLengthenUntyped(array, length) {
var n = array.length;
while (n < length) array[n++] = 0;
return array;
}
function crossfilter_arrayWidenUntyped(array, width) {
if (width > 32) throw new Error("invalid array width!");
return array;
}
function crossfilter_filterExact(bisect, value) {
return function(values) {
var n = values.length;
return [bisect.left(values, value, 0, n), bisect.right(values, value, 0, n)];
};
}
function crossfilter_filterRange(bisect, range) {
var min = range[0],
max = range[1];
return function(values) {
var n = values.length;
return [bisect.left(values, min, 0, n), bisect.left(values, max, 0, n)];
};
}
function crossfilter_filterAll(values) {
return [0, values.length];
}
function crossfilter_null() {
return null;
}
function crossfilter_zero() {
return 0;
}
function crossfilter_reduceIncrement(p) {
return p + 1;
}
function crossfilter_reduceDecrement(p) {
return p - 1;
}
function crossfilter_reduceAdd(f) {
return function(p, v) {
return p + +f(v);
};
}
function crossfilter_reduceSubtract(f) {
return function(p, v) {
return p - f(v);
};
}
exports.crossfilter = crossfilter;
function crossfilter() {
var crossfilter = {
add: add,
remove: removeData,
dimension: dimension,
groupAll: groupAll,
size: size,
sizem: sizem,
sizeM: sizeM
};
var data = [], // the records
n = 0, // the number of records; data.length
m = 0, // a bit mask representing which dimensions are in use
M = 8, // number of dimensions that can fit in `filters`
filters = crossfilter_array8(0), // M bits per record; 1 is filtered out
filterListeners = [], // when the filters change
dataListeners = [], // when data is added
removeDataListeners = []; // when data is removed
// Adds the specified new records to this crossfilter.
function add(newData) {
console.log("this one");
var n0 = n,
n1 = newData.length;
// If there's actually new data to add…
// Merge the new data into the existing data.
// Lengthen the filter bitset to handle the new records.
// Notify listeners (dimensions and groups) that new data is available.
if (n1) {
data = data.concat(newData);
filters = crossfilter_arrayLengthen(filters, n += n1);
dataListeners.forEach(function(l) { l(newData, n0, n1); });
}
return crossfilter;
}
// Removes all records that match the current filters.
function removeData() {
var newIndex = crossfilter_index(n, n),
removed = [];
for (var i = 0, j = 0; i < n; ++i) {
if (filters[i]) newIndex[i] = j++;
else removed.push(i);
}
// Remove all matching records from groups.
filterListeners.forEach(function(l) { l(0, [], removed); });
// Update indexes.
removeDataListeners.forEach(function(l) { l(newIndex); });
// Remove old filters and data by overwriting.
for (var i = 0, j = 0, k; i < n; ++i) {
if (k = filters[i]) {
if (i !== j) filters[j] = k, data[j] = data[i];
++j;
}
}
data.length = j;
while (n > j) filters[--n] = 0;
}
// Adds a new dimension with the specified value accessor function.
function dimension(value) {
var dimension = {
filter: filter,
filterExact: filterExact,
filterRange: filterRange,
filterFunction: filterFunction,
filterAll: filterAll,
top: top,
bottom: bottom,
group: group,
groupAll: groupAll,
dispose: dispose,
remove: dispose // for backwards-compatibility
};
var one = ~m & -~m, // lowest unset bit as mask, e.g., 00001000
zero = ~one, // inverted one, e.g., 11110111
values, // sorted, cached array
index, // value rank ↦ object id
newValues, // temporary array storing newly-added values
newIndex, // temporary array storing newly-added index
sort = quicksort_by(function(i) { return newValues[i]; }),
refilter = crossfilter_filterAll, // for recomputing filter
refilterFunction, // the custom filter function in use
indexListeners = [], // when data is added
dimensionGroups = [],
lo0 = 0,
hi0 = 0;
// Updating a dimension is a two-stage process. First, we must update the
// associated filters for the newly-added records. Once all dimensions have
// updated their filters, the groups are notified to update.
dataListeners.unshift(preAdd);
dataListeners.push(postAdd);
removeDataListeners.push(removeData);
// Incorporate any existing data into this dimension, and make sure that the
// filter bitset is wide enough to handle the new dimension.
m |= one;
if (M >= 32 ? !one : m & (1 << M) - 1) {
filters = crossfilter_arrayWiden(filters, M <<= 1);
}
preAdd(data, 0, n);
postAdd(data, 0, n);
// Incorporates the specified new records into this dimension.
// This function is responsible for updating filters, values, and index.
function preAdd(newData, n0, n1) {
// Permute new values into natural order using a sorted index.
newValues = newData.map(value);
newIndex = sort(crossfilter_range(n1), 0, n1);
newValues = permute(newValues, newIndex);
// Bisect newValues to determine which new records are selected.
var bounds = refilter(newValues), lo1 = bounds[0], hi1 = bounds[1], i;
if (refilterFunction) {
for (i = 0; i < n1; ++i) {
if (!refilterFunction(newValues[i], i)) filters[newIndex[i] + n0] |= one;
}
} else {
for (i = 0; i < lo1; ++i) filters[newIndex[i] + n0] |= one;
for (i = hi1; i < n1; ++i) filters[newIndex[i] + n0] |= one;
}
// If this dimension previously had no data, then we don't need to do the
// more expensive merge operation; use the new values and index as-is.
if (!n0) {
values = newValues;
index = newIndex;
lo0 = lo1;
hi0 = hi1;
return;
}
var oldValues = values,
oldIndex = index,
i0 = 0,
i1 = 0;
// Otherwise, create new arrays into which to merge new and old.
values = new Array(n);
index = crossfilter_index(n, n);
// Merge the old and new sorted values, and old and new index.
for (i = 0; i0 < n0 && i1 < n1; ++i) {
if (oldValues[i0] < newValues[i1]) {
values[i] = oldValues[i0];
index[i] = oldIndex[i0++];
} else {
values[i] = newValues[i1];
index[i] = newIndex[i1++] + n0;
}
}
// Add any remaining old values.
for (; i0 < n0; ++i0, ++i) {
values[i] = oldValues[i0];
index[i] = oldIndex[i0];
}
// Add any remaining new values.
for (; i1 < n1; ++i1, ++i) {
values[i] = newValues[i1];
index[i] = newIndex[i1] + n0;
}
// Bisect again to recompute lo0 and hi0.
bounds = refilter(values), lo0 = bounds[0], hi0 = bounds[1];
}
// When all filters have updated, notify index listeners of the new values.
function postAdd(newData, n0, n1) {
indexListeners.forEach(function(l) { l(newValues, newIndex, n0, n1); });
newValues = newIndex = null;
}
function removeData(reIndex) {
for (var i = 0, j = 0, k; i < n; ++i) {
if (filters[k = index[i]]) {
if (i !== j) values[j] = values[i];
index[j] = reIndex[k];
++j;
}
}
values.length = j;
while (j < n) index[j++] = 0;
// Bisect again to recompute lo0 and hi0.
var bounds = refilter(values);
lo0 = bounds[0], hi0 = bounds[1];
}
// Updates the selected values based on the specified bounds [lo, hi].
// This implementation is used by all the public filter methods.
function filterIndexBounds(bounds) {
var lo1 = bounds[0],
hi1 = bounds[1];
if (refilterFunction) {
refilterFunction = null;
filterIndexFunction(function(d, i) { return lo1 <= i && i < hi1; });
lo0 = lo1;
hi0 = hi1;
return dimension;
}
var i,
j,
k,
added = [],
removed = [];
// Fast incremental update based on previous lo index.
if (lo1 < lo0) {
for (i = lo1, j = Math.min(lo0, hi1); i < j; ++i) {
filters[k = index[i]] ^= one;
added.push(k);
}
} else if (lo1 > lo0) {
for (i = lo0, j = Math.min(lo1, hi0); i < j; ++i) {
filters[k = index[i]] ^= one;
removed.push(k);
}
}
// Fast incremental update based on previous hi index.
if (hi1 > hi0) {
for (i = Math.max(lo1, hi0), j = hi1; i < j; ++i) {
filters[k = index[i]] ^= one;
added.push(k);
}
} else if (hi1 < hi0) {
for (i = Math.max(lo0, hi1), j = hi0; i < j; ++i) {
filters[k = index[i]] ^= one;
removed.push(k);
}
}
lo0 = lo1;
hi0 = hi1;
filterListeners.forEach(function(l) { l(one, added, removed); });
return dimension;
}
// Filters this dimension using the specified range, value, or null.
// If the range is null, this is equivalent to filterAll.
// If the range is an array, this is equivalent to filterRange.
// Otherwise, this is equivalent to filterExact.
function filter(range) {
return range == null
? filterAll() : Array.isArray(range)
? filterRange(range) : typeof range === "function"
? filterFunction(range)
: filterExact(range);
}
// Filters this dimension to select the exact value.
function filterExact(value) {
return filterIndexBounds((refilter = crossfilter_filterExact(bisect, value))(values));
}
// Filters this dimension to select the specified range [lo, hi].
// The lower bound is inclusive, and the upper bound is exclusive.
function filterRange(range) {
return filterIndexBounds((refilter = crossfilter_filterRange(bisect, range))(values));
}
// Clears any filters on this dimension.
function filterAll() {
return filterIndexBounds((refilter = crossfilter_filterAll)(values));
}
// Filters this dimension using an arbitrary function.
function filterFunction(f) {
refilter = crossfilter_filterAll;
filterIndexFunction(refilterFunction = f);
lo0 = 0;
hi0 = n;
return dimension;
}
function filterIndexFunction(f) {
var i,
k,
x,
added = [],
removed = [];
for (i = 0; i < n; ++i) {
if (!(filters[k = index[i]] & one) ^ (x = f(values[i], i))) {
if (x) filters[k] &= zero, added.push(k);
else filters[k] |= one, removed.push(k);
}
}
filterListeners.forEach(function(l) { l(one, added, removed); });
}
// Returns the top K selected records based on this dimension's order.
// Note: observes this dimension's filter, unlike group and groupAll.
function top(k) {
var array = [],
i = hi0,
j;
while (--i >= lo0 && k > 0) {
if (!filters[j = index[i]]) {
array.push(data[j]);
--k;
}
}
return array;
}
// Returns the bottom K selected records based on this dimension's order.
// Note: observes this dimension's filter, unlike group and groupAll.
function bottom(k) {
var array = [],
i = lo0,
j;
while (i < hi0 && k > 0) {
if (!filters[j = index[i]]) {
array.push(data[j]);
--k;
}
i++;
}
return array;
}
// Adds a new group to this dimension, using the specified key function.
function group(key) {
var group = {
top: top,
all: all,
reduce: reduce,
reduceCount: reduceCount,
reduceSum: reduceSum,
order: order,
orderNatural: orderNatural,
size: size,
dispose: dispose,
remove: dispose // for backwards-compatibility
};
// Ensure that this group will be removed when the dimension is removed.
dimensionGroups.push(group);
var groups, // array of {key, value}
groupIndex, // object id ↦ group id
groupWidth = 8,
groupCapacity = crossfilter_capacity(groupWidth),
k = 0, // cardinality
select,
heap,
reduceAdd,
reduceRemove,
reduceInitial,
update = crossfilter_null,
reset = crossfilter_null,
resetNeeded = true;
if (arguments.length < 1) key = crossfilter_identity;
// The group listens to the crossfilter for when any dimension changes, so
// that it can update the associated reduce values. It must also listen to
// the parent dimension for when data is added, and compute new keys.
filterListeners.push(update);
indexListeners.push(add);
removeDataListeners.push(removeData);
// Incorporate any existing data into the grouping.
add(values, index, 0, n);
// Incorporates the specified new values into this group.
// This function is responsible for updating groups and groupIndex.
function add(newValues, newIndex, n0, n1) {
var oldGroups = groups,
reIndex = crossfilter_index(k, groupCapacity),
add = reduceAdd,
initial = reduceInitial,
k0 = k, // old cardinality
i0 = 0, // index of old group
i1 = 0, // index of new record
j, // object id
g0, // old group
x0, // old key
x1, // new key
g, // group to add
x; // key of group to add
// If a reset is needed, we don't need to update the reduce values.
if (resetNeeded) add = initial = crossfilter_null;
// Reset the new groups (k is a lower bound).
// Also, make sure that groupIndex exists and is long enough.
groups = new Array(k), k = 0;
groupIndex = k0 > 1 ? crossfilter_arrayLengthen(groupIndex, n) : crossfilter_index(n, groupCapacity);
// Get the first old key (x0 of g0), if it exists.
if (k0) x0 = (g0 = oldGroups[0]).key;
// Find the first new key (x1), skipping NaN keys.
while (i1 < n1 && !((x1 = key(newValues[i1])) >= x1)) ++i1;
// While new keys remain…
while (i1 < n1) {
// Determine the lesser of the two current keys; new and old.
// If there are no old keys remaining, then always add the new key.
if (g0 && x0 <= x1) {
g = g0, x = x0;
// Record the new index of the old group.
reIndex[i0] = k;
// Retrieve the next old key.
if (g0 = oldGroups[++i0]) x0 = g0.key;
} else {
g = {key: x1, value: initial()}, x = x1;
}
// Add the lesser group.
groups[k] = g;
// Add any selected records belonging to the added group, while
// advancing the new key and populating the associated group index.
while (!(x1 > x)) {
groupIndex[j = newIndex[i1] + n0] = k;
if (!(filters[j] & zero)) g.value = add(g.value, data[j]);
if (++i1 >= n1) break;
x1 = key(newValues[i1]);
}
groupIncrement();
}
// Add any remaining old groups that were greater than all new keys.
// No incremental reduce is needed; these groups have no new records.
// Also record the new index of the old group.
while (i0 < k0) {
groups[reIndex[i0] = k] = oldGroups[i0++];
groupIncrement();
}
// If we added any new groups before any old groups,
// update the group index of all the old records.
if (k > i0) for (i0 = 0; i0 < n0; ++i0) {
groupIndex[i0] = reIndex[groupIndex[i0]];
}
// Modify the update and reset behavior based on the cardinality.
// If the cardinality is less than or equal to one, then the groupIndex
// is not needed. If the cardinality is zero, then there are no records
// and therefore no groups to update or reset. Note that we also must
// change the registered listener to point to the new method.
j = filterListeners.indexOf(update);
if (k > 1) {
update = updateMany;
reset = resetMany;
} else {
if (k === 1) {
update = updateOne;
reset = resetOne;
} else {
update = crossfilter_null;
reset = crossfilter_null;
}
groupIndex = null;
}
filterListeners[j] = update;
// Count the number of added groups,
// and widen the group index as needed.
function groupIncrement() {
if (++k === groupCapacity) {
reIndex = crossfilter_arrayWiden(reIndex, groupWidth <<= 1);
groupIndex = crossfilter_arrayWiden(groupIndex, groupWidth);
groupCapacity = crossfilter_capacity(groupWidth);
}
}
}
function removeData() {
if (k > 1) {
var oldK = k,
oldGroups = groups,
seenGroups = crossfilter_index(oldK, oldK);
// Filter out non-matches by copying matching group index entries to
// the beginning of the array.
for (var i = 0, j = 0; i < n; ++i) {
if (filters[i]) {
seenGroups[groupIndex[j] = groupIndex[i]] = 1;
++j;
}
}
// Reassemble groups including only those groups that were referred
// to by matching group index entries. Note the new group index in
// seenGroups.
groups = [], k = 0;
for (i = 0; i < oldK; ++i) {
if (seenGroups[i]) {
seenGroups[i] = k++;
groups.push(oldGroups[i]);
}
}
if (k > 1) {
// Reindex the group index using seenGroups to find the new index.
for (var i = 0; i < j; ++i) groupIndex[i] = seenGroups[groupIndex[i]];
} else {
groupIndex = null;
}
filterListeners[filterListeners.indexOf(update)] = k > 1
? (reset = resetMany, update = updateMany)
: k === 1 ? (reset = resetOne, update = updateOne)
: reset = update = crossfilter_null;
} else if (k === 1) {
for (var i = 0; i < n; ++i) if (filters[i]) return;
groups = [], k = 0;
filterListeners[filterListeners.indexOf(update)] =
update = reset = crossfilter_null;
}
}
// Reduces the specified selected or deselected records.
// This function is only used when the cardinality is greater than 1.
function updateMany(filterOne, added, removed) {
if (filterOne === one || resetNeeded) return;
var i,
k,
n,
g;
// Add the added values.
for (i = 0, n = added.length; i < n; ++i) {
if (!(filters[k = added[i]] & zero)) {
g = groups[groupIndex[k]];
g.value = reduceAdd(g.value, data[k]);
}
}
// Remove the removed values.
for (i = 0, n = removed.length; i < n; ++i) {
if ((filters[k = removed[i]] & zero) === filterOne) {
g = groups[groupIndex[k]];
g.value = reduceRemove(g.value, data[k]);
}
}
}
// Reduces the specified selected or deselected records.
// This function is only used when the cardinality is 1.
function updateOne(filterOne, added, removed) {
if (filterOne === one || resetNeeded) return;
var i,
k,
n,
g = groups[0];
// Add the added values.
for (i = 0, n = added.length; i < n; ++i) {
if (!(filters[k = added[i]] & zero)) {
g.value = reduceAdd(g.value, data[k]);
}
}
// Remove the removed values.
for (i = 0, n = removed.length; i < n; ++i) {
if ((filters[k = removed[i]] & zero) === filterOne) {
g.value = reduceRemove(g.value, data[k]);
}
}
}
// Recomputes the group reduce values from scratch.
// This function is only used when the cardinality is greater than 1.
function resetMany() {
var i,
g;
// Reset all group values.
for (i = 0; i < k; ++i) {
groups[i].value = reduceInitial();
}
// Add any selected records.
for (i = 0; i < n; ++i) {
if (!(filters[i] & zero)) {
g = groups[groupIndex[i]];
g.value = reduceAdd(g.value, data[i]);
}
}
}
// Recomputes the group reduce values from scratch.
// This function is only used when the cardinality is 1.
function resetOne() {
var i,
g = groups[0];
// Reset the singleton group values.
g.value = reduceInitial();
// Add any selected records.
for (i = 0; i < n; ++i) {
if (!(filters[i] & zero)) {
g.value = reduceAdd(g.value, data[i]);
}
}
}
// Returns the array of group values, in the dimension's natural order.
function all() {
if (resetNeeded) reset(), resetNeeded = false;
return groups;
}
// Returns a new array containing the top K group values, in reduce order.
function top(k) {
var top = select(all(), 0, groups.length, k);
return heap.sort(top, 0, top.length);
}
// Sets the reduce behavior for this group to use the specified functions.
// This method lazily recomputes the reduce values, waiting until needed.
function reduce(add, remove, initial) {
reduceAdd = add;
reduceRemove = remove;
reduceInitial = initial;
resetNeeded = true;
return group;
}
// A convenience method for reducing by count.
function reduceCount() {
return reduce(crossfilter_reduceIncrement, crossfilter_reduceDecrement, crossfilter_zero);
}
// A convenience method for reducing by sum(value).
function reduceSum(value) {
return reduce(crossfilter_reduceAdd(value), crossfilter_reduceSubtract(value), crossfilter_zero);
}
// Sets the reduce order, using the specified accessor.
function order(value) {
select = heapselect_by(valueOf);
heap = heap_by(valueOf);
function valueOf(d) { return value(d.value); }
return group;
}
// A convenience method for natural ordering by reduce value.
function orderNatural() {
return order(crossfilter_identity);
}
// Returns the cardinality of this group, irrespective of any filters.
function size() {
return k;
}
// Removes this group and associated event listeners.
function dispose() {
var i = filterListeners.indexOf(update);
if (i >= 0) filterListeners.splice(i, 1);
i = indexListeners.indexOf(add);
if (i >= 0) indexListeners.splice(i, 1);
i = removeDataListeners.indexOf(removeData);
if (i >= 0) removeDataListeners.splice(i, 1);
return group;
}
return reduceCount().orderNatural();
}
// A convenience function for generating a singleton group.
function groupAll() {
var g = group(crossfilter_null), all = g.all;
delete g.all;
delete g.top;
delete g.order;
delete g.orderNatural;
delete g.size;
g.value = function() { return all()[0].value; };
return g;
}
// Removes this dimension and associated groups and event listeners.
function dispose() {
dimensionGroups.forEach(function(group) { group.dispose(); });
var i = dataListeners.indexOf(preAdd);
if (i >= 0) dataListeners.splice(i, 1);
i = dataListeners.indexOf(postAdd);
if (i >= 0) dataListeners.splice(i, 1);
i = removeDataListeners.indexOf(removeData);
if (i >= 0) removeDataListeners.splice(i, 1);
for (i = 0; i < n; ++i) filters[i] &= zero;
m &= zero;
return dimension;
}
return dimension;
}
// A convenience method for groupAll on a dummy dimension.
// This implementation can be optimized since it always has cardinality 1.
function groupAll() {
var group = {
reduce: reduce,
reduceCount: reduceCount,
reduceSum: reduceSum,
value: value,
dispose: dispose,
remove: dispose // for backwards-compatibility
};
var reduceValue,
reduceAdd,
reduceRemove,
reduceInitial,
resetNeeded = true;
// The group listens to the crossfilter for when any dimension changes, so
// that it can update the reduce value. It must also listen to the parent
// dimension for when data is added.
filterListeners.push(update);
dataListeners.push(add);
// For consistency; actually a no-op since resetNeeded is true.
add(data, 0, n);
// Incorporates the specified new values into this group.
function add(newData, n0) {
var i;
if (resetNeeded) return;
// Add the added values.
for (i = n0; i < n; ++i) {
if (!filters[i]) {
reduceValue = reduceAdd(reduceValue, data[i]);
}
}
}
// Reduces the specified selected or deselected records.
function update(filterOne, added, removed) {
var i,
k,
n;
if (resetNeeded) return;
// Add the added values.
for (i = 0, n = added.length; i < n; ++i) {
if (!filters[k = added[i]]) {
reduceValue = reduceAdd(reduceValue, data[k]);
}
}
// Remove the removed values.
for (i = 0, n = removed.length; i < n; ++i) {
if (filters[k = removed[i]] === filterOne) {
reduceValue = reduceRemove(reduceValue, data[k]);
}
}
}
// Recomputes the group reduce value from scratch.
function reset() {
var i;
reduceValue = reduceInitial();
for (i = 0; i < n; ++i) {
if (!filters[i]) {
reduceValue = reduceAdd(reduceValue, data[i]);
}
}
}
// Sets the reduce behavior for this group to use the specified functions.
// This method lazily recomputes the reduce value, waiting until needed.
function reduce(add, remove, initial) {
reduceAdd = add;
reduceRemove = remove;
reduceInitial = initial;
resetNeeded = true;
return group;
}
// A convenience method for reducing by count.
function reduceCount() {
return reduce(crossfilter_reduceIncrement, crossfilter_reduceDecrement, crossfilter_zero);
}
// A convenience method for reducing by sum(value).
function reduceSum(value) {
return reduce(crossfilter_reduceAdd(value), crossfilter_reduceSubtract(value), crossfilter_zero);
}
// Returns the computed reduce value.
function value() {
if (resetNeeded) reset(), resetNeeded = false;
return reduceValue;
}
// Removes this group and associated event listeners.
function dispose() {
var i = filterListeners.indexOf(update);
if (i >= 0) filterListeners.splice(i);
i = dataListeners.indexOf(add);
if (i >= 0) dataListeners.splice(i);
return group;
}
return reduceCount();
}
// Returns the number of records in this crossfilter, irrespective of any filters.
function size() {
return n;
}
function sizem() {
return m;
}
function sizeM() {
return M;
}
return arguments.length
? add(arguments[0])
: crossfilter;
}
// Returns an array of size n, big enough to store ids up to m.
function crossfilter_index(n, m) {
return (m < 0x101
? crossfilter_array8 : m < 0x10001
? crossfilter_array16
: crossfilter_array32)(n);
}
// Constructs a new array of size n, with sequential values from 0 to n - 1.
function crossfilter_range(n) {
var range = crossfilter_index(n, n);
for (var i = -1; ++i < n;) range[i] = i;
return range;
}
function crossfilter_capacity(w) {
return w === 8
? 0x100 : w === 16
? 0x10000
: 0x100000000;
}
})(typeof exports !== 'undefined' && exports || this);