A swarm plot component which can also be used to make a beeswarm plotwhen 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 enabledynamic node size, please have a look at thesize propertyfor further information.
You can also enable a voronoi mesh to capture user'sinteractions, using theuseMesh property.
This example uses 3 dimensions, the grouping is done by thegroupproperty while the value is determined by theprice property,node size is dynamic and depends on thevolume property.
Under the hood, this chart usesd3-forcewith a simulation involving collisions and x/y forces, the quality ofthe simulation can be adjusted, the strength of thevalue force too.
The responsive alternative of this component isResponsiveSwarmPlot.
Chart data.
'id'Property used to retrieve the node's unique identifier.
'value'Property used to retrieve the node's value.
Optional formatter for values.
Available groups.
'group'Propety used to group nodes, must return a group which is available in the groups property.
6How to compute node size, static or dynamic.
2Spacing between nodes.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
1Force strength.
120Adjust the simulation quality.
'vertical'Chart layout.
0Gap between each serie.
Define style for common elements such as labels, axes…
Define chart's colors.
'group'Property or accessor function to be used with colors.
0Control node border width.
'rgba(0, 0, 0, 0)'Control node border color.
'grid','axes','circles','annotations','mesh']Defines the order of layers and add custom layers.
Override default circle component for the SVG implementation.
Override default circle rendering for the canvas implementation.
trueEnable/disable x grid.
Specify values to use for vertical grid lines.
trueEnable/disable y grid.
Specify values to use for horizontal grid lines.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
trueEnable/disable interactivity.
falseUse a mesh to detect mouse interactions, always true for canvas.
falseDisplay the mesh used to detect mouse interactions (voronoi cells), depends on useMesh.
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
onClick handler.
Custom tooltip component.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.