Voronoi

Voronoi charts are used for visualizing proximity and influence by dividing space into distinct regions based on the distance to a set of points.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
    ]}
  />
</VictoryChart>

Voronoi - Labels

Voronoi charts can be used to display labels using a label property in the dataset or by specifying a function to the labels prop.

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    data={[
      { x: 1, y: 2, label: "Dogs" },
      { x: 2, y: 3, label: "Cats" },
      { x: 3, y: 5, label: "Snakes" },
      { x: 4, y: 4, label: "Rabbits" },
      { x: 5, y: 7, label: "Birds" },
    ]}
  />
</VictoryChart>

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
    ]}
    labels={({ datum }) =>
      `y: ${datum.y}`
    }
  />
</VictoryChart>

Voronoi - Tooltips

Tooltips can be added by using a VictoryTooltip component as the labelComponent.

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    data={[
      { x: 1, y: 2, label: "Dogs" },
      { x: 2, y: 3, label: "Cats" },
      { x: 3, y: 5, label: "Snakes" },
      { x: 4, y: 4, label: "Rabbits" },
      { x: 5, y: 7, label: "Birds" },
    ]}
    labels={({ datum }) => datum.y}
    labelComponent={<VictoryTooltip />}
  />
</VictoryChart>

Voronoi - Circles

Voronoi charts can also be used to display circles around data points.

Live View

Loading...

Live Editor

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 7 },
];

function App() {
  return (
    <VictoryChart
      domain={{ x: [0, 5], y: [0, 7] }}
      theme={VictoryTheme.clean}
    >
      <VictoryVoronoi
        data={data}
        size={50}
      />
      <VictoryLine data={data} />
      <VictoryScatter data={data} />
    </VictoryChart>
  );
}

render(<App />);

Voronoi - Animation

Charts can be animated by setting the animate prop. See the animations guide for more information.

Live View

Loading...

Live Editor

function App() {
  const [data, setData] =
    React.useState(getData());

  React.useState(() => {
    const setStateInterval =
      window.setInterval(() => {
        setData(getData());
      }, 4000);

    return () => {
      window.clearInterval(
        setStateInterval,
      );
    };
  }, []);

  return (
    <VictoryChart
      theme={VictoryTheme.clean}
    >
      <VictoryVoronoi
        theme={VictoryTheme.clean}
        animate={{ duration: 1000 }}
        data={data}
      />
      <VictoryScatter
        theme={VictoryTheme.clean}
        animate={{ duration: 1000 }}
        data={data}
      />
    </VictoryChart>
  );
}

function getData() {
  return _.range(20).map((i: number) => {
    return {
      x: _.random(600),
      y: _.random(600),
      i,
    };
  });
}

render(<App />);

Voronoi - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
    ]}
    style={{
      data: {
        stroke: "#ffffff",
        strokeWidth: 2,
        fill: "#2299ff",
        fillOpacity: 0.7,
      },
    }}
  />
</VictoryChart>

Voronoi - Events

Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0, 5], y: [0, 7] }}
  theme={VictoryTheme.clean}
>
  <VictoryVoronoi
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "data",
                mutation: (props) => {
                  const fill =
                    props.style &&
                    props.style.fill;
                  return fill ===
                    "white"
                    ? null
                    : {
                        style: {
                          fill: "white",
                        },
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={sampleData}
  />
</VictoryChart>

Standalone Rendering

Area charts can be rendered outside a VictoryChart.

Live View

Loading...

Live Editor

<VictoryVoronoi
  theme={VictoryTheme.clean}
  data={[
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 7 },
  ]}
/>

They can also be embeded in other SVG components by using the standalone prop.

Live View

Loading...

Live Editor

<svg
  width={300}
  height={300}
  style={{
    display: "block",
    margin: "0 auto",
  }}
>
  <circle
    cx={150}
    cy={150}
    r={150}
    fill="#9ded91"
  />
  <VictoryVoronoi
    standalone={false}
    theme={VictoryTheme.clean}
    width={300}
    height={300}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 },
    ]}
  />
</svg>