d3-ridge

A shameless generalization of the ridgeline plot from d3-graph-gallery.

Install

npm i d3-ridge

Usage

import {ridge} from 'd3-ridge'

Assumptions

It is assumed that the data bound to ridge is an object, where each ridge is specified a key in the object and each value corresponds to the numeric values to estimate the density from e.g.

data = {
  'A': [95,95,95,95],
  'B': [25,30,32,10],
}

more complex data can be provided should utility functions such as valueExtractor be overwritten from their default behavior:

data = {
  A: {
    x: { value: 1 },
    y: { value: 2 },
    ...
  },
  ...
}

let container = d3.select('<wherever-you-want-to-dump-the-plot>')
let r = ridge(container)
.valueExtractor(function(d, i){
  let subKeys = d3.keys(data[d])
  return subKeys.map((k, j)=>data[d][k].value)
})

Customization

The following values are all exposed from the ridge closure:

• data
• spaceX: how much horizontal space the plot should occupy, axes exclude
• spaceY: how much vertical space the plot should occupy, axes exclude
• dataKeys: the keys from the data object, calculated for you
• dataValues: the values used to compute the densities, calculated for you
• dataExtent: the min and max of all values across datasets
• scaleX (d3.scaleLinear()): scale used on the x axis
• scaleY (d3.scaleLinear()): scale used on the y axis
• valueExtractor ()(key, index) => data[key]): how to get the values for each key in dataKeys (should be a list of numeric values)
• curve (d3.curveBasis): the curve attribute used for rendering the densities
• colorExtractor ((key, index) => {return d3.scaleSequential().interpolator(d3.interpolateViridis)(index / dataKeys.length)}): how to color each ridge
• opacity (0.7): opacity applied to all ridges
• stroke ((k, i)=>'black'): stroke applied to each ridge
• strokeWidth (0.1)
• kernel (7)
• kernelFineness (40)
• axisDensityTicks (4): number of ticks that appear on the density axis
• axisXTicks (5): number of ticks that appear on the x axis
• mouseover ((k, i) => {}): function bound to mouseenter and mousemove events on each ridge
• mouseleave ((k, i) => {}): function bound to mouseexit and mouseleave events on each ridge
• namespace ('ridge'): included in svg elements to prevent multi-instance selection issues
• axisX
• axisY
• axisYDensity
• gAxisX
• gAxisY
• gAxisYDensity
• areaContainer: contains the paths of the ridges
• categorySpaceY: the space between each ridge
• adjustedSpaceY: spaceY - categorySpaceY, in other words it ensures that the top ridge is visibile
• scaleYCategories
• gridlinesX (true)
• gridlinesY (true),
• includeDensityScale (true): whether or not the density scale should be included
• applyZoom (true): whether or not pan and zoom should be bound to chart
• transitionDuration (500): applied to axes and ridges
• easeFn (d3.easeSin): applied to axes and ridges
• zoom d3.zoom(): access to the zoom instance
• zoomed (default provided): the function zoom invokes. Modify at your own risk.