Layouts

Explore how different layouts visualize chart data.

Switch between ReGraph’s layouts using the buttons above the chart.

Layouts calculate positions for items on the chart. The layouts are:

Organic: A highly performant force-directed layout.
Structural: Places nodes which are structurally similar together in the network.
Sequential: Lays out tree-like data in a traditional hierarchy structure, minimizing crossed links.
Lens: Places nodes within a circle, with connected nodes next to each other.
Radial: Places nodes in a circular hierarchy of concentric circles.

import React, { useState } from "react";
import { createRoot } from "react-dom/client";

import { Chart } from "regraph";

import data from "./data";

import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";

export const Demo = () => <LayoutDemo items={data()} />;

function LayoutDemo(props) {
  const [state, setState] = useState({
    layout: { name: "organic" },
  });

  const { items } = props;

  const top = ["2", "5"];
  const layouts = ["organic", "structural", "lens", "radial", "sequential"];

  const runLayout = (name) => {
    setState((current) => ({ ...current, layout: { name, top } }));
  };

  return (
    <div className="story">
      <div className="options">
        {layouts.map((name) => (
          <button
            type="button"
            className={state.layout.name === name ? "active" : ""}
            key={name}
            onClick={() => runLayout(name)}
          >
            {name.charAt(0).toUpperCase() + name.slice(1)}
          </button>
        ))}
      </div>
      <div className="chart-wrapper">
        <Chart items={items} layout={state.layout} animation={{ animate: true, time: 750 }} />
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

Data

import { style } from "@ci/theme/rg/js/storyStyles";

function data() {
  return {
    2: { ...style.primary3, data: { level: 1 } },
    3: { ...style.primary2, data: { level: 2 } },
    4: { ...style.primary2, data: { level: 2 } },
    5: { ...style.primary3, data: { level: 1 } },
    6: { ...style.primary2, data: { level: 2 } },
    7: { ...style.primary1, data: { level: 3 } },
    8: { ...style.primary2, data: { level: 2 } },
    9: { ...style.primary1, data: { level: 3 } },
    10: { ...style.primary2, data: { level: 2 } },
    11: { ...style.primary1, data: { level: 3 } },
    12: { ...style.primary2, data: { level: 2 } },
    13: { ...style.primary1, data: { level: 3 } },
    14: { ...style.primary2, data: { level: 2 } },
    15: { ...style.primary2, data: { level: 2 } },
    16: { ...style.primary1, data: { level: 3 } },
    17: { ...style.primary1, data: { level: 3 } },
    18: { ...style.primary1, data: { level: 3 } },
    19: { ...style.primary1, data: { level: 3 } },
    20: { ...style.primary1, data: { level: 3 } },
    21: { ...style.primary1, data: { level: 3 } },
    22: { ...style.primary1, data: { level: 3 } },
    23: { ...style.primary2, data: { level: 2 } },
    25: { ...style.primary1, data: { level: 3 } },
    26: { ...style.primary1, data: { level: 3 } },
    27: { ...style.primary1, data: { level: 3 } },
    28: { ...style.primary1, data: { level: 3 } },
    29: { ...style.primary2, data: { level: 2 } },
    31: { ...style.primary1, data: { level: 3 } },
    33: { ...style.primary1, data: { level: 3 } },
    35: { ...style.primary1, data: { level: 3 } },
    37: { ...style.primary1, data: { level: 3 } },
    39: { ...style.primary1, data: { level: 3 } },
    "3-5": {
      id1: "3",
      id2: "5",
      ...style.link,
    },
    "3-7": {
      id1: "3",
      id2: "7",
      ...style.link,
    },
    "3-9": {
      id1: "3",
      id2: "9",
      ...style.link,
    },
    "3-11": {
      id1: "3",
      id2: "11",
      ...style.link,
    },
    "5-15": {
      id1: "5",
      id2: "15",
      ...style.link,
    },
    "5-23": {
      id1: "5",
      id2: "23",
      ...style.link,
    },
    "5-29": {
      id1: "5",
      id2: "29",
      ...style.link,
    },
    "15-13": {
      id1: "15",
      id2: "13",
      ...style.link,
    },
    "15-17": {
      id1: "15",
      id2: "17",
      ...style.link,
    },
    "15-19": {
      id1: "15",
      id2: "19",
      ...style.link,
    },
    "15-21": {
      id1: "15",
      id2: "21",
      ...style.link,
    },
    "29-35": {
      id1: "29",
      id2: "35",
      ...style.link,
    },
    "29-25": {
      id1: "29",
      id2: "25",
      ...style.link,
    },
    "29-27": {
      id1: "29",
      id2: "27",
      ...style.link,
    },
    "29-31": {
      id1: "29",
      id2: "31",
      ...style.link,
    },
    "29-33": {
      id1: "29",
      id2: "33",
      ...style.link,
    },
    "29-37": {
      id1: "29",
      id2: "37",
      ...style.link,
    },
    "29-39": {
      id1: "29",
      id2: "39",
      ...style.link,
    },
    "2-4": {
      id1: "2",
      id2: "4",
      ...style.link,
    },
    "2-6": {
      id1: "2",
      id2: "6",
      ...style.link,
    },
    "2-8": {
      id1: "2",
      id2: "8",
      ...style.link,
    },
    "2-10": {
      id1: "2",
      id2: "10",
      ...style.link,
    },
    "2-12": {
      id1: "2",
      id2: "12",
      ...style.link,
    },
    "2-14": {
      id1: "2",
      id2: "14",
      ...style.link,
    },
    "4-16": {
      id1: "4",
      id2: "16",
      ...style.link,
    },
    "4-18": {
      id1: "4",
      id2: "18",
      ...style.link,
    },
    "4-20": {
      id1: "4",
      id2: "20",
      ...style.link,
    },
    "4-22": {
      id1: "4",
      id2: "22",
      ...style.link,
    },
    "6-26": {
      id1: "6",
      id2: "26",
      ...style.link,
    },
    "6-28": {
      id1: "6",
      id2: "28",
      ...style.link,
    },
  };
}

export default data;

HTML

<!doctype html>
<html>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Search

Layouts

See also

Terms of use