How to use @nivo/swarmplot - 5 common examples
To help you get started, we’ve selected a few @nivo/swarmplot examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
plouc / nivo / website / src / pages / swarmplot / canvas.js View on Github 
value: 'price',
valueFormat: '$.2f',
valueScale: {
type: 'linear',
min: 0,
max: 500,
reverse: false,
},
size: {
key: 'volume',
values: [4, 20],
sizes: [4, 12],
},
spacing: 1,
layout: SwarmPlotCanvasDefaultProps.layout,
gap: SwarmPlotCanvasDefaultProps.gap,
forceStrength: 1,
simulationIterations: 60,
colors: { scheme: 'paired' },
colorBy: 'group',
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 0.6]],
},
margin: {
top: 80,
right: 100,
bottom: 80,
left: 100,identity: 'id',
value: 'price',
valueFormat: '$.2f',
valueScale: {
type: 'linear',
min: 0,
max: 500,
reverse: false,
},
size: {
key: 'volume',
values: [4, 20],
sizes: [4, 12],
},
spacing: 1,
layout: SwarmPlotCanvasDefaultProps.layout,
gap: SwarmPlotCanvasDefaultProps.gap,
forceStrength: 1,
simulationIterations: 60,
colors: { scheme: 'paired' },
colorBy: 'group',
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [['darker', 0.6]],
},
margin: {
top: 80,
right: 100,
bottom: 80,max: 500,
reverse: false,
},
size: {
key: 'volume',
values: [4, 20],
sizes: [6, 20],
},
spacing: 2,
layout: SwarmPlotDefaultProps.layout,
gap: SwarmPlotDefaultProps.gap,
forceStrength: 4,
simulationIterations: 100,
colors: SwarmPlotDefaultProps.colors,
colorBy: 'group',
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [
['darker', 0.6],
['opacity', 0.5],
],
},
margin: {
top: 80,
right: 100,
bottom: 80,
left: 100,
},
enableGridX: true,value: 'price',
valueFormat: '$.2f',
valueScale: {
type: 'linear',
min: 0,
max: 500,
reverse: false,
},
size: {
key: 'volume',
values: [4, 20],
sizes: [6, 20],
},
spacing: 2,
layout: SwarmPlotDefaultProps.layout,
gap: SwarmPlotDefaultProps.gap,
forceStrength: 4,
simulationIterations: 100,
colors: SwarmPlotDefaultProps.colors,
colorBy: 'group',
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [
['darker', 0.6],
['opacity', 0.5],
],
},
margin: {
top: 80,identity: 'id',
value: 'price',
valueFormat: '$.2f',
valueScale: {
type: 'linear',
min: 0,
max: 500,
reverse: false,
},
size: {
key: 'volume',
values: [4, 20],
sizes: [6, 20],
},
spacing: 2,
layout: SwarmPlotDefaultProps.layout,
gap: SwarmPlotDefaultProps.gap,
forceStrength: 4,
simulationIterations: 100,
colors: SwarmPlotDefaultProps.colors,
colorBy: 'group',
borderWidth: 0,
borderColor: {
from: 'color',
modifiers: [
['darker', 0.6],
['opacity', 0.5],
],
},
margin: {@nivo/swarmplot
<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
