Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created May 2, 2018 05:00
Show Gist options
  • Save lorenzopub/2e544ea39cda77721153a740389e0763 to your computer and use it in GitHub Desktop.
Save lorenzopub/2e544ea39cda77721153a740389e0763 to your computer and use it in GitHub Desktop.
Download ZIP
Bar Update Pattern on Canvas
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/jeezy.min.js"></script>
<script>
var alpha = "abcdefg".split("");
var min = 0, max = 10;
var width = window.innerWidth, height = window.innerHeight;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var customBase = document.createElement("custom");
var custom = d3.select(customBase);
var x = d3.scaleBand()
.rangeRound([0, width])
.domain(alpha)
.padding(.2);
var y = d3.scaleLinear()
.range([height, 0])
.domain([min, max]);
var color = d3.scaleOrdinal(["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"]);
bind(random_data());
draw();
d3.interval(function(){
bind(random_data());
var t = d3.timer(function(elapsed) {
draw();
if (elapsed > 750) t.stop();
});
}, 1000);
function bind(data){
var x_var = Object.keys(data[0])[0], y_var = Object.keys(data[0])[1];
// join
var bar = custom.selectAll("custom.bar")
.data(data, function(d){ return d[x_var]; });
var amount = custom.selectAll("custom.amount")
.data(data, function(d){ return d[x_var]; });
// update
bar
.transition()
.attr("y", function(d){ return y(d[y_var]); })
.attr("height", function(d){ return height - y(d[y_var]); });
amount
.transition()
.attr("y", function(d){ return y(d[y_var]); })
.text(function(d){ return d[y_var]; });
// enter
bar.enter().append("custom")
.attr("class", "bar")
.attr("x", function(d){ return x(d[x_var]); })
.attr("y", function(d){ return y(d[y_var]); })
.attr("width", x.bandwidth())
.attr("height", function(d){ return height - y(d[y_var]); })
.attr("fill", function(d){ return color(d[x_var]); });
amount.enter().append("custom")
.attr("class", "amount")
.attr("x", function(d){ return x(d[x_var]) + x.bandwidth() / 2; })
.attr("y", function(d){ return y(d[y_var]); })
.attr("dy", 16)
.text(function(d){ return d[y_var]; });
}
function draw(){
context.fillStyle = "#fff";
context.fillRect(0, 0, width, height);
var bars = custom.selectAll("custom.bar");
bars.each(function(d, i){
var node = d3.select(this);
context.fillStyle = node.attr("fill");
context.fillRect(node.attr("x"), node.attr("y"), node.attr("width"), node.attr("height"))
});
var amounts = custom.selectAll("custom.amount");
amounts.each(function(d, i){
var node = d3.select(this);
context.font = "16px Helvetica Neue";
context.fillStyle = "#fff";
var x = +node.attr("x");
var y = +node.attr("y");
var dy = +node.attr("dy");
context.fillText(node.text(), x, y + dy);
});
}
function random_data(){
return alpha.map(function(d, i){
return {
name: d,
value: jz.num.randBetween(min + 1, max)
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment