Scale

Graphs can be drawn using various scales to achieve different results, or to compliment different data sets. The most common scales are provided as built-in model and editor pairs, but adding a new scale type to be available for selection is also a fairly straighforward task.

All scales are based on scale types available in the @visx/scale library, which are in turn based on scale types from the popular d3-scale library.

The official d3-scales documetation can be consulted for information on any of the built-in types or as a reference when attempting to implement a custom type.

• Time Scale
• UTC Scale
• Band Scale
• Linear Scale

To implement a new scale, add both a ScaleModel and ScaleModelEditor plugin to allow a user to customize any scale options:

ModelSetup

File LogScaleModel.js.

const TYPE = 'graph.scale.log'

function create() {
  return {
    type : TYPE,
    visxScaleType : 'log',
    ...otherOptions
  }
}

export default {
  create,
  TYPE
}

Scale Types

Each scale model must have a property called visxScaleType which indicates the type of scale from among the available scale types found here in the @visx/scale library.

File PluginSetup.js

molten.addPlugin( 'ScaleModel', { type : LogScaleModel.TYPE, name : 'Logarithmic', model : LogScaleModel } )
molten.addPlugin( 'ScaleModelEditor', { type : LogScaleModel.TYPE, editor : LogScaleModelEditor } )

Tip

Adding your ScaleModel and ScaleModelEditor plugins will automatically register those plugins with the Model and ModelEditor plugin points.

Scale Editor

Note: Not shown above is the logarithm scale editor. You can provide an editor to allow users to set any of the available options on the particular d3-scale type you are implementing.