dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
1 lines • 4.94 kB
Plain Text
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css" />
<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
<script src="https://unpkg.com/dc@3/dc.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
</head>
<body>
<div id="select"></div>
<div id="test"></div>
<script>
var chart = dc.barChart("#test");
var experiments = [{"Expt":1,"Run":1,"Speed":850},{"Expt":1,"Run":2,"Speed":740},{"Expt":1,"Run":3,"Speed":900},{"Expt":1,"Run":4,"Speed":1070},{"Expt":1,"Run":5,"Speed":930},{"Expt":1,"Run":6,"Speed":850},{"Expt":1,"Run":7,"Speed":950},{"Expt":1,"Run":8,"Speed":980},{"Expt":1,"Run":9,"Speed":980},{"Expt":1,"Run":10,"Speed":880},{"Expt":1,"Run":11,"Speed":1000},{"Expt":1,"Run":12,"Speed":980},{"Expt":1,"Run":13,"Speed":930},{"Expt":1,"Run":14,"Speed":650},{"Expt":1,"Run":15,"Speed":760},{"Expt":1,"Run":16,"Speed":810},{"Expt":1,"Run":17,"Speed":1000},{"Expt":1,"Run":18,"Speed":1000},{"Expt":1,"Run":19,"Speed":960},{"Expt":1,"Run":20,"Speed":960},{"Expt":2,"Run":1,"Speed":960},{"Expt":2,"Run":2,"Speed":940},{"Expt":2,"Run":3,"Speed":960},{"Expt":2,"Run":4,"Speed":940},{"Expt":2,"Run":5,"Speed":880},{"Expt":2,"Run":6,"Speed":800},{"Expt":2,"Run":7,"Speed":850},{"Expt":2,"Run":8,"Speed":880},{"Expt":2,"Run":9,"Speed":900},{"Expt":2,"Run":10,"Speed":840},{"Expt":2,"Run":11,"Speed":830},{"Expt":2,"Run":12,"Speed":790},{"Expt":2,"Run":13,"Speed":810},{"Expt":2,"Run":14,"Speed":880},{"Expt":2,"Run":15,"Speed":880},{"Expt":2,"Run":16,"Speed":830},{"Expt":2,"Run":17,"Speed":800},{"Expt":2,"Run":18,"Speed":790},{"Expt":2,"Run":19,"Speed":760},{"Expt":2,"Run":20,"Speed":800},{"Expt":3,"Run":1,"Speed":880},{"Expt":3,"Run":2,"Speed":880},{"Expt":3,"Run":3,"Speed":880},{"Expt":3,"Run":4,"Speed":860},{"Expt":3,"Run":5,"Speed":720},{"Expt":3,"Run":6,"Speed":720},{"Expt":3,"Run":7,"Speed":620},{"Expt":3,"Run":8,"Speed":860},{"Expt":3,"Run":9,"Speed":970},{"Expt":3,"Run":10,"Speed":950},{"Expt":3,"Run":11,"Speed":880},{"Expt":3,"Run":12,"Speed":910},{"Expt":3,"Run":13,"Speed":850},{"Expt":3,"Run":14,"Speed":870},{"Expt":3,"Run":15,"Speed":840},{"Expt":3,"Run":16,"Speed":840},{"Expt":3,"Run":17,"Speed":850},{"Expt":3,"Run":18,"Speed":840},{"Expt":3,"Run":19,"Speed":840},{"Expt":3,"Run":20,"Speed":840},{"Expt":4,"Run":1,"Speed":890},{"Expt":4,"Run":2,"Speed":810},{"Expt":4,"Run":3,"Speed":810},{"Expt":4,"Run":4,"Speed":820},{"Expt":4,"Run":5,"Speed":800},{"Expt":4,"Run":6,"Speed":770},{"Expt":4,"Run":7,"Speed":760},{"Expt":4,"Run":8,"Speed":740},{"Expt":4,"Run":9,"Speed":750},{"Expt":4,"Run":10,"Speed":760},{"Expt":4,"Run":11,"Speed":910},{"Expt":4,"Run":12,"Speed":920},{"Expt":4,"Run":13,"Speed":890},{"Expt":4,"Run":14,"Speed":860},{"Expt":4,"Run":15,"Speed":880},{"Expt":4,"Run":16,"Speed":720},{"Expt":4,"Run":17,"Speed":840},{"Expt":4,"Run":18,"Speed":850},{"Expt":4,"Run":19,"Speed":850},{"Expt":4,"Run":20,"Speed":780},{"Expt":5,"Run":1,"Speed":890},{"Expt":5,"Run":2,"Speed":840},{"Expt":5,"Run":3,"Speed":780},{"Expt":5,"Run":4,"Speed":810},{"Expt":5,"Run":5,"Speed":760},{"Expt":5,"Run":6,"Speed":810},{"Expt":5,"Run":7,"Speed":790},{"Expt":5,"Run":8,"Speed":810},{"Expt":5,"Run":9,"Speed":820},{"Expt":5,"Run":10,"Speed":850},{"Expt":5,"Run":11,"Speed":870},{"Expt":5,"Run":12,"Speed":870},{"Expt":5,"Run":13,"Speed":810},{"Expt":5,"Run":14,"Speed":740},{"Expt":5,"Run":15,"Speed":810},{"Expt":5,"Run":16,"Speed":940},{"Expt":5,"Run":17,"Speed":950},{"Expt":5,"Run":18,"Speed":800},{"Expt":5,"Run":19,"Speed":810},{"Expt":5,"Run":20,"Speed":870}];
var ndx = crossfilter(experiments),
runDimension = ndx.dimension(function(d) {return +d.Run;}),
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;}),
exptDim = ndx.dimension(function(d) {return d.Expt;}),
exptGroup = exptDim.group();
var selectMenu = dc.selectMenu('#select')
.dimension(exptDim)
.group(exptGroup)
.title(function (d){
return "experiment " + d.key;
})
.filter("1");
chart
.width(768)
.height(480)
.x(d3.scaleLinear().domain([6,20]))
.brushOn(false)
.dimension(runDimension)
.group(speedSumGroup);
// works fine in edge, firefox,chrome; not in IE11
//selectMenu.select('select').classed('uk-select', true);
chart.on('renderlet', function(chart){
// IE11 workaround: causes glitches due to added padding;
selectMenu.select('select').classed('uk-select', true);
});
dc.renderAll();
</script>
</body>