dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
106 lines (98 loc) • 4.18 kB
HTML
<html lang="en">
<head>
<title>dc.js - Right Axis 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>
<strong>Monthly Index Abs Move & Volume Chart</strong>
</div>
<div id="monthly-move-chart"></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 moveChart = dc.compositeChart("#monthly-move-chart");
d3.csv("monthly-move.csv").then(function (data) {
var dateFormatSpecifier = "%m/%d/%Y";
var dateFormat = d3.timeFormat(dateFormatSpecifier);
var dateFormatParser = d3.timeParse(dateFormatSpecifier);
var numberFormat = d3.format(".2f");
data.forEach(function (e) {
e.dd = dateFormatParser(e.date);
e.month = d3.timeMonth(e.dd); // pre-calculate month for better performance
});
var ndx = crossfilter(data);
// monthly index avg fluctuation in percentage
var moveMonths = ndx.dimension(function (d) {
return d.month;
});
var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
return Math.abs(+d.close - +d.open);
});
var indexAvgByMonthGroup = moveMonths.group().reduce(
function (p, v) {
++p.days;
p.total += (+v.open + +v.close) / 2;
p.avg = Math.round(p.total / p.days);
return p;
},
function (p, v) {
--p.days;
p.total -= (+v.open + +v.close) / 2;
p.avg = (p.days == 0) ? 0 : Math.round(p.total / p.days);
return p;
},
function () {
return {days: 0, total: 0, avg: 0};
}
);
moveChart.width(600)
.height(300)
.transitionDuration(1000)
.margins({top: 30, right: 50, bottom: 25, left: 60})
.dimension(moveMonths)
.mouseZoomable(true)
.shareTitle(false)
.x(d3.scaleTime().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))
.round(d3.timeMonth.round)
.xUnits(d3.timeMonths)
.elasticY(true)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(70).y(10).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(moveChart)
.group(indexAvgByMonthGroup, "Monthly Index Average")
.valueAccessor(function (d) {
return d.value.avg;
}),
dc.lineChart(moveChart)
.group(monthlyMoveGroup, "Monthly Index Move")
.valueAccessor(function (d) {
return Math.sqrt(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);
})
.ordinalColors(["orange"])
.useRightYAxis(true)
])
.yAxisLabel("Monthly Index Average")
.rightYAxisLabel("Monthly Index Move")
.renderHorizontalGridLines(true);
dc.renderAll();
});
</script>
</div>
</body>
</html>