Skip to content

Instantly share code, notes, and snippets.

@lsbardel

lsbardel/.block

Last active January 3, 2017 16:48
Show Gist options
  • Save lsbardel/43852f575d0bd5d87554169837a71918 to your computer and use it in GitHub Desktop.
Save lsbardel/43852f575d0bd5d87554169837a71918 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas rounded rectangles
Raw
.block
license: bsd-3-clause
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas rounded rectangles</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.3.3/d3-canvas-transition.js"></script>
</head>
<body>
<div id="paper" style="position: absolute;">
<label>
<input id='svg' name="type" type="radio" checked>
<span>svg</span>
</label>
<label>
<input id='canvas' name="type" type="radio">
<span>canvas</span>
</label>
</div>
<div id="example" style="max-width: 960px"></div>
<script>
(function () {
d3.select('#svg').on('click', function () {draw('svg');});
d3.select('#canvas').on('click', function () {draw('canvas');});
if (d3.resolution() > 1) {
d3.select('#paper').append('label').html(
"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
);
d3.select('#canvas-low').on('click', function () {draw('canvas', 1);});
}
var example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width),
count = 0,
timer;
draw('svg');
function draw (type, r) {
example.select('.paper').remove();
var paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true),
mouse = [width/2, height/2],
color = d3.scaleOrdinal(d3.schemeCategory20c);
var g = paper.selectAll("g")
.data(d3.range(25))
.enter().append("g")
.attr("transform", "translate(" + mouse + ")");
g.append("rect")
.attr("rx", 6)
.attr("x", -12.5)
.attr("y", -12.5)
.attr("width", 25)
.attr("height", 25)
.attr("transform", function (d) {
return "scale(" + (1 - d / 25) * 20 + ")";
})
.style("fill", color)
.style("stroke-width", 0);
g.datum(function (d) {
return {center: mouse.slice(), angle: 0};
});
paper.on("mousemove", function () {
mouse = d3.mouse(this);
});
if (timer) timer.stop();
timer = d3.timer(function () {
count++;
g.attr("transform", function (d, i) {
d.center[0] += (mouse[0] - d.center[0]) / (i + 5);
d.center[1] += (mouse[1] - d.center[1]) / (i + 5);
d.angle += Math.sin((count + i) / 10) * 7;
return "translate(" + d.center + ")rotate(" + d.angle + ")";
});
});
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment