Continuously changing bundle coloring in D3 bundle layout

Question

Aloha,

is there any possibility to make the bundles in this visualization:

... look just like the bundles in that visualization

?

I have no idea how to achieve this in d3.

EDIT 1: Obviously I have to write a custom interpolator. How can I extend the bundle interpolator to additionally interpolate between two colors without changing the d3 library?

Answer 1

Unfortunately, neither SVG or Canvas support stroking a gradient along a path. The way that my dependency tree visualization is implemented is as follows. For each path:

1. Start with a basis spline (see Hierarchical Edge Bundling).
2. Convert to a piecewise cubic Bézier curve (see BasisSpline.segments).
3. Convert to a piecewise linear curve (i.e., polyline; see Path.flatten).
4. Split into equal-length linear segments (see Path.split).

Once you have these linear segments, you color each segment by computing the appropriate color along the gradient. So, the first segment is drawn green, the last segment is drawn red, and the intermediate segments are drawn with a color somewhere in-between. It might be possible to combine steps 2-4 by sampling the basis spline at equidistant points, but that will require more math.

My dependency tree is implemented in Canvas, but you could achieve the same effect in SVG by creating separate path elements (or line elements) for each segment of constant color. You might get slightly better performance by combining segments of the same color.