Alastair Dant rflow

Keybase proof

I hereby claim:

I am rflow on github.
I am rflow (https://keybase.io/rflow) on keybase.
I have a public key ASCOgDk0ARs4Pb9GN6McJTBFVuymnqPNX4JEpSkrroQbHAo

To claim this, I am signing this object:

Dotty particle transitions with pixi.js and the new d3v4 forceSimulation

Feel free to go large

N.b. using the RenderTexture approach to avoid redrawing circles, pixi is happy with high node counts. the force simulation starts slowing down around about the 2,000 node mark.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
	header {
	display: flex;
	align-items: center;
	width: 1024px;
	}

	<html>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.0/regl.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.3/chroma.min.js"></script>
	<script>

	const regl = createREGL();

	const doc = document.body;
	const docWidth = window.innerWidth;

	<html>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.0/regl.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.3/chroma.min.js"></script>
	<script>

	const regl = createREGL();

	const doc = document.body;
	const docWidth = window.innerWidth;

	<html>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.3/chroma.min.js"></script>
	<script>

	// init Pixi for fullscreen rendering
	const doc = document.body;
	const docWidth = window.innerWidth;
	const docHeight = window.innerHeight;