Category: React

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.

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.

Sunburst Chart

Nivo comes with code to let us add a sunburst chart into our React app.

To install the required packages, we run:

npm i @nivo/sunburst

Then we can create the chart by writing:

import React from "react";
import { ResponsiveSunburst } from "@nivo/sunburst";

const data = {
  name: "nivo",
  color: "hsl(57, 70%, 50%)",
  children: [
    {
      name: "viz",
      color: "hsl(294, 70%, 50%)",
      children: [
        {
          name: "stack",
          color: "hsl(241, 70%, 50%)",
          children: [
            {
              name: "cchart",
              color: "hsl(188, 70%, 50%)",
              loc: 61592
            },
            {
              name: "xAxis",
              color: "hsl(215, 70%, 50%)",
              loc: 137929
            },
            {
              name: "yAxis",
              color: "hsl(262, 70%, 50%)",
              loc: 120083
            },
            {
              name: "layers",
              color: "hsl(284, 70%, 50%)",
              loc: 197403
            }
          ]
        },
        {
          name: "ppie",
          color: "hsl(182, 70%, 50%)",
          children: [
            {
              name: "chart",
              color: "hsl(311, 70%, 50%)",
              children: [
                {
                  name: "pie",
                  color: "hsl(80, 70%, 50%)",
                  children: [
                    {
                      name: "outline",
                      color: "hsl(264, 70%, 50%)",
                      loc: 81213
                    },
                    {
                      name: "slices",
                      color: "hsl(0, 70%, 50%)",
                      loc: 186108
                    },
                    {
                      name: "bbox",
                      color: "hsl(335, 70%, 50%)",
                      loc: 172377
                    }
                  ]
                },
                {
                  name: "donut",
                  color: "hsl(66, 70%, 50%)",
                  loc: 50826
                },
                {
                  name: "gauge",
                  color: "hsl(140, 70%, 50%)",
                  loc: 77497
                }
              ]
            },
            {
              name: "legends",
              color: "hsl(347, 70%, 50%)",
              loc: 62688
            }
          ]
        }
      ]
    },
    {
      name: "colors",
      color: "hsl(241, 70%, 50%)",
      children: [
        {
          name: "rgb",
          color: "hsl(175, 70%, 50%)",
          loc: 135916
        },
        {
          name: "hsl",
          color: "hsl(221, 70%, 50%)",
          loc: 90136
        }
      ]
    },
    {
      name: "utils",
      color: "hsl(30, 70%, 50%)",
      children: [
        {
          name: "randomize",
          color: "hsl(349, 70%, 50%)",
          loc: 9192
        },
        {
          name: "resetClock",
          color: "hsl(341, 70%, 50%)",
          loc: 20094
        },
        {
          name: "noop",
          color: "hsl(158, 70%, 50%)",
          loc: 69685
        }
      ]
    },
    {
      name: "set",
      color: "hsl(265, 70%, 50%)",
      children: [
        {
          name: "clone",
          color: "hsl(260, 70%, 50%)",
          loc: 121544
        },
        {
          name: "intersect",
          color: "hsl(7, 70%, 50%)",
          loc: 150825
        },
        {
          name: "merge",
          color: "hsl(289, 70%, 50%)",
          loc: 28395
        }
      ]
    },
    {
      name: "text",
      color: "hsl(28, 70%, 50%)",
      children: [
        {
          name: "trim",
          color: "hsl(198, 70%, 50%)",
          loc: 109667
        },
        {
          name: "slugify",
          color: "hsl(166, 70%, 50%)",
          loc: 38993
        }
      ]
    },
    {
      name: "misc",
      color: "hsl(83, 70%, 50%)",
      children: [
        {
          name: "greetings",
          color: "hsl(339, 70%, 50%)",
          children: [
            {
              name: "hey",
              color: "hsl(13, 70%, 50%)",
              loc: 181091
            },
            {
              name: "HOWDY",
              color: "hsl(1, 70%, 50%)",
              loc: 38170
            },
            {
              name: "aloha",
              color: "hsl(170, 70%, 50%)",
              loc: 4275
            }
          ]
        },
        {
          name: "other",
          color: "hsl(233, 70%, 50%)",
          loc: 98839
        },
        {
          name: "path",
          color: "hsl(169, 70%, 50%)",
          children: [
            {
              name: "pathA",
              color: "hsl(281, 70%, 50%)",
              loc: 31814
            },
            {
              name: "pathB",
              color: "hsl(58, 70%, 50%)",
              children: [
                {
                  name: "pathB1",
                  color: "hsl(218, 70%, 50%)",
                  loc: 132941
                },
                {
                  name: "pathB2",
                  color: "hsl(337, 70%, 50%)",
                  loc: 122503
                },
                {
                  name: "pathB3",
                  color: "hsl(84, 70%, 50%)",
                  loc: 151799
                },
                {
                  name: "pathB4",
                  color: "hsl(256, 70%, 50%)",
                  loc: 1765
                }
              ]
            },
            {
              name: "pathC",
              color: "hsl(18, 70%, 50%)",
              children: [
                {
                  name: "pathC1",
                  color: "hsl(100, 70%, 50%)",
                  loc: 154402
                },
                {
                  name: "pathC2",
                  color: "hsl(111, 70%, 50%)",
                  loc: 7532
                },
                {
                  name: "pathC3",
                  color: "hsl(317, 70%, 50%)",
                  loc: 172141
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

const MyResponsiveSunburst = ({ data }) => (
  <ResponsiveSunburst
    data={data}
    margin={{ top: 40, right: 20, bottom: 20, left: 20 }}
    id="name"
    value="loc"
    cornerRadius={2}
    borderWidth={1}
    borderColor="white"
    colors={{ scheme: "nivo" }}
    childColor={{ from: "color" }}
    animate={false}
    motionConfig="gentle"
    isInteractive={true}
  />
);

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

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

Then we add the ResponsiveSunburst component to render the sunburst chart.

data prop is set to the data object.

margin has the chart margins.

id is set the property name of the data entry to identify each entry.

value has the property name of the data entry with the chart values.

cornerRadius has the corner radius.

borderWidth has the border width for the chart pieces.

borderColor has the border color for the pieces.

colors has the color scheme for the chart.

chilColor has the color scheme for the chart items.

animate , motionConfig , and interactive enables animation.

In App , we set the width and height so that we can render the chart.

Conclusion

We can render sunburst charts in our React app with Nivo.

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.

Stream Chart

Nivo comes with code to let us add a stream chart into our React app.

To install the required packages, we run:

npm i @nivo/stream

Then we can create the chart by writing:

import React from "react";
import { ResponsiveStream } from "@nivo/stream";

const data = [
  {
    Raoul: 15,
    Josiane: 117,
    Marcel: 172,
    René: 72,
    Paul: 74,
    Jacques: 106
  },
  {
    Raoul: 58,
    Josiane: 43,
    Marcel: 49,
    René: 114,
    Paul: 45,
    Jacques: 158
  },
  {
    Raoul: 133,
    Josiane: 185,
    Marcel: 27,
    René: 36,
    Paul: 159,
    Jacques: 195
  }
];

const MyResponsiveStream = ({ data }) => (
  <ResponsiveStream
    data={data}
    keys={["Raoul", "Josiane", "Marcel", "René", "Paul", "Jacques"]}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: 36
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "",
      legendOffset: -40
    }}
    offsetType="silhouette"
    colors={{ scheme: "nivo" }}
    fillOpacity={0.85}
    borderColor={{ theme: "background" }}
    defs={[
      {
        id: "dots",
        type: "patternDots",
        background: "inherit",
        color: "#2c998f",
        size: 4,
        padding: 2,
        stagger: true
      },
      {
        id: "squares",
        type: "patternSquares",
        background: "inherit",
        color: "#e4c912",
        size: 6,
        padding: 2,
        stagger: true
      }
    ]}
    fill={[
      {
        match: {
          id: "Paul"
        },
        id: "dots"
      },
      {
        match: {
          id: "Marcel"
        },
        id: "squares"
      }
    ]}
    dotSize={8}
    dotColor={{ from: "color" }}
    dotBorderWidth={2}
    dotBorderColor={{ from: "color", modifiers: [["darker", 0.7]] }}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        translateX: 100,
        itemWidth: 80,
        itemHeight: 20,
        itemTextColor: "#999999",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000000"
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data for the chart in the data array.

Then we define the MyResponsiveStream component.

We set the value of the data prop to data to render the data in the chart.

keys have the property names with the values for the streams.

margin has the chart margins.

axisBottom and axisLeft have the x and y axes respectively.

tickSize has the tick size in pixels.

orient has the location of the ticks.

tickPadding has the tick padding in pixels.

legend has the legend label text.

legendOffset has the legend position.

offsetType has the offset type.

colors have the color scheme for the streams.

fillOpacity have the fill opacity for the streams.

borderColor have the color scheme for the border.

defs have the stream patterns.

background has the background styles.

color have the foreground color.

size has the tile size.

stagger sets whether we stagger the tiles or not.

fill have the fill styles, which we set in defs .

dotSize has the size of the dots in the stream.

dotColor has the color of the dots in the stream.

dotBorderWidth has the dot border width.

dotBorderColor have the border color.

legends have the legend item styles.

We have the translateX property to translate the items

itemWidth , itemHeight , and itemTextColor have the dimensions and color for the legend item text.

symbolSize and symbolShape have the legend item symbol size and shape.

effects have the hover effect for the legend items.

Finally, in App , we set the width and height of the chart to render the chart.

Conclusion

We can create a stream chart easily in our React app with Nivo.

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.

Scatter Plot

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

To install the required packages, we run:

npm i @nivo/scatterplot

Then we can create the chart by writing:

import React from "react";
import { ResponsiveScatterPlot } from "[@nivo/scatterplot](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fnivo%2Fscatterplot "Twitter profile for @nivo/scatterplot")";

const data = [
  {
    id: "group A",
    data: [
      {
        x: 59,
        y: 119
      },
      {
        x: 97,
        y: 10
      },
      {
        x: 3,
        y: 60
      }
    ]
  },
  {
    id: "group B",
    data: [
      {
        x: 44,
        y: 56
      },
      {
        x: 14,
        y: 108
      },
      {
        x: 62,
        y: 97
      }
    ]
  },
  {
    id: "group C",
    data: [
      {
        x: 40,
        y: 82
      },
      {
        x: 79,
        y: 7
      },
      {
        x: 7,
        y: 36
      }
    ]
  },
  {
    id: "group E",
    data: [
      {
        x: 43,
        y: 61
      },
      {
        x: 12,
        y: 80
      },
      {
        x: 43,
        y: 60
      }
    ]
  }
];

const MyResponsiveScatterPlot = ({ data }) => (
  <ResponsiveScatterPlot
    data={data}
    margin={{ top: 60, right: 140, bottom: 70, left: 90 }}
    xScale={{ type: "linear", min: 0, max: "auto" }}
    xFormat={function (e) {
      return e + " g";
    }}
    yScale={{ type: "linear", min: 0, max: "auto" }}
    yFormat={function (e) {
      return e + " m";
    }}
    blendMode="multiply"
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: "bottom",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "weight",
      legendPosition: "middle",
      legendOffset: 46
    }}
    axisLeft={{
      orient: "left",
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: "size",
      legendPosition: "middle",
      legendOffset: -60
    }}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        justify: false,
        translateX: 130,
        translateY: 0,
        itemWidth: 100,
        itemHeight: 12,
        itemsSpacing: 5,
        itemDirection: "left-to-right",
        symbolSize: 12,
        symbolShape: "circle",
        effects: [
          {
            on: "hover",
            style: {
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
);

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

We have the data array with objects that have the id and data properties.

x and y have the x and y coordinates of the points for the scatterplot.

Next, we create the MyResponsiveScatterPlot component.

We set the data prop to data to render the chart data.

margin has the margins.

xScale has the scale for the x-axis.

xFormat has a function to return the text for the x coordinate label text.

yScale has the scale for the x-axis.

yFormat has a function to return the text for the x coordinate label text.

blendMode has the value of the CSS mix-blend-mode property.

axisBottom and axisLeft have styles for the x and y axes respectively.

tickSize has the tick size in pixels.

tickPadding has the tick padding.

tickRotation has the angle of the text in degrees.

legend has the legend text.

legendPosition has the position.

And legendOffset has the legend position in pixels.

The legends prop has more options for the legend items.

We have the translate properties to translate the items.

item properties set the item dimensions, direction, and spacing.

symbolSize and symbolShape has the size and shape of the legend symbol respectively.

effects have the effect property.

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

Conclusion

We can render a scatter plot in a React app with Nivo.

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.

Sankey Diagram

Nivo comes with code to let us add a Sankey diagram into our React app.

To install the required packages, we run:

npm i @nivo/sankey

Then we can create the diagram by writing:

import React from "react";
import { ResponsiveSankey } from "@nivo/sankey";

const data = {
  nodes: [
    {
      id: "John",
      color: "hsl(355, 70%, 50%)"
    },
    {
      id: "Raoul",
      color: "hsl(276, 70%, 50%)"
    },
    {
      id: "Jane",
      color: "hsl(331, 70%, 50%)"
    },
    {
      id: "Marcel",
      color: "hsl(32, 70%, 50%)"
    },
    {
      id: "Ibrahim",
      color: "hsl(331, 70%, 50%)"
    },
    {
      id: "Junko",
      color: "hsl(71, 70%, 50%)"
    }
  ],
  links: [
    {
      source: "Ibrahim",
      target: "John",
      value: 27
    },
    {
      source: "Ibrahim",
      target: "Marcel",
      value: 151
    },
    {
      source: "John",
      target: "Jane",
      value: 172
    },
    {
      source: "John",
      target: "Raoul",
      value: 27
    }
  ]
};

const MyResponsiveSankey = ({ data }) => (
  <ResponsiveSankey
    data={data}
    margin={{ top: 40, right: 160, bottom: 40, left: 50 }}
    align="justify"
    colors={{ scheme: "category10" }}
    nodeOpacity={1}
    nodeThickness={18}
    nodeInnerPadding={3}
    nodeSpacing={24}
    nodeBorderWidth={0}
    nodeBorderColor={{ from: "color", modifiers: [["darker", 0.8]] }}
    linkOpacity={0.5}
    linkHoverOthersOpacity={0.1}
    enableLinkGradient={true}
    labelPosition="outside"
    labelOrientation="vertical"
    labelPadding={16}
    labelTextColor={{ from: "color", modifiers: [["darker", 1]] }}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        translateX: 130,
        itemWidth: 100,
        itemHeight: 14,
        itemDirection: "right-to-left",
        itemsSpacing: 2,
        itemTextColor: "#999",
        symbolSize: 14,
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000"
            }
          }
        ]
      }
    ]}
  />
);

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

We define the data we’ll render in the data object.

Then in the MyResponsiveSankey component, we render the ResponsiveSankey component to render the Sankey diagram.

We set the node styles with the nodeOpacity , nodeThickness , nodeInnerPadding , nodeSpacing , nodeBorderWidth , and nodeBorderColor props.

linkOpacity has the opacity of the link that we’re hovering over.

linkHoverOthersOpacity has the opacity of the link that we aren’t hovering over.

labelPosition has the label position.

labelOrientation has the label orientation.

labelTextColor has the label text color scheme.

legends has the legend settings.

We set the item dimensions and translation.

symbolSize has the legend symbol size in pixels.

effects is set to have the hover effect and change the text of the item we hover over with itemTextColor .

Then in App , we set the width and height of the div so we can render the chart.

Conclusion

We can add a Sankey diagram into our React app with Nivo.