An update to d3.svg.ribbon as a D3 v4+ module/plugin. Designed to interpolate ribbon or band areas based on sample points with radii.

Interactive example

Thicknesses get attenuated creating bump charts with d3.area. If they jump between ranks too significantly, it makes the corresponding graphical transition look too thin. Like the circled blue area, which is rendered significantly thinner than if it was being drawn horizontally.

In contrast, the same bump chart using d3-streamline does not create these attenuation artifacts.

If you use NPM, npm install d3-streamline. Otherwise, download the latest release.

# streamline.x([x])

The x-accessor for the points array, just like d3.line and d3.area. Defaults to returning d.x.

# streamline.y([y])

The y-accessor for the points array, just like d3.line and d3.area. Defaults to returning d.y.

# streamline.r([r])

The radius accessor for the points array. This determines the thickness of the stream at that point. Defaults to returning d.r.

# streamline.curve([curve])

The D3 curve interpolator method to use. Default is d3.curveLinearClosed.