Skip to content

emeeks/d3.svg.ribbon

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

d3.svg.ribbon

d3.svg.ribbon

Interactive example

Designed to interpolate ribbon or band areas based on sample points with radii.

npm install d3-svg-ribbon

#ribbon.x()

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

#ribbon.y()

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

#ribbon.r()

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

#ribbon.interpolate()

The D3 interpolation method to use. Currently has strange effects with all interpolators except linear, linear-closed, basis and basis-closed.

###Why?

I was dissatisfied with the way that thicknesses get attenuated creating bump charts with d3.svg.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.

d3.svg.ribbon

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

d3.svg.ribbon

About

An area interpolator based on points and their radii

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published