SwarmPlot

@nivo/swarmplotsvgisomorphic

A swarm plot component which can also be used to make a beeswarm plot when using a single group.

This chart can display 2 data dimensions, a categorical one: groups, and a quantitative one: values.

You can optionally add a third quantitative dimension if you enable dynamic node size, please have a look at the size property for further information.

You can also enable a voronoi mesh to capture user's interactions, using the useMesh property.

This example uses 3 dimensions, the grouping is done by the group property while the value is determined by the price property, node size is dynamic and depends on the volume property.

Under the hood, this chart uses d3-force with a simulation involving collisions and x/y forces, the quality of the simulation can be adjusted, the strength of the value force too.

The responsive alternative of this component is ResponsiveSwarmPlot.

194 nodes
Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
string | Functionoptionaldefault:'id'
Property used to retrieve the node's unique identifier.
string | Functionoptionaldefault:'value'
Property used to retrieve the node's value.
string | (value: number) => string | numberoptional
open editor
Optional formatter for values.
string[]required
Available groups.
string | Functionoptionaldefault:'group'
Propety used to group nodes, must return a group which is available in the groups property.
number | object | Functionoptionaldefault:6
How to compute node size, static or dynamic.
numberoptionaldefault:2
px
Spacing between nodes.
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvas
Simulation
numberoptionaldefault:1
Force strength.
numberoptionaldefault:120
Adjust the simulation quality.
Layout
stringoptionaldefault:'vertical'
Chart layout.
numberoptionaldefault:0
px
Gap between each serie.
Style
optional
Define style for common elements such as labels, axes…
Function | object | stringoptionaldefault:{"scheme":"nivo"}
nivo
Defines how to compute node color.
Function | stringoptionaldefault:'group'
group
Property or accessor function to be used with colors.
number | Functionoptionaldefault:0
px
Control node border width.
string | object | Functionoptionaldefault:'rgba(0, 0, 0, 0)'
inheritthemecustom
inherited property
color
modifiers
darker
opacity
Control node border color.
Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'circles', 'annotations', 'mesh']
Defines the order of layers and add custom layers.
Componentoptional
Override default circle component for the SVG implementation.
supportsvgcanvas
Functionoptional
Override default circle rendering for the canvas implementation.
supportsvgcanvas
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
Array<number | string>optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
Array<number | string>optional
Specify values to use for horizontal grid lines.
objectoptional
Top axis configuration.
objectoptional
Right axis configuration.
objectoptional
Bottom axis configuration.
objectoptional
Left axis configuration.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
booleanoptionaldefault:false
   Use a mesh to detect mouse interactions, always true for canvas.
supportsvgcanvas
booleanoptionaldefault:false
   Display the mesh used to detect mouse interactions (voronoi cells), depends on useMesh.
(node, event) => voidoptional
onMouseEnter handler.
(node, event) => voidoptional
onMouseMove handler.
(node, event) => voidoptional
onMouseLeave handler.
(node, event) => voidoptional
onClick handler.
Functionoptional
Custom tooltip component.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
supportsvgcanvas
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.
supportsvgcanvas