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.
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 for non-responsive component.
Chart default width for responsive component.
Chart height for non-responsive component.
Chart default height for responsive component.
Debounce width/height updates for responsive component.
A callback for when responsive component is resized.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.