Skip to content

Instantly share code, notes, and snippets.

@timhall
Last active September 29, 2016 14:45
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save timhall/87aee92992f6f7892a1d to your computer and use it in GitHub Desktop.
d3.compose Error Bars
license: mit

Error Bars component for d3.compose.

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose.css">
<style>
#chart {width: 800px; height: 400px;}
.error-bars-tick {stroke-width: 2px;}
.error-bars-beam {stroke-dasharray: 10, 10;}
</style>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3.chart/0.2.1/d3.chart.min.js"></script>
<script src="https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose-all.js"></script>
<script>
/**
ErrorBars chart
Looks for error: [min, max] for each data-point
*/
var Mixed = d3c.helpers.mixin(d3c.Chart, d3c.mixins.Series, d3c.mixins.XY);
Mixed.extend('ErrorBars', {
initialize: function() {
Mixed.prototype.initialize.apply(this, arguments);
var layer = this.base.append('g').classed('error-bars', true);
this.seriesLayer('ErrorBars', layer, {
dataBind: function(data) {
return this.selectAll('g')
.data(data, this.key);
},
insert: function() {
var group = this.append('g');
group.append('line').attr('class', 'error-bars-tick error-bars-top-tick');
group.append('line').attr('class', 'error-bars-tick error-bars-bottom-tick');
group.append('line').attr('class', 'error-bars-beam');
return group;
},
events: {
enter: function() {
var chart = this.chart();
this.select('.error-bars-bottom-tick')
.attr('x1', chart.x1)
.attr('y1', chart.bottomY)
.attr('x2', chart.x2)
.attr('y2', chart.bottomY);
this.select('.error-bars-top-tick')
.attr('x1', chart.x1)
.attr('y1', chart.topY)
.attr('x2', chart.x2)
.attr('y2', chart.topY);
this.select('.error-bars-beam')
.attr('x1', chart.x)
.attr('y1', chart.bottomY)
.attr('x2', chart.x)
.attr('y2', chart.topY);
}
}
})
},
tickWidth: d3c.helpers.property({
default_value: 10
}),
bottomY: d3c.helpers.di(function(chart, d, i) {
return chart.yScale()(d.error[0]);
}),
topY: d3c.helpers.di(function(chart, d, i) {
return chart.yScale()(d.error[1]);
}),
x1: d3c.helpers.di(function(chart, d, i) {
return chart.x.call(this, d, i) - (chart.tickWidth() / 2);
}),
x2: d3c.helpers.di(function(chart, d, i) {
return chart.x.call(this, d, i) + (chart.tickWidth() / 2);
})
});
// Example chart
var chart = d3.select('#chart').chart('Compose', function(data) {
var xScale = {data: data, key: 'x'};
var yScale = {domain: [0, 100]};
var charts = [
d3c.lines({data: data, xScale: xScale, yScale: yScale}),
{type: 'ErrorBars', data: data, xScale: xScale, yScale: yScale}
];
var yAxis = d3c.axis({scale: yScale});
return [
[yAxis, d3c.layered(charts)]
];
}).width(800).height(400);
chart.draw([
{
key: 'series-1',
values: [
{x: 10, y: 20, error: [15, 22]},
{x: 50, y: 55, error: [52, 57]},
{x: 100, y: 80, error: [60, 100]}
]
},
{
key: 'series-2',
values: [
{x: 10, y: 10, error: [9, 11]},
{x: 50, y: 50, error: [49, 51]},
{x: 100, y: 85, error: [84, 86]}
]
}
]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment