dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
73 lines (64 loc) • 2.22 kB
HTML
<html lang="en">
<head>
<title>dc.js - Composite of a Bar and a Line Chart</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
<style>
circle.dot {
fill-opacity: 1 ;
}
</style>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="test_composed"></div>
<script type="text/javascript" src="../js/promise-polyfill.js"></script>
<script type="text/javascript" src="../js/fetch.umd.js"></script>
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
// var composite = dc.compositeChart("#test_composed");
var composite = dc.compositeChart(d3.select('div.container').append('div'));
Promise.all([d3.csv("morley.csv"), d3.csv("morley2.csv")]).then(function(results) {
var exp1 = results[0],
exp2 = results[1];
var ndx = crossfilter();
ndx.add(exp1.map(function(d) {
return {x: +d.Run, y2:0, y1: 20 - d.Speed * d.Run / 1000};
}));
ndx.add(exp2.map(function(d) {
return {x: +d.Run, y1:0, y2: d.Speed * d.Run / 1000};
}));
var dim = ndx.dimension(dc.pluck('x')),
grp1 = dim.group().reduceSum(dc.pluck('y1')),
grp2 = dim.group().reduceSum(dc.pluck('y2'));
composite
.width(768)
.height(480)
.x(d3.scaleLinear().domain([2.9,16.1]))
.yAxisLabel("The Y Axis")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([
dc.barChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Bars")
.centerBar(true),
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Dots")
.dashStyle([2,2])
])
.brushOn(false)
.render();
});
</script>
</div>
</body>
</html>