This is 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 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.
I created one webcomponent ('isotype-element') that displays a number of icons based on an input value. That component is used to show, for example, one row of olympic gold medals.
I created another webcomponent ('country-element') that combines three isotype-element components to display the number of medals for one country.
D3 is still used for binding data to elements, but the exact visual representation is left to the components. And, although I haven't tried it, I don't see any reason why you couldn't use D3 to write components.
Best viewed in the latest version of Firefox, Safari and Chrome. Perhaps also with IE10+, but I cannot verify that.
Take a look at the source code to see how it works.