D3, meet WebGL.

Pathgl offers the best of both worlds: the rendering power of webGL, and the expressive richness of D3.

Use familiar D3 concepts, like selections and databinding

Tame the wild power of webgl with a declarative abstraction.


d3.select('.one').selectAll("circle")
.data(d3.range(1e4))
.enter().append("circle")
.attr('opacity', .8)
.attr('stroke', function (i) { return d3.hcl(i, 100, 55) })
.attr('cx', function (i) { return Math.random() * i / 3})
.attr('r', function (i) { return i % 3 * 4 })
.shader({ cx: 'resolution.x / 2. + cos(r.x + xy.x * clock / 1e6) * xy.x'
        , cy: 'resolution.y / 2. + sin(r.x + xy.x * clock  / 1e6) * xy.x'
})
								

Supercharge your visualization with shaders

Calculate expensive queries, simulation, layout, and post processing effects on a separate thread without any copying.

 

var vertices = d3.range(10).map(function(d) {
  return [Math.random() * 1200, Math.random() * 900];
});

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [1200, 900]]);

var svg = d3.select(".two")
.on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); })

var path = svg.selectAll("path");
return
svg.selectAll("circle")
.data(vertices.slice(1))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 1.5);

var line = d3.svg.line()
//line.interpolate('step-after');
redraw();

function redraw() {
  path = path.data(voronoi(vertices), String);

  path.exit().remove();

  path.enter().append("path")
    .attr("d", function (d) { return line(d) })
   .attr('fill', function (d, i) { return "hsl(" + (i % 6)* 60 + ",80%,50%)"})

  path.order();
}