dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
88 lines (74 loc) • 2.32 kB
HTML
<html lang="en">
<head>
<title>dc.js - Box-Plot Example</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"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="box-test"></div>
<div id="pie-chart"></div>
<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 chart = dc.boxPlot("#box-test"),
pie = dc.pieChart("#pie-chart");
d3.csv("monthly-move.csv", function(error, data) {
data.forEach(function(x) {
x.date = new Date(x.date);
x.close = +x.close;
});
data = data.slice(0, 200);
var ndx = crossfilter(data),
openDimension = ndx.dimension(function(d) {return parseInt(d.open/10)*10;}),
openGroup = openDimension.group(),
monthDimension = ndx.dimension(function(d) {return d3.time.month(d.date); }),
closeGroup = monthDimension.group().reduce(
function(p,v) {
p.push(v.close);
return p;
},
function(p,v) {
p.splice(p.indexOf(v.close), 1);
return p;
},
function() {
return [];
}
);
chart
.width(768)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(monthDimension)
.group(closeGroup)
.x(d3.time.scale())
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(true);
// this demonstrates solving elasticX manually, avoiding the
// bug where the rightmost bar/box is not displayed, #792
function calc_domain(chart) {
var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
max = d3.max(chart.group().all(), function(kv) { return kv.key; });
max = d3.time.month.offset(max, 1);
chart.x().domain([min, max]);
}
chart.on('preRender', calc_domain);
chart.on('preRedraw', calc_domain);
pie
.width(140)
.height(140)
.radius(70)
.dimension(openDimension)
.group(openGroup);
dc.renderAll();
});
</script>
</div>
</body>
</html>