DailyJS

WebGL D3 with PathGL

2014-05-09 00:00:00 +0100 by Alex R. Young
A PathGL particle simulation.

"PatrickJS" sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It's a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

d3.select('canvas').selectAll('circle')
  .data(particles.unwrap())
  .enter().append('circle')
    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

d3.select('canvas')
  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you're already used to D3 but don't know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There's also a page on GPGPU, a technique for offloading heavy computation to the graphics card.