Skip to content

Instantly share code, notes, and snippets.

@mtandre

mtandre/index.html

Last active September 30, 2017 07:01
Show Gist options
  • Save mtandre/0eae74cba88791bcbfc219775461af3d to your computer and use it in GitHub Desktop.
Save mtandre/0eae74cba88791bcbfc219775461af3d to your computer and use it in GitHub Desktop.
Download ZIP
Live updating, sortable?, bar chart
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>bar chart 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
text { text-anchor:middle; font-family:monospace; font-size:11px; }
rect:hover { fill: rgb(5, 164, 226); transition: all .3s ease-in-out; }
</style>
</head>
<body>
<svg></svg>
<br>
<button class="add">add bar</button>
<button class="remove">remove bar</button>
<button onclick="clearInterval(run)">pause</button>
<button class="sort">sort</button>
<script type="text/javascript">
var w = 800,
h = 300;
var dataset = [ { key: 0, value: 5 },
{ key: 1, value: 10 },
{ key: 2, value: 13 },
{ key: 3, value: 19 },
{ key: 4, value: 21 },
{ key: 5, value: 25 },
{ key: 6, value: 22 },
{ key: 7, value: 18 },
{ key: 8, value: 15 },
{ key: 9, value: 13 },
{ key: 10, value: 11 },
{ key: 11, value: 12 },
{ key: 12, value: 15 },
{ key: 13, value: 20 },
{ key: 14, value: 18 },
{ key: 15, value: 17 },
{ key: 16, value: 16 },
{ key: 17, value: 18 },
{ key: 18, value: 23 },
{ key: 19, value: 25 } ];
var key = function(d) {
return d.key;
}
var svg = d3.select('svg')
.attr('width', w)
.attr('height', h);
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d){
return d.value;
})])
.range([0, h]);
svg.selectAll('rect')
.data(dataset, key)
.enter()
.append('rect')
.attr('x', function(d, i) {
return xScale(i);
})
.attr('y', function(d) {
return h - yScale(d.value);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return yScale(d.value);
})
.attr('fill', function(d) {
return 'rgb(' + Math.round(d.value * 10) + ', 50, 150)';
})
.on('mouseover', function(d){
d3.select('.value')
});
svg.selectAll('text')
.data(dataset, key)
.enter()
.append('text')
.text(function(d) {
return d.value;
})
.attr('x', function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr('y', function(d) {
return d.value > 5 ? (h - yScale(d.value) + 14) : (h - yScale(d.value) - 6);
})
.attr('fill', function(d){
return d.value > 5 ? '#fff' : '#000';
});
d3.selectAll('.add, .remove')
.on('click', function(){
if (d3.select(this).attr('class') === 'add') {
var last = dataset[dataset.length - 1];
dataset.push({
key: last.key + 1,
value: Math.abs((Math.random() > .5) ? last.value + 1 : last.value - 1)
});
} else {
dataset.shift();
}
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset, function(d){
return d.value;
})]);
var bars = svg.selectAll('rect')
.data(dataset, key);
bars.enter()
.append('rect')
.attr('x', w)
.attr('y', function(d) {
return h - yScale(d.value);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return yScale(d.value);
})
.attr('fill', function(d) {
return 'rgb(' + Math.round(d.value * 10) + ', 50, 150)';
})
.merge(bars)
.transition('entering')
.duration(200)
.attr('x', function(d, i){
return xScale(i)
})
.attr('y', function(d) {
return h - yScale(d.value);
})
.attr('width', xScale.bandwidth())
.attr('height', function(d) {
return yScale(d.value);
});
bars.exit()
.transition('exiting')
.duration(200)
.attr('x', -xScale.bandwidth())
.remove();
var labels = svg.selectAll('text')
.data(dataset, key);
labels.enter()
.append('text')
.text(function(d) {
return d.value;
})
.attr('x', w + xScale.bandwidth() / 2)
.attr('y', function(d) {
return d.value > 5 ? (h - yScale(d.value) + 14) : (h - yScale(d.value) - 6);
})
.attr('fill', function(d){
return d.value > 5 ? '#fff' : '#000';
})
.merge(labels)
.transition('entering2')
.duration(200)
.text(function(d) {
return d.value;
})
.attr('x', function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr('y', function(d) {
return d.value > 5 ? (h - yScale(d.value) + 14) : (h - yScale(d.value) - 6);
})
.attr('fill', function(d){
return d.value > 5 ? '#fff' : '#000';
});
labels.exit()
.transition('exiting2')
.duration(200)
.attr('x', -xScale.bandwidth())
.remove();
});
d3.select('.sort')
.on('click', function(){
svg.selectAll('rect')
.sort(function(a, b) {
return d3.ascending(a.value, b.value);
})
.transition('sorting')
.delay(function(d, i){
return i * 25;
})
.duration(1000)
.attr('x', function(d, i) {
return xScale(i);
});
svg.selectAll('text')
.sort(function(a, b) {
return d3.ascending(a.value, b.value);
})
.transition('sorting2')
.delay(function(d, i){
return i * 25;
})
.duration(1000)
.attr('x', function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
});
});
var run = setInterval(function(){
d3.select('.add').node().click();
d3.select('.remove').node().click();
}, 500);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment