Switch between the options above the chart to see the impact on the layout.
Visualizing hierarchical data with lots of items across multiple levels can result in wide charts that offer little insight when viewed at a high level.
Setting the arrange option to 'grid' stacks groups of four or more nodes with identical connections into grids and reduces the amount of space needed to display the whole chart width.
You can also use the packing property to make better use of available screen space.
See also
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 = () => <StackAndPackDemo items={data()} />;
function StackAndPackDemo(props) {
const { items } = props;
const [layout, setLayout] = useState({
name: "sequential",
linkShape: "curved",
packing: "rectangle",
stacking: { arrange: "grid" },
});
return (
<div className="story">
<div className="options" style={{ flexBasis: "auto", minWidth: 400, flexWrap: "nowrap" }}>
<div>
<div>
<span style={{ display: "inline-block", width: 160 }} className="label">
Group stacking
</span>
<button
type="button"
className={layout.stacking || layout.stacking.arrange === "none" ? "active" : ""}
onClick={() => setLayout({ ...layout, stacking: { arrange: "none" } })}
>
None
</button>
<button
type="button"
className={layout.stacking && layout.stacking.arrange === "grid" ? "active" : ""}
onClick={() => setLayout({ ...layout, stacking: { arrange: "grid" } })}
>
Grid
</button>
</div>
<div>
<span style={{ display: "inline-block", width: 160 }} className="label">
Component packing
</span>
<button
type="button"
className={layout.packing === "aligned" ? "active" : ""}
onClick={() => setLayout({ ...layout, packing: "aligned" })}
>
Aligned
</button>
<button
type="button"
className={layout.packing === "rectangle" ? "active" : ""}
onClick={() => setLayout({ ...layout, packing: "rectangle" })}
>
Rectangle
</button>
</div>
</div>
</div>
<Chart
animation={{ time: 500 }}
items={items}
layout={layout}
options={{ navigation: false, overview: false, minZoom: 0.001 }}
/>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
function data() {
return {
node5: { ...style.secondary1 },
node338: { ...style.primary0 },
node339: { ...style.primary1 },
node340: { ...style.primary1 },
node341: { ...style.primary1 },
node342: { ...style.primary1 },
node343: { ...style.primary1 },
node344: { ...style.primary1 },
node345: { ...style.primary1 },
node346: { ...style.primary1 },
node347: { ...style.primary1 },
node368: { ...style.primary0 },
node369: { ...style.primary0 },
node370: { ...style.primary0 },
node371: { ...style.primary0 },
node372: { ...style.primary0 },
node373: { ...style.primary0 },
node374: { ...style.primary0 },
node375: { ...style.primary0 },
node376: { ...style.primary0 },
node377: { ...style.primary0 },
node378: { ...style.primary0 },
node379: { ...style.primary0 },
node380: { ...style.primary0 },
node381: { ...style.primary0 },
node382: { ...style.primary0 },
node383: { ...style.primary0 },
node384: { ...style.primary0 },
node385: { ...style.primary0 },
node386: { ...style.primary0 },
node387: { ...style.primary0 },
node388: { ...style.primary0 },
node389: { ...style.primary0 },
node390: { ...style.primary0 },
node391: { ...style.primary0 },
node392: { ...style.primary0 },
node393: { ...style.primary0 },
node394: { ...style.primary0 },
node395: { ...style.primary0 },
node396: { ...style.primary0 },
node397: { ...style.primary0 },
node398: { ...style.primary0 },
node399: { ...style.primary0 },
node400: { ...style.primary0 },
node10: { ...style.secondary1 },
node401: { ...style.primary0 },
node402: { ...style.primary0 },
node403: { ...style.primary0 },
node404: { ...style.primary0 },
node405: { ...style.primary0 },
node406: { ...style.primary0 },
node407: { ...style.primary0 },
node423: { ...style.primary0 },
node424: { ...style.primary0 },
node425: { ...style.primary0 },
node426: { ...style.primary0 },
node427: { ...style.primary0 },
node428: { ...style.primary0 },
node429: { ...style.primary0 },
node430: { ...style.primary0 },
node431: { ...style.primary0 },
node432: { ...style.primary0 },
node433: { ...style.primary0 },
node4171: { ...style.primary0 },
node434: { ...style.primary0 },
node435: { ...style.primary0 },
node436: { ...style.primary0 },
node437: { ...style.primary0 },
node438: { ...style.primary0 },
node439: { ...style.primary0 },
node440: { ...style.primary0 },
node441: { ...style.primary0 },
node442: { ...style.primary0 },
node3872: { ...style.secondary1 },
node110: { ...style.primary0 },
node114: { ...style.primary0 },
node118: { ...style.primary0 },
node122: { ...style.primary0 },
node3876: { ...style.primary0 },
node3878: { ...style.primary0 },
node132: { ...style.primary0 },
node136: { ...style.primary0 },
node140: { ...style.primary1 },
node171: { ...style.primary0 },
node3894: { ...style.primary1 },
node3901: { ...style.primary1 },
node32: { ...style.primary0 },
node3907: { ...style.primary1 },
node3501: { ...style.primary2 },
node3508: { ...style.primary2 },
node299: { ...style.primary2 },
node303: { ...style.primary2 },
node3506: { ...style.primary2 },
node3920: { ...style.primary2 },
node3924: { ...style.primary1 },
node3928: { ...style.primary1 },
node3932: { ...style.primary1 },
node3945: { ...style.primary0 },
node3949: { ...style.primary0 },
node2785: { ...style.primary0 },
node494: { ...style.primary0 },
node498: { ...style.primary0 },
node502: { ...style.primary0 },
node472: { ...style.primary1 },
node3992: { ...style.secondary1 },
node468: { ...style.primary0 },
node476: { ...style.primary1 },
node481: { ...style.primary2 },
node4173: { ...style.secondary1 },
node724: { ...style.primary0 },
node728: { ...style.primary0 },
node732: { ...style.primary0 },
node736: { ...style.primary0 },
node740: { ...style.primary0 },
node744: { ...style.primary0 },
node748: { ...style.primary0 },
node113: { ...style.primary0 },
node121: { ...style.primary0 },
node3877: { ...style.primary0 },
node135: { ...style.primary0 },
node143: { ...style.primary0 },
node3900: { ...style.primary1 },
node300: { ...style.primary1 },
node3913: { ...style.primary3 },
node3919: { ...style.primary3 },
node3921: { ...style.primary2 },
node3927: { ...style.primary1 },
node3944: { ...style.secondary1 },
node485: { ...style.primary1 },
node497: { ...style.primary0 },
node1611: { ...style.secondary1 },
node467: { ...style.primary0 },
node479: { ...style.primary2 },
node723: { ...style.primary0 },
node731: { ...style.primary0 },
node739: { ...style.primary0 },
node747: { ...style.primary0 },
node119: { ...style.primary0 },
node133: { ...style.primary0 },
node3898: { ...style.primary1 },
node3911: { ...style.primary3 },
node3507: { ...style.primary2 },
node3933: { ...style.primary1 },
node6: { ...style.secondary1 },
node3979: { ...style.primary0 },
node721: { ...style.primary0 },
node737: { ...style.primary0 },
node115: { ...style.primary0 },
node174: { ...style.primary1 },
node301: { ...style.primary2 },
node491: { ...style.secondary1 },
node483: { ...style.primary1 },
node107: { ...style.primary0 },
node3914: { ...style.primary3 },
node469: { ...style.primary0 },
node123: { ...style.primary0 },
node725: { ...style.primary0 },
node499: { ...style.primary0 },
node112: { ...style.primary0 },
node120: { ...style.primary0 },
node128: { ...style.primary0 },
node134: { ...style.primary0 },
node142: { ...style.primary1 },
node3899: { ...style.primary1 },
node4172: { ...style.secondary1 },
node3912: { ...style.primary3 },
node3918: { ...style.primary3 },
node305: { ...style.primary2 },
node3926: { ...style.primary1 },
node3934: { ...style.primary1 },
node471: { ...style.primary0 },
node495: { ...style.primary0 },
node505: { ...style.primary0 },
node466: { ...style.primary0 },
node478: { ...style.primary2 },
node722: { ...style.primary0 },
node730: { ...style.primary0 },
node738: { ...style.primary0 },
node746: { ...style.primary0 },
node117: { ...style.primary0 },
node131: { ...style.primary1 },
node3893: { ...style.primary1 },
node3910: { ...style.primary2 },
node3500: { ...style.primary2 },
node3931: { ...style.primary1 },
node493: { ...style.primary0 },
node1811: { ...style.primary0 },
node33: { ...style.secondary1 },
node735: { ...style.primary0 },
node111: { ...style.primary0 },
node141: { ...style.primary1 },
node3917: { ...style.primary2 },
node3950: { ...style.primary0 },
node477: { ...style.primary2 },
node745: { ...style.primary0 },
node3908: { ...style.primary1 },
node474: { ...style.primary1 },
node137: { ...style.primary0 },
node741: { ...style.primary0 },
node3902: { ...style.primary1 },
node116: { ...style.primary0 },
node130: { ...style.primary1 },
node173: { ...style.primary1 },
node3909: { ...style.primary1 },
node304: { ...style.primary2 },
node3930: { ...style.primary1 },
node492: { ...style.primary0 },
node1810: { ...style.secondary1 },
node484: { ...style.primary1 },
node734: { ...style.primary0 },
node109: { ...style.primary0 },
node139: { ...style.primary0 },
node3916: { ...style.primary3 },
node3948: { ...style.primary0 },
node475: { ...style.primary1 },
node743: { ...style.primary0 },
node298: { ...style.primary1 },
node504: { ...style.primary0 },
node129: { ...style.primary0 },
node733: { ...style.primary0 },
node3509: { ...style.primary2 },
node3875: { ...style.primary0 },
node163: { ...style.secondary1 },
node3922: { ...style.primary1 },
node500: { ...style.primary0 },
node726: { ...style.primary0 },
node125: { ...style.primary0 },
node3923: { ...style.primary1 },
node727: { ...style.primary0 },
node3925: { ...style.primary1 },
node3929: { ...style.primary1 },
node108: { ...style.primary0 },
node3915: { ...style.primary3 },
node470: { ...style.primary0 },
node334: { ...style.primary0 },
node127: { ...style.primary0 },
node3946: { ...style.primary0 },
node138: { ...style.primary0 },
node742: { ...style.primary0 },
node729: { ...style.primary0 },
node3947: { ...style.primary0 },
node501: { ...style.primary0 },
node389new: { ...style.primary0 },
node394new: { ...style.primary0 },
node5new: { ...style.secondary1 },
node348new: { ...style.primary0 },
node375new: { ...style.primary0 },
node423new: { ...style.primary0 },
node427new: { ...style.primary0 },
node349new: { ...style.primary1 },
node350new: { ...style.primary1 },
node352new: { ...style.primary0 },
node353new: { ...style.primary1 },
node354new: { ...style.primary1 },
node440new: { ...style.primary0 },
node441new: { ...style.primary0 },
node351new: { ...style.primary1 },
node355new: { ...style.primary1 },
node356new: { ...style.primary1 },
node357new: { ...style.primary1 },
node358new: { ...style.primary1 },
node359new: { ...style.primary1 },
node360new: { ...style.primary1 },
node361new: { ...style.primary1 },
node362new: { ...style.primary1 },
node363new: { ...style.primary1 },
node364new: { ...style.primary1 },
node409new: { ...style.primary1 },
node413new: { ...style.primary1 },
node417new: { ...style.primary1 },
node408new: { ...style.primary0 },
node410new: { ...style.primary1 },
node414new: { ...style.primary1 },
node418new: { ...style.primary1 },
node365new: { ...style.primary1 },
node366new: { ...style.primary1 },
node367new: { ...style.primary1 },
node411new: { ...style.primary1 },
node415new: { ...style.primary1 },
node419new: { ...style.primary1 },
node421new: { ...style.primary1 },
node422new: { ...style.primary1 },
node412new: { ...style.primary1 },
node416new: { ...style.primary1 },
node420new: { ...style.primary1 },
node444new: { ...style.primary1 },
node449new: { ...style.primary1 },
node454new: { ...style.primary1 },
node459new: { ...style.primary1 },
node464new: { ...style.primary1 },
node445new: { ...style.primary1 },
node450new: { ...style.primary1 },
node455new: { ...style.primary1 },
node460new: { ...style.primary1 },
node465new: { ...style.primary1 },
node443new: { ...style.primary0 },
node446new: { ...style.primary1 },
node451new: { ...style.primary1 },
node456new: { ...style.primary1 },
node461new: { ...style.primary1 },
node447new: { ...style.primary1 },
node452new: { ...style.primary1 },
node457new: { ...style.primary1 },
node462new: { ...style.primary1 },
node448new: { ...style.primary1 },
node453new: { ...style.primary1 },
node458new: { ...style.primary1 },
node463new: { ...style.primary1 },
link618: {
id1: "node5",
id2: "node338",
...style.link,
},
link619: {
id1: "node338",
id2: "node339",
...style.link,
},
link620: {
id1: "node338",
id2: "node340",
...style.link,
},
link621: {
id1: "node338",
id2: "node341",
...style.link,
},
link622: {
id1: "node338",
id2: "node342",
...style.link,
},
link623: {
id1: "node338",
id2: "node343",
...style.link,
},
link624: {
id1: "node338",
id2: "node344",
...style.link,
},
link625: {
id1: "node338",
id2: "node345",
...style.link,
},
link626: {
id1: "node338",
id2: "node346",
...style.link,
},
link627: {
id1: "node338",
id2: "node347",
...style.link,
},
link648: {
id1: "node5",
id2: "node368",
...style.link,
},
link649: {
id1: "node5",
id2: "node369",
...style.link,
},
link650: {
id1: "node5",
id2: "node370",
...style.link,
},
link651: {
id1: "node5",
id2: "node371",
...style.link,
},
link652: {
id1: "node5",
id2: "node372",
...style.link,
},
link653: {
id1: "node5",
id2: "node373",
...style.link,
},
link654: {
id1: "node5",
id2: "node374",
...style.link,
},
link655: {
id1: "node5",
id2: "node375",
...style.link,
},
link656: {
id1: "node5",
id2: "node376",
...style.link,
},
link657: {
id1: "node5",
id2: "node377",
...style.link,
},
link658: {
id1: "node5",
id2: "node378",
...style.link,
},
link659: {
id1: "node5",
id2: "node379",
...style.link,
},
link660: {
id1: "node5",
id2: "node380",
...style.link,
},
link661: {
id1: "node5",
id2: "node381",
...style.link,
},
link662: {
id1: "node5",
id2: "node382",
...style.link,
},
link663: {
id1: "node5",
id2: "node383",
...style.link,
},
link664: {
id1: "node5",
id2: "node384",
...style.link,
},
link665: {
id1: "node5",
id2: "node385",
...style.link,
},
link666: {
id1: "node5",
id2: "node386",
...style.link,
},
link667: {
id1: "node5",
id2: "node387",
...style.link,
},
link668: {
id1: "node5",
id2: "node388",
...style.link,
},
link669: {
id1: "node5",
id2: "node389",
...style.link,
},
link670: {
id1: "node5",
id2: "node390",
...style.link,
},
link671: {
id1: "node5",
id2: "node391",
...style.link,
},
link672: {
id1: "node5",
id2: "node392",
...style.link,
},
link673: {
id1: "node5",
id2: "node393",
...style.link,
},
link674: {
id1: "node5",
id2: "node394",
...style.link,
},
link675: {
id1: "node5",
id2: "node395",
...style.link,
},
link676: {
id1: "node5",
id2: "node396",
...style.link,
},
link677: {
id1: "node5",
id2: "node397",
...style.link,
},
link678: {
id1: "node5",
id2: "node398",
...style.link,
},
link679: {
id1: "node5",
id2: "node399",
...style.link,
},
link680: {
id1: "node5",
id2: "node400",
...style.link,
},
link681: {
id1: "node10",
id2: "node388",
...style.link,
},
link682: {
id1: "node5",
id2: "node401",
...style.link,
},
link683: {
id1: "node5",
id2: "node402",
...style.link,
},
link684: {
id1: "node5",
id2: "node403",
...style.link,
},
link685: {
id1: "node5",
id2: "node404",
...style.link,
},
link686: {
id1: "node5",
id2: "node405",
...style.link,
},
link687: {
id1: "node5",
id2: "node406",
...style.link,
},
link688: {
id1: "node5",
id2: "node407",
...style.link,
},
link704: {
id1: "node5",
id2: "node423",
...style.link,
},
link705: {
id1: "node5",
id2: "node424",
...style.link,
},
link706: {
id1: "node5",
id2: "node425",
...style.link,
},
link707: {
id1: "node5",
id2: "node426",
...style.link,
},
link708: {
id1: "node5",
id2: "node427",
...style.link,
},
link709: {
id1: "node5",
id2: "node428",
...style.link,
},
link710: {
id1: "node5",
id2: "node429",
...style.link,
},
link711: {
id1: "node5",
id2: "node430",
...style.link,
},
link712: {
id1: "node5",
id2: "node431",
...style.link,
},
link713: {
id1: "node5",
id2: "node432",
...style.link,
},
link714: {
id1: "node5",
id2: "node433",
...style.link,
},
link715: {
id1: "node5",
id2: "node4171",
...style.link,
},
link716: {
id1: "node5",
id2: "node434",
...style.link,
},
link717: {
id1: "node5",
id2: "node435",
...style.link,
},
link718: {
id1: "node5",
id2: "node436",
...style.link,
},
link719: {
id1: "node5",
id2: "node437",
...style.link,
},
link720: {
id1: "node5",
id2: "node438",
...style.link,
},
link721: {
id1: "node5",
id2: "node439",
...style.link,
},
link722: {
id1: "node5",
id2: "node440",
...style.link,
},
link723: {
id1: "node5",
id2: "node441",
...style.link,
},
link724: {
id1: "node5",
id2: "node442",
...style.link,
},
link93: {
id1: "node3872",
id2: "node110",
...style.link,
},
link97: {
id1: "node3872",
id2: "node114",
...style.link,
},
link101: {
id1: "node3872",
id2: "node118",
...style.link,
},
link105: {
id1: "node3872",
id2: "node122",
...style.link,
},
link109: {
id1: "node3872",
id2: "node3876",
...style.link,
},
link113: {
id1: "node3872",
id2: "node3878",
...style.link,
},
link117: {
id1: "node3872",
id2: "node132",
...style.link,
},
link121: {
id1: "node3872",
id2: "node136",
...style.link,
},
link125: {
id1: "node139",
id2: "node140",
...style.link,
},
link147: {
id1: "node171",
id2: "node174",
...style.link,
},
link156: {
id1: "node171",
id2: "node3898",
...style.link,
},
link160: {
id1: "node171",
id2: "node3902",
...style.link,
},
link257: {
id1: "node32",
id2: "node300",
...style.link,
},
link261: {
id1: "node3907",
id2: "node3910",
...style.link,
},
link265: {
id1: "node3910",
id2: "node3913",
...style.link,
},
link269: {
id1: "node3508",
id2: "node3916",
...style.link,
},
link273: {
id1: "node3917",
id2: "node3919",
...style.link,
},
link277: {
id1: "node3908",
id2: "node3500",
...style.link,
},
link281: {
id1: "node3909",
id2: "node3921",
...style.link,
},
link285: {
id1: "node32",
id2: "node3923",
...style.link,
},
link289: {
id1: "node32",
id2: "node3927",
...style.link,
},
link293: {
id1: "node32",
id2: "node3931",
...style.link,
},
link330: {
id1: "node3944",
id2: "node3945",
...style.link,
},
link334: {
id1: "node3944",
id2: "node3949",
...style.link,
},
link362: {
id1: "node491",
id2: "node492",
...style.link,
},
link366: {
id1: "node6",
id2: "node497",
...style.link,
},
link370: {
id1: "node6",
id2: "node501",
...style.link,
},
link374: {
id1: "node6",
id2: "node471",
...style.link,
},
link378: {
id1: "node1810",
id2: "node1811",
...style.link,
},
link750: {
id1: "node6",
id2: "node468",
...style.link,
},
link754: {
id1: "node471",
id2: "node476",
...style.link,
},
link758: {
id1: "node476",
id2: "node481",
...style.link,
},
link972: {
id1: "node4173",
id2: "node721",
...style.link,
},
link976: {
id1: "node4173",
id2: "node725",
...style.link,
},
link980: {
id1: "node4173",
id2: "node729",
...style.link,
},
link984: {
id1: "node4173",
id2: "node733",
...style.link,
},
link988: {
id1: "node4173",
id2: "node737",
...style.link,
},
link992: {
id1: "node4173",
id2: "node741",
...style.link,
},
link996: {
id1: "node4173",
id2: "node745",
...style.link,
},
link92: {
id1: "node3872",
id2: "node109",
...style.link,
},
link100: {
id1: "node3872",
id2: "node117",
...style.link,
},
link108: {
id1: "node3872",
id2: "node125",
...style.link,
},
link116: {
id1: "node129",
id2: "node131",
...style.link,
},
link124: {
id1: "node3872",
id2: "node139",
...style.link,
},
link150: {
id1: "node171",
id2: "node3894",
...style.link,
},
link256: {
id1: "node4172",
id2: "node32",
...style.link,
},
link264: {
id1: "node3910",
id2: "node3912",
...style.link,
},
link272: {
id1: "node3917",
id2: "node3918",
...style.link,
},
link280: {
id1: "node3909",
id2: "node305",
...style.link,
},
link288: {
id1: "node32",
id2: "node3926",
...style.link,
},
link296: {
id1: "node32",
id2: "node3934",
...style.link,
},
link361: {
id1: "node2785",
id2: "node485",
...style.link,
},
link369: {
id1: "node6",
id2: "node500",
...style.link,
},
link377: {
id1: "node471",
id2: "node474",
...style.link,
},
link753: {
id1: "node471",
id2: "node475",
...style.link,
},
link761: {
id1: "node33",
id2: "node171",
...style.link,
},
link979: {
id1: "node4173",
id2: "node728",
...style.link,
},
link987: {
id1: "node4173",
id2: "node736",
...style.link,
},
link995: {
id1: "node4173",
id2: "node744",
...style.link,
},
link94: {
id1: "node3872",
id2: "node111",
...style.link,
},
link110: {
id1: "node3872",
id2: "node127",
...style.link,
},
link126: {
id1: "node139",
id2: "node141",
...style.link,
},
link258: {
id1: "node32",
id2: "node3907",
...style.link,
},
link274: {
id1: "node3908",
id2: "node303",
...style.link,
},
link290: {
id1: "node32",
id2: "node3928",
...style.link,
},
link363: {
id1: "node491",
id2: "node493",
...style.link,
},
link421: {
id1: "node3992",
id2: "node3979",
...style.link,
},
link973: {
id1: "node4173",
id2: "node722",
...style.link,
},
link989: {
id1: "node4173",
id2: "node738",
...style.link,
},
link98: {
id1: "node3872",
id2: "node115",
...style.link,
},
link148: {
id1: "node171",
id2: "node173",
...style.link,
},
link278: {
id1: "node3909",
id2: "node3506",
...style.link,
},
link367: {
id1: "node6",
id2: "node498",
...style.link,
},
link977: {
id1: "node4173",
id2: "node726",
...style.link,
},
link90: {
id1: "node3872",
id2: "node107",
...style.link,
},
link270: {
id1: "node3908",
id2: "node299",
...style.link,
},
link759: {
id1: "node471",
id2: "node483",
...style.link,
},
link375: {
id1: "node1611",
id2: "node471",
...style.link,
},
link106: {
id1: "node3872",
id2: "node123",
...style.link,
},
link95: {
id1: "node3872",
id2: "node112",
...style.link,
},
link103: {
id1: "node3872",
id2: "node120",
...style.link,
},
link111: {
id1: "node3872",
id2: "node128",
...style.link,
},
link119: {
id1: "node3872",
id2: "node134",
...style.link,
},
link127: {
id1: "node139",
id2: "node142",
...style.link,
},
link158: {
id1: "node171",
id2: "node3900",
...style.link,
},
link259: {
id1: "node32",
id2: "node3908",
...style.link,
},
link267: {
id1: "node3508",
id2: "node3914",
...style.link,
},
link275: {
id1: "node3908",
id2: "node301",
...style.link,
},
link283: {
id1: "node3909",
id2: "node3509",
...style.link,
},
link291: {
id1: "node32",
id2: "node3929",
...style.link,
},
link332: {
id1: "node3944",
id2: "node3947",
...style.link,
},
link364: {
id1: "node491",
id2: "node494",
...style.link,
},
link372: {
id1: "node6",
id2: "node504",
...style.link,
},
link748: {
id1: "node6",
id2: "node466",
...style.link,
},
link756: {
id1: "node476",
id2: "node478",
...style.link,
},
link974: {
id1: "node4173",
id2: "node723",
...style.link,
},
link982: {
id1: "node4173",
id2: "node731",
...style.link,
},
link990: {
id1: "node4173",
id2: "node739",
...style.link,
},
link998: {
id1: "node4173",
id2: "node747",
...style.link,
},
link104: {
id1: "node3872",
id2: "node121",
...style.link,
},
link120: {
id1: "node3872",
id2: "node135",
...style.link,
},
link159: {
id1: "node171",
id2: "node3901",
...style.link,
},
link268: {
id1: "node3508",
id2: "node3915",
...style.link,
},
link284: {
id1: "node32",
id2: "node3922",
...style.link,
},
link333: {
id1: "node3944",
id2: "node3948",
...style.link,
},
link373: {
id1: "node6",
id2: "node505",
...style.link,
},
link757: {
id1: "node476",
id2: "node479",
...style.link,
},
link983: {
id1: "node4173",
id2: "node732",
...style.link,
},
link999: {
id1: "node4173",
id2: "node748",
...style.link,
},
link118: {
id1: "node3872",
id2: "node133",
...style.link,
},
link266: {
id1: "node3907",
id2: "node3508",
...style.link,
},
link331: {
id1: "node3944",
id2: "node3946",
...style.link,
},
link755: {
id1: "node476",
id2: "node477",
...style.link,
},
link997: {
id1: "node4173",
id2: "node746",
...style.link,
},
link262: {
id1: "node3907",
id2: "node3501",
...style.link,
},
link751: {
id1: "node6",
id2: "node469",
...style.link,
},
link122: {
id1: "node3872",
id2: "node137",
...style.link,
},
link175: {
id1: "node163",
id2: "node334",
...style.link,
},
link985: {
id1: "node4173",
id2: "node734",
...style.link,
},
link99: {
id1: "node3872",
id2: "node116",
...style.link,
},
link115: {
id1: "node129",
id2: "node130",
...style.link,
},
link149: {
id1: "node171",
id2: "node3893",
...style.link,
},
link263: {
id1: "node3910",
id2: "node3911",
...style.link,
},
link279: {
id1: "node3909",
id2: "node3507",
...style.link,
},
link295: {
id1: "node32",
id2: "node3933",
...style.link,
},
link368: {
id1: "node6",
id2: "node499",
...style.link,
},
link752: {
id1: "node6",
id2: "node470",
...style.link,
},
link978: {
id1: "node4173",
id2: "node727",
...style.link,
},
link994: {
id1: "node4173",
id2: "node743",
...style.link,
},
link112: {
id1: "node3872",
id2: "node3877",
...style.link,
},
link260: {
id1: "node32",
id2: "node3909",
...style.link,
},
link292: {
id1: "node32",
id2: "node3930",
...style.link,
},
link749: {
id1: "node6",
id2: "node467",
...style.link,
},
link991: {
id1: "node4173",
id2: "node740",
...style.link,
},
link157: {
id1: "node171",
id2: "node3899",
...style.link,
},
link371: {
id1: "node6",
id2: "node502",
...style.link,
},
link114: {
id1: "node3872",
id2: "node129",
...style.link,
},
link993: {
id1: "node4173",
id2: "node742",
...style.link,
},
link286: {
id1: "node32",
id2: "node3924",
...style.link,
},
link107: {
id1: "node3872",
id2: "node3875",
...style.link,
},
link230: {
id1: "node32",
id2: "node298",
...style.link,
},
link287: {
id1: "node32",
id2: "node3925",
...style.link,
},
link376: {
id1: "node471",
id2: "node472",
...style.link,
},
link986: {
id1: "node4173",
id2: "node735",
...style.link,
},
link128: {
id1: "node3872",
id2: "node143",
...style.link,
},
link365: {
id1: "node6",
id2: "node495",
...style.link,
},
link102: {
id1: "node3872",
id2: "node119",
...style.link,
},
link981: {
id1: "node4173",
id2: "node730",
...style.link,
},
link335: {
id1: "node3944",
id2: "node3950",
...style.link,
},
link91: {
id1: "node3872",
id2: "node108",
...style.link,
},
link271: {
id1: "node3908",
id2: "node3917",
...style.link,
},
link760: {
id1: "node471",
id2: "node484",
...style.link,
},
link276: {
id1: "node3908",
id2: "node304",
...style.link,
},
link282: {
id1: "node3909",
id2: "node3920",
...style.link,
},
link360: {
id1: "node471",
id2: "node485",
...style.link,
},
link975: {
id1: "node4173",
id2: "node724",
...style.link,
},
link96: {
id1: "node3872",
id2: "node113",
...style.link,
},
link123: {
id1: "node3872",
id2: "node138",
...style.link,
},
link294: {
id1: "node32",
id2: "node3932",
...style.link,
},
link674new: {
id1: "node5new",
id2: "node394new",
...style.link,
},
link722new: {
id1: "node5new",
id2: "node440new",
...style.link,
},
link723new: {
id1: "node5new",
id2: "node441new",
...style.link,
},
link669new: {
id1: "node5new",
id2: "node389new",
...style.link,
},
link708new: {
id1: "node5new",
id2: "node427new",
...style.link,
},
link628new: {
id1: "node5new",
id2: "node348new",
...style.link,
},
link629new: {
id1: "node348new",
id2: "node349new",
...style.link,
},
link631new: {
id1: "node348new",
id2: "node351new",
...style.link,
},
link655new: {
id1: "node5new",
id2: "node375new",
...style.link,
},
link704new: {
id1: "node5new",
id2: "node423new",
...style.link,
},
link630new: {
id1: "node348new",
id2: "node350new",
...style.link,
},
link632new: {
id1: "node5new",
id2: "node352new",
...style.link,
},
link633new: {
id1: "node352new",
id2: "node353new",
...style.link,
},
link634new: {
id1: "node352new",
id2: "node354new",
...style.link,
},
link635new: {
id1: "node352new",
id2: "node355new",
...style.link,
},
link637new: {
id1: "node352new",
id2: "node357new",
...style.link,
},
link638new: {
id1: "node352new",
id2: "node358new",
...style.link,
},
link639new: {
id1: "node352new",
id2: "node359new",
...style.link,
},
link641new: {
id1: "node352new",
id2: "node361new",
...style.link,
},
link642new: {
id1: "node352new",
id2: "node362new",
...style.link,
},
link643new: {
id1: "node352new",
id2: "node363new",
...style.link,
},
link645new: {
id1: "node352new",
id2: "node365new",
...style.link,
},
link646new: {
id1: "node352new",
id2: "node366new",
...style.link,
},
link647new: {
id1: "node352new",
id2: "node367new",
...style.link,
},
link636new: {
id1: "node352new",
id2: "node356new",
...style.link,
},
link640new: {
id1: "node352new",
id2: "node360new",
...style.link,
},
link644new: {
id1: "node352new",
id2: "node364new",
...style.link,
},
link689new: {
id1: "node5new",
id2: "node408new",
...style.link,
},
link690new: {
id1: "node408new",
id2: "node409new",
...style.link,
},
link694new: {
id1: "node408new",
id2: "node413new",
...style.link,
},
link698new: {
id1: "node408new",
id2: "node417new",
...style.link,
},
link702new: {
id1: "node408new",
id2: "node421new",
...style.link,
},
link725new: {
id1: "node5new",
id2: "node443new",
...style.link,
},
link691new: {
id1: "node408new",
id2: "node410new",
...style.link,
},
link695new: {
id1: "node408new",
id2: "node414new",
...style.link,
},
link699new: {
id1: "node408new",
id2: "node418new",
...style.link,
},
link703new: {
id1: "node408new",
id2: "node422new",
...style.link,
},
link692new: {
id1: "node408new",
id2: "node411new",
...style.link,
},
link693new: {
id1: "node408new",
id2: "node412new",
...style.link,
},
link696new: {
id1: "node408new",
id2: "node415new",
...style.link,
},
link697new: {
id1: "node408new",
id2: "node416new",
...style.link,
},
link700new: {
id1: "node408new",
id2: "node419new",
...style.link,
},
link701new: {
id1: "node408new",
id2: "node420new",
...style.link,
},
link726new: {
id1: "node443new",
id2: "node444new",
...style.link,
},
link731new: {
id1: "node443new",
id2: "node449new",
...style.link,
},
link736new: {
id1: "node443new",
id2: "node454new",
...style.link,
},
link741new: {
id1: "node443new",
id2: "node459new",
...style.link,
},
link746new: {
id1: "node443new",
id2: "node464new",
...style.link,
},
link727new: {
id1: "node443new",
id2: "node445new",
...style.link,
},
link732new: {
id1: "node443new",
id2: "node450new",
...style.link,
},
link737new: {
id1: "node443new",
id2: "node455new",
...style.link,
},
link742new: {
id1: "node443new",
id2: "node460new",
...style.link,
},
link747new: {
id1: "node443new",
id2: "node465new",
...style.link,
},
link728new: {
id1: "node443new",
id2: "node446new",
...style.link,
},
link733new: {
id1: "node443new",
id2: "node451new",
...style.link,
},
link738new: {
id1: "node443new",
id2: "node456new",
...style.link,
},
link743new: {
id1: "node443new",
id2: "node461new",
...style.link,
},
link729new: {
id1: "node443new",
id2: "node447new",
...style.link,
},
link734new: {
id1: "node443new",
id2: "node452new",
...style.link,
},
link739new: {
id1: "node443new",
id2: "node457new",
...style.link,
},
link744new: {
id1: "node443new",
id2: "node462new",
...style.link,
},
link730new: {
id1: "node443new",
id2: "node448new",
...style.link,
},
link735new: {
id1: "node443new",
id2: "node453new",
...style.link,
},
link740new: {
id1: "node443new",
id2: "node458new",
...style.link,
},
link745new: {
id1: "node443new",
id2: "node463new",
...style.link,
},
};
}
export default data;<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>