Created
December 30, 2014 16:50
-
-
Save amergin/9356b6d40cec0afe9c8a to your computer and use it in GitHub Desktop.
Problem with DC.js series chart grouping and sorting
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var createSVG = function($scope, config) { | |
var getLabel = function(variable, circle) { | |
return variable + " (" + circle.name() + ")"; | |
}; | |
var getLabels = function() { | |
var ret = []; | |
_.each(config.groups, function(group, name) { | |
_.each( $scope.filterOnSet(group, name).all(), function(obj) { | |
var circle = obj.key.circle; | |
ret.push( getLabel(obj.key.variable, circle) ); | |
}); | |
}); | |
return ret; | |
}; | |
var onClick = function(d, xCoord, yCoord) { | |
var variable = d.data.key.variable; | |
var config = { | |
variables: { x: d.data.key.variable }, | |
pooled: false, | |
somSpecial: true | |
}; | |
// remove the old histogram window, if any | |
$scope.window.handler.removeByType('histogram'); | |
// draw a new one | |
PlotService.drawHistogram( config, $scope.window.handler ); | |
}; | |
var resizeSVG = function(chart) { | |
var ratio = config.size.aspectRatio === 'stretch' ? 'none' : 'xMinYMin'; | |
chart.select("svg") | |
.attr("viewBox", "0 0 " + [config.size.width, config.size.height].join(" ") ) | |
.attr("preserveAspectRatio", ratio) | |
.attr("width", "100%") | |
.attr("height", "100%"); | |
// chart.redraw(); | |
}; | |
// var sortByLowerCase = function(a,b) { | |
// var aLower = a.valueOf().toLowerCase(), | |
// bLower = b.valueOf().toLowerCase(); | |
// if( aLower < bLower ) { | |
// console.log (aLower, " < ", bLower); | |
// return -1; } | |
// if( aLower > bLower ) { | |
// console.log (aLower, " > ", bLower); | |
// return 1; | |
// } | |
// console.log(aLower, " = ", bLower); | |
// return 0; | |
// }; | |
// var sortByLabel = function(a,b) { | |
// var aLabel = getLabel(a.key.variable, a.key.circle); | |
// var bLabel = getLabel(b.key.variable, b.key.circle); | |
// if( aLabel < bLabel ) { return -1; } | |
// if( aLabel > bLabel ) { return 1; } | |
// return 0; | |
// }; | |
// 1. create composite chart | |
$scope.histogram = dc.seriesChart(config.element[0], constants.groups.histogram.nonInteractive) | |
.chart(dc.barChart) | |
.dimension(config.dimension) | |
.group(config.filter(config.groups)) | |
.seriesAccessor( function(d) { | |
return d.key.variable; | |
}) | |
.seriesSort(function(a,b) { | |
return d3.ascending(a.toLowerCase(), b.toLowerCase()); | |
}) //sortByLowerCase) | |
.valueSort(function(a,b) { | |
var aLabel = getLabel(a.key.variable, a.key.circle); | |
var bLabel = getLabel(b.key.variable, b.key.circle); | |
return d3.ascending(aLabel.toLowerCase(), bLabel.toLowerCase()); | |
}) //sortByLabel) | |
.width(config.size.width) | |
.height(config.size.height) | |
.elasticY(true) | |
.elasticX(true) | |
.brushOn(false) | |
.renderTitle(false) | |
.colors(config.colorScale) | |
.title(function(d) { | |
var variable = d.key.variable; | |
var totalVal = config.totalReduced.value()[variable]; | |
var value = d.value.valueOf(); | |
var totalStd = d3.round(totalVal.valueOf().stddev, 3); | |
var circle = d.key.circle; | |
return [ | |
'Circle filter: ' + circle.name(), | |
'Variable: ' + variable, | |
'Mean of ' + variable + ": " + d3.round(value.mean, 3), | |
'STD (all samples): ' + totalStd, | |
'Sample count: ' + d.value.n || 0 | |
].join("\n"); | |
}) | |
.x( d3.scale.ordinal().domain(config.groupNames) ) | |
.xUnits(dc.units.ordinal) | |
.margins({ | |
top: 10, | |
right: 10, | |
bottom: 90, | |
left: 40 | |
}) | |
.childOptions({ | |
colorAccessor: function(d) { | |
return d.key.circle.id(); | |
}, | |
barPadding: 0.30, | |
gap: 5 | |
}) | |
.valueAccessor(function(d) { // is y direction | |
var variable = d.key.variable; | |
var mean = d.value.mean; | |
var constant = 100; | |
var totalVal = config.totalReduced.value()[variable]; | |
var totalStd = totalVal.valueOf().stddev; | |
var totalMean = totalVal.valueOf().mean; | |
return ( mean - totalMean ) / totalStd * constant; | |
}) | |
.keyAccessor(function(d) { | |
var circle = d.key.circle, | |
variable = d.key.variable; | |
return getLabel(variable, circle); | |
}) | |
.renderlet( function(chart) { | |
// rotate labels | |
chart.selectAll('g.x text') | |
.attr('transform', "rotate(-65)") | |
.style("text-anchor", "end") | |
.attr('dx', "-1em"); | |
chart.selectAll('rect').on("click", onClick); | |
}) | |
.on("postRender", resizeSVG) | |
.on("postRedraw", resizeSVG); | |
// hide y axis | |
// $scope.histogram.yAxis().ticks(0); //.tickFormat( function(v) { return ''; } ); | |
$scope.histogram.render(); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment