Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active March 2, 2020 17:20
  • Star 6 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/9539958 to your computer and use it in GitHub Desktop.
OMG Particles II
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #111;
min-width: 960px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = Math.max(960, innerWidth),
height = Math.max(500, innerHeight);
var x1 = width / 2,
y1 = height / 2,
x0 = x1,
y0 = y1,
i = 0,
r = 200,
τ = 2 * Math.PI;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", move);
var context = canvas.node().getContext("2d");
context.globalCompositeOperation = "lighter";
context.lineWidth = 2;
d3.timer(function() {
context.clearRect(0, 0, width, height);
var z = d3.hsl(++i % 360, 1, .5).rgb(),
c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
x = x0 += (x1 - x0) * .1,
y = y0 += (y1 - y0) * .1;
d3.select({}).transition()
.duration(2000)
.ease(Math.sqrt)
.tween("circle", function() {
return function(t) {
context.strokeStyle = c + (1 - t) + ")";
context.beginPath();
context.arc(x, y, r * t, 0, τ);
context.stroke();
};
});
});
function move() {
var mouse = d3.mouse(this);
x1 = mouse[0];
y1 = mouse[1];
d3.event.preventDefault();
}
</script>
@Alain1405
Copy link

This is currently not working (at least on Chrome and Safari, on OsX).
Console log the following:
Uncaught TypeError: Cannot read property 'documentElement' of undefined

@ajildsjins
Copy link

Hi
quite new to D3, Trying to understand the syntax {} , what we are selecting here using d3.select({}) ?

@git-ashish
Copy link

From what I know, d3.select() api allows empty selections. In this case, it is being used to make use of other apis (transition, tween) which are available on selections even though it is an empty one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment