Skip to content

Instantly share code, notes, and snippets.

@tcuongtran

tcuongtran/index.html

Last active February 24, 2017 20:55
Show Gist options
  • Save tcuongtran/aadb52acbb333a0f9ae0e13b761ac29c to your computer and use it in GitHub Desktop.
Save tcuongtran/aadb52acbb333a0f9ae0e13b761ac29c to your computer and use it in GitHub Desktop.
Download ZIP
D3 Multi-bars Charts
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Multi-bar graph</title>
<style>
#vis {
padding: 20px;
}
.bar1 {
fill: #3188a8;
}
.bar2 {
fill: #31a88d;
}
.d3-tip {
background-color: #000;
color: #fff;
padding: 5px 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var margin = {
top: 20,
right: 10,
bottom: 20,
left: 30
},
width = 250 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom,
formatPercent = d3.format(',d'),
x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1),
y = d3.scaleLinear()
.range([height, 0]),
xAxis = d3.axisBottom()
.scale(x),
yAxis = d3.axisLeft()
.scale(y)
.tickFormat(formatPercent)
.tickSize(width)
.ticks(3),
tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.direction('e')
.html(function(d, el) {
return d3.select(d3.event.target).classed('bar1') ? d.bar1 : d.bar2;
}),
svg,
dataNodes = [{
degree: 'Degree1',
values: [{
fy: 2015,
bar1: 6,
bar2: 3
}, {
fy: 2016,
bar2: 3,
bar1: 9
}]
}, {
degree: 'Degree2',
values: [{
fy: 2015,
bar1: 6,
bar2: 3
}, {
fy: 2016,
bar2: 3,
bar1: 9
}]
}, {
degree: 'Degree3',
values: [{
fy: 2015,
bar1: 6,
bar2: 3
}, {
fy: 2016,
bar2: 6,
bar1: 7
}]
}, {
degree: 'Degree4',
values: [{
fy: 2015,
bar1: 6,
bar2: 3
}, {
fy: 2016,
bar2: 7,
bar1: 9
}]
}],
i,
j,
g;
x.domain([2015, 2016]);
y.domain([0, d3.max(dataNodes, function(s) {
return d3.max(s.values, function(v) {
return Math.max(v.bar2, v.bar1);
});
})]);
svg = d3.select('#vis')
.attr("width", 400)
.attr("height", 20)
.selectAll('svg')
.data(dataNodes)
.enter()
.append('svg:svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
/*
** add graph title
*/
svg.append('text')
.attr('x', 0)
.attr('y', 0 - (margin.top / 2))
.attr('text-anchor', 'left')
.style('font-size', '12px')
.text(function(d) {
return d.degree;
});
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + width + ',0)')
.call(yAxis);
g = svg.selectAll('.bars')
.data(function(d) {
return d.values;
})
.enter().append('g');
/* bar1 */
g.append('rect')
.attr('class', 'bar1')
.attr('x', function(d) {
return x(d.fy);
})
.attr('width', x.bandwidth())
.attr('y', function(d) {
return height;
})
.attr('height', 0)
.on('mouseover', function(d) {
tip.show(d, d3.event.target);
})
.on('mouseout', tip.hide)
.transition()
.duration(400)
.ease(d3.easeLinear)
.attr('height', function(d) {
return height - y(d.bar1);
})
.attr('y', function(d) {
return y(d.bar1);
});
/* bar2 */
g.append('rect')
.attr('class', 'bar2')
.attr('x', function(d) {
return x(d.fy) + 5;
})
.attr('width', x.bandwidth() - 10)
.attr('y', function(d) {
return height;
})
.attr('height', 0)
.on('mouseover', function(d) {
tip.show(d, d3.event.target);
})
.on('mouseout', tip.hide)
.transition()
.duration(400)
.ease(d3.easeLinear)
.attr('height', function(d) {
return height - y(d.bar2);
})
.attr('y', function(d) {
return y(d.bar2);
});
svg.call(tip);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment