Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active Mar 2, 2020

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

Alain1405 commented Feb 8, 2015

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

This comment has been minimized.

Copy link

ajildsjins commented Feb 25, 2020

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

@git-ashish

This comment has been minimized.

Copy link

git-ashish commented Feb 25, 2020

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
You can’t perform that action at this time.