Add Charts into Our React App with Nivo — Swarm Plot

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Swarm Plot

Nivo comes with code to let us add a swarm plot into our React app.

To install the required packages, we run:

npm i @nivo/swarmplot

Then we can create the chart by writing:

import React from "react";
import { ResponsiveSwarmPlot } from "@nivo/swarmplot";

const data = [
  {
    id: "0.0",
    group: "group A",
    price: 136,
    volume: 9
  },
  {
    id: "0.1",
    group: "group A",
    price: 299,
    volume: 7
  },
  {
    id: "0.2",
    group: "group A",
    price: 358,
    volume: 19
  },

{
    id: "1.0",
    group: "group B",
    price: 102,
    volume: 11
  },
  {
    id: "1.1",
    group: "group B",
    price: 157,
    volume: 4
  },
  {
    id: "1.2",
    group: "group B",
    price: 184,
    volume: 7
  },
  {
    id: "2.70",
    group: "group C",
    price: 225,
    volume: 6
  },
  {
    id: "2.71",
    group: "group C",
    price: 161,
    volume: 17
  },
  {
    id: "2.72",
    group: "group C",
    price: 406,
    volume: 13
  }
];

const MyResponsiveSwarmPlot = ({ data }) => (
  <ResponsiveSwarmPlot
    data={data}
    groups={["group A", "group B", "group C"]}
    value="price"
    valueFormat="$.2f"
    valueScale={{ type: "linear", min: 0, max: 500, reverse: false }}
    size={{ key: "volume", values: [4, 20], sizes: [6, 20] }}
    forceStrength={4}
    simulationIterations={100}
    borderColor={{
      from: "color",
      modifiers: [
        ["darker", 0.6],
        ["opacity", 0.5]
      ]
    }}
    margin={{ top: 80, right: 100, bottom: 80, left: 100 }}
    axisTop={{
      orient: "top",
      tickSize: 10,
      tickPadding: 5,
      tickRotation: 0,
      legend: "group if vertical, price if horizontal",
      legendPosition: "middle",
      legendOffset: -46
    }}
    axisRight={{
      orient: "right",
      tickSize: 10,
      tickPadding: 5,
      tickRotation: 0,
      legend: "price if vertical, group if horizontal",
      legendPosition: "middle",
      legendOffset: 76
    }}
    axisBottom={{
      orient: "bottom",
      tickSize: 10,
      tickPadding: 5,
      tickRotation: 0,
      legend: "group if vertical, price if horizontal",
      legendPosition: "middle",
      legendOffset: 46
    }}
    axisLeft={{
      orient: "left",
      tickSize: 10,
      tickPadding: 5,
      tickRotation: 0,
      legend: "price if vertical, group if horizontal",
      legendPosition: "middle",
      legendOffset: -76
    }}
    motionStiffness={50}
    motionDamping={10}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveSwarmPlot data={data} />
    </div>
  );
}

We define the data array to add the data for the chart.

groups have the group names for the groups.

They should match the value of the group array.

value has the property name with the values.

valueFormat has the format code for the values.

valueScale has the scale for the values.

size has the size of the circles. We specify the range of the size and the sizes have the sizes.

forceStrength has the force strength.

simulationIterations is the simulation quanlity.

borderColor has the border color for the circles.

margin has the chart margins.

axisTop , axisBottom and axisRight have the axes.

tickSize , tickPadding , and tickRotation have the tick size, padding, and rotation angle in degrees.

legend has the axes legend text.

orient has the axis orientation.

motionStiffness and motionDamping has the animation options.

In App , we set width and height on the container div so we can render the chart.

Conclusion

We can render swarm plots in our React app with Nivo.