Using webcomponents in D3.js | JavaScript for Line of Business Applications | Scoop.it

This post describes a prototype that uses Polymer webcomponents in D3.js.

Appending a single element, like a ‘rect’ to a D3 selection is straightforward. But when you want to append a more complex, nested structure to a selection, it would be nice if you could append a renderer or template. And I would find it even more comfortable if you could specify this in a structured language like xml/html. Furthermore, I would like to specify the behaviour of this renderer within the renderer itself.

I first encountered this desire when I tried to use D3 for visualizing Isotype charts. D3 maps data points to dom elements in a one-to-one relation, while Isotype maps data points to dom elements in a one-to-many relation. You can solve this by converting data points to arrays, but that feels a bit hackish.

I decided to use webcomponents.