example/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>d3.compose Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="../build/d3.compose.css">
<style>
.example {
margin-bottom: 16px;
}
.example-chart {
margin-top: 10px;
}
.highlighted {
fill: #2ca02c;
}
</style>
<script src="../node_modules/d3/d3.js"></script>
<script src="../build/d3.compose.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div class="container">
<h1>d3.compose Examples</h1>
<section class="example">
<h2>Line-Bar</h2>
<div id="chart-1"></div>
<script type="text/javascript">
function chart1(data) {
var xScale = d3c.scaleBandSeries().domain([2000, 2005, 2010, 2015, 2020]).adjacent(true).series(2).padding(0.1);
var yScale = d3.scale.linear().domain([0, 20000]);
var y2Scale = d3.scale.linear().domain([0, 90]);
var bars = d3c.bars('bars', {
data: data.results,
xScale: xScale,
yScale: yScale,
// TODO
labels: {
offset: 2,
position: 'top',
style: {
'font-size': '14px'
},
format: d3.format(',0d')
}
});
var lines = d3c.lines('lines', {
data: data.input,
xScale: xScale,
yScale: y2Scale,
// TODO
labels: {
position: 'top'
}
});
return [
d3c.title({text: 'Chart Title', textAlign: 'left'}),
[
d3c.axisTitle({position: 'left', text: 'Y1 Title'}),
d3c.axis('y1', {position: 'left', scale: yScale}),
d3c.layered(
d3c.gridlines({orientation: 'vertical', scale: xScale}),
d3c.gridlines({orientation: 'horizontal', scale: yScale}),
bars,
lines
),
d3c.axis('y2', {position: 'right', scale: y2Scale}),
d3c.axisTitle({position: 'right', text: 'Y2 Title'})
],
d3c.axis('x', {position: 'bottom', scale: xScale}),
d3c.axisTitle({position: 'bottom', text: 'X Title'})
];
}
var chart1Container = new d3c.Compose(d3.select('#chart-1'), {width: 600, height: 400});
chart1Container.draw(chart1(data['chart-1']));
</script>
</section>
<section class="example">
<h2>Lines</h2>
<div id="chart-2"></div>
<script type="text/javascript">
// d3.chart('Overlay').extend('HoverOverlay', {
// initialize: function() {
// var list = this.base.append('ul').style({
// 'background-color': '#fff',
// 'border': 'solid 1px #ccc',
// 'list-style': 'none',
// 'padding': '4px 4px 4px 6px'
// });
// this.on('attach', function() {
// this.container.on('mouseenter', function(point) {
// this.position(getPosition(point));
// }.bind(this));
// this.container.on('mousemove', function(point) {
// this.position(getPosition(point));
// }.bind(this));
// var points = {};
// this.container.on('mouseenter:point', function(point) {
// points[point.key] = point;
// if (Object.keys(points).length)
// this.show();
// listPoints(list, points);
// }.bind(this));
// this.container.on('mouseleave:point', function(point) {
// delete points[point.key];
// if (!Object.keys(points).length)
// this.hide();
// listPoints(list, points);
// }.bind(this));
// function getPosition(point) {
// return {
// container: {
// x: point.container.x + 20,
// y: point.container.y
// }
// };
// }
// function listPoints(list, points) {
// list.selectAll('*').remove();
// utils.objectEach(points, function(point) {
// list.append('li').text('(' + point.d.x + ', ' + point.d.y + ')');
// });
// }
// }.bind(this));
// }
// });
function chart2(data) {
var max = d3c.helpers.seriesExtent(data.lines, function(d) { return d.y; })[1];
var xScale = d3.scale.linear().domain([2000, 2020]);
var yScale = d3.scale.linear().domain([0, max]).nice();
var lines = d3c.lines('lines', {data: data.lines, xScale: xScale, yScale: yScale});
return d3c.layered(
[[
d3c.title({text: 'Results by Year'}),
// TODO legend
// d3c.legend({charts: ['line'], centered: true})
[
d3c.axisTitle({text: 'Results', position: 'left'}),
d3c.axis('yAxis', {position: 'left', scale: yScale}),
d3c.layered(lines)
],
d3c.axis('xAxis', {position: 'bottom', scale: xScale, tickFormat: d3.format('####')}),
d3c.axisTitle({position: 'bottom', text: 'Year'})
]]
// TODO overlay (double array is to overcome temporary limitation in layered)
// {type: Overlay}
);
}
var chart2Container = new d3c.Compose(d3.select('#chart-2'), {
width: 600,
height: 400,
responsive: false
});
chart2Container.draw(chart2(data['chart-2']));
</script>
</section>
<section class="example">
<h2>Bars</h2>
<div id="chart-3"></div>
<script type="text/javascript">
function chart3(data) {
var extent = d3c.helpers.seriesExtent(data, function(d) { return d; });
var min = extent[0];
var max = extent[1];
var xScale = d3c.scaleBandSeries()
.domain(data.map(function(d, i) { return i; }))
.adjacent(true)
.series(2);
var yScale = d3.scale.linear()
.domain([min, max]);
var bars = d3c.bars('bars', {
data: data,
xScale: xScale,
yScale: yScale,
labels: {format: d3.format(',0d')}
});
return [
d3c.title({text: 'Result'}),
[
d3c.axisTitle({position: 'left', text: 'Results'}),
d3c.axis('y', {position: 'left', scale: yScale}),
d3c.layered(
d3c.gridlines({orientation: 'horizontal', scale: yScale}),
bars
)
]
];
}
var chart3Container = new d3c.Compose(d3.select('#chart-3'), {
width: 600,
height: 400,
transition: {duration: 1000},
margin: {bottom: 30}
});
chart3Container.draw(chart3(data['chart-3']));
</script>
</section>
<section class="example">
<h2>Stacked Bars</h2>
<div id="chart-4"></div>
<script type="text/javascript">
function chart4(data) {
var domain = d3c.helpers.getUniqueValues(data.stacked, function(d) { return d.x; });
var xScale = d3c.scaleBandSeries().domain(domain).padding(0.1);
var yScale = d3.scale.linear().domain([-50, 150]);
var stacked = d3c.bars('stacked', {
data: data.stacked,
stacked: true,
xScale: xScale,
yScale: yScale,
labels: true
});
return [
d3c.title({text: 'Stacked Bars'}),
[
d3c.axis({position: 'left', scale: yScale, ticks: 5}),
d3c.layered(stacked),
// TODO Legend
// d3c.legend({charts: ['stacked']})
]
];
}
var chart4Container = new d3c.Compose(d3.select('#chart-4'), {
width: 600,
height: 400,
margin: {bottom: 20}
});
chart4Container.draw(chart4({
stacked: [
{key: 'a', name: 'A', values: [{x: 0, y: 10}, {x: 1, y: 50}]},
{key: 'b', name: 'B', values: [{x: 0, y: 20}, {x: 1, y: 40}]},
{key: 'c', name: 'C', values: [{x: 0, y: 50}, {x: 1, y: -30}]},
{key: 'd', name: 'D', values: [{x: 0, y: 30}, {x: 1, y: 20}]},
{key: 'e', name: 'E', values: [{x: 0, y: -40}, {x: 1, y: 10}]}
]
}));
</script>
</section>
<section class="example">
<h2>Horizontal Bars</h2>
<div id="chart-5"></div>
<script type="text/javascript">
function chart5(data) {
var extent = d3c.helpers.seriesExtent(data, function(d) { return d; });
var min = extent[0];
var max = extent[1];
var xScale = d3c.scaleBandSeries()
.domain(data.map(function(d, i) { return i; }))
.adjacent(true)
.series(2);
var yScale = d3.scale.linear().domain([min, max]);
var horizontal = d3c.bars('bars', {
data: data,
xScale: xScale,
yScale: yScale,
inverted: true,
labels: {format: d3.format(',0d'), position: 'right|left', offset: 3}
});
return [
d3c.title({text: 'Results'}),
[
d3c.layered(horizontal)
],
d3c.axis({position: 'bottom', scale: yScale}),
d3c.axisTitle({position: 'bottom', text: 'Results'})
];
}
var chart5Container = new d3c.Compose(d3.select('#chart-5'), {
width: 600,
height: 400,
transition: {duration: 1000, delay: 200},
margin: {right: 50, left: 50}
});
chart5Container.draw(chart5(data['chart-3']));
</script>
</section>
<section class="example">
<h2>Horizontal Stacked Bars</h2>
<div id="chart-6"></div>
<script type="text/javascript">
function chart6(data) {
var domain = d3c.helpers.getUniqueValues(data.stacked, function(d) { return d.x; });
var xScale = d3.scale.ordinal().domain(domain);
var yScale = d3.scale.linear().domain([-50, 150]);
var stacked = d3c.bars('stacked', {
data: data.stacked,
inverted: true,
stacked: true,
xScale: xScale,
yScale: yScale,
labels: true
});
return [
d3c.title({text: 'Horizontal Stacked Bars'}),
[
d3c.layered(stacked),
// TODO Legend
// d3c.legend({charts: ['stacked']})
],
d3c.axis({position: 'bottom', scale: yScale, ticks: 5}),
];
}
var chart6Container = new d3c.Compose(d3.select('#chart-6'), {
width: 600,
height: 400
});
chart6Container.draw(chart6({
stacked: [
{key: 'a', name: 'A', values: [{x: 0, y: 10}, {x: 1, y: 50}]},
{key: 'b', name: 'B', values: [{x: 0, y: 20}, {x: 1, y: 40}]},
{key: 'c', name: 'C', values: [{x: 0, y: 50}, {x: 1, y: -30}]},
{key: 'd', name: 'D', values: [{x: 0, y: 30}, {x: 1, y: 20}]},
{key: 'e', name: 'E', values: [{x: 0, y: -40}, {x: 1, y: 10}]}
]
}));
</script>
</section>
</div>
</body>
</html>