Skip to content

Instantly share code, notes, and snippets.

@ColinEberhardt

ColinEberhardt/index.html

Created December 6, 2016 08:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ColinEberhardt/a7dc3277e7ab7959781072864e6c9670 to your computer and use it in GitHub Desktop.
Save ColinEberhardt/a7dc3277e7ab7959781072864e6c9670 to your computer and use it in GitHub Desktop.
Download ZIP
d3fc dual axes example
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
#chart {
width: 100%;
height: 500px;
}
.open path {
stroke: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js"></script>
<!-- the structure of the chart, built from a combination of HTML elements, flexbox, and d3fc-group / d3fc-svg -->
<div id='chart'>
<d3fc-group id='group' style='display: flex; height: 100%; width: 100%; flex-direction: column' auto-resize>
<div style='flex: 1; display: flex; flex-direction: column'>
<div style='flex: 1; display: flex; flex-direction: row'>
<d3fc-svg class='close-axis' style='width: 3em'></d3fc-svg>
<d3fc-svg class='plot-area' style='flex: 1; overflow: hidden'></d3fc-svg>
<d3fc-svg class='open-axis' style='width: 3em'></d3fc-svg>
</div>
<d3fc-svg class='x-axis' style='height: 2em; margin-left: 3em; margin-right: 3em'></d3fc-svg>
</div>
</d3fc-group>
</div>
<script>
// components for computing the data extent
var closeExtent = fc.extentLinear()
.accessors([
function(d) { return d.close; }
]);
var openExtent = fc.extentLinear()
.accessors([
function(d) { return d.open; }
]);
var xExtent = fc.extentDate()
.accessors([
function(d) { return d.date; }
]);
// scales
var openScale = d3.scaleLinear();
var closeScale = d3.scaleLinear();
var xScale = d3.scaleTime();
// axes
var xAxis = fc.axisBottom()
.scale(xScale);
var openAxis = fc.axisRight()
.scale(openScale);
var closeAxis = fc.axisLeft()
.scale(closeScale);
// series
var closeSeries = fc.seriesSvgLine()
.crossValue(function(d) { return d.date; })
.mainValue(function(d) { return d.close; })
.xScale(xScale)
.yScale(closeScale);
var openSeries = fc.seriesSvgLine()
.crossValue(function(d) { return d.date; })
.mainValue(function(d) { return d.open; })
.xScale(xScale)
.yScale(openScale);
// handle the 'draw' event from the d3fc-svg and d3fc-group elements
d3.select('.close-axis')
.on('draw', function(d, i, nodes) {
d3.select(nodes[i])
.select('svg')
.attr('viewBox', `${-event.detail.width} 0 ${event.detail.width} ${event.detail.height}`)
.call(closeAxis);
});
d3.select('.open-axis')
.on('draw', function(d, i, nodes) {
d3.select(nodes[i])
.select('svg')
.call(openAxis);
});
d3.select('.x-axis')
.on('draw', function(d, i, nodes) {
d3.select(nodes[i])
.select('svg')
.call(xAxis);
});
// handle the plot area measure event in order to compute the scale ranges
d3.select('.plot-area')
.on('measure', function() {
xScale.range([0, event.detail.width]);
openScale.range([event.detail.height, 0]);
closeScale.range([event.detail.height, 0]);
})
var parseTime = d3.timeParse('%d-%b-%y');
// use the data-join component in order to create the inner 'g' elements. This ensures
// that the elements are only created once.
var closeJoin = fc.dataJoin('g', 'close');
var openJoin = fc.dataJoin('g', 'open');
d3.csv('prices.csv', function(error, data) {
// format the data
data.forEach(function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
d.open = +d.open;
});
// set the domain
openScale.domain(openExtent(data));
closeScale.domain(closeExtent(data));
xScale.domain(xExtent(data));
// render the chart
d3.select('.plot-area')
.on('draw', function(d, i, nodes) {
var svg = d3.select(nodes[i])
.select('svg');
closeJoin(svg, [data])
.call(openSeries);
openJoin(svg, [data])
.call(closeSeries);
});
d3.select('#group')
.node()
.requestRedraw();
});
</script>
Raw
prices.csv
date close open
1-May-12 58.13 3.41
30-Apr-12 53.98 4.55
27-Apr-12 67.00 6.78
26-Apr-12 89.70 7.85
25-Apr-12 99.00 8.92
24-Apr-12 130.28 9.92
23-Apr-12 166.70 10.13
20-Apr-12 234.98 12.23
19-Apr-12 345.44 13.45
18-Apr-12 443.34 16.04
17-Apr-12 543.70 18.03
16-Apr-12 580.13 21.02
13-Apr-12 605.23 22.34
12-Apr-12 622.77 20.15
11-Apr-12 626.20 21.26
10-Apr-12 628.44 31.04
9-Apr-12 636.23 35.04
5-Apr-12 633.68 41.02
4-Apr-12 624.31 43.05
3-Apr-12 629.32 46.03
2-Apr-12 618.63 51.03
30-Mar-12 599.55 53.42
29-Mar-12 609.86 57.82
28-Mar-12 617.62 59.01
27-Mar-12 614.48 56.03
26-Mar-12 606.98 58.01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment