Visualising tiered data can be problematic as it often consists of many levels, which may each also contain a high volume of items. This could result in an extremely wide chart that makes it difficult to gain any valuable insights from the high level structure.
The stacking option for sequential layout offers a solution. By setting its arrange property to 'grid', groups of four or more nodes with identical connections are stacked to significantly reduce the amount of space required to display the full chart width.
For data visualised as multiple disconnected components sequential can pack the individual components using any available packing option.
Key functions used:
import KeyLines from "keylines";
import { data } from "./data.js";
let chart;
const optionsDiv = document.querySelector(".cicontent");
const inputs = optionsDiv && optionsDiv.querySelectorAll('input[type="radio"]');
function runLayout() {
const stacking = document.querySelector(
'input[name="multi-row-grid"]:checked',
).value;
const packing = document.querySelector('input[name="packing"]:checked').value;
const stretchType = document.querySelector(
'input[name="stretchType"]:checked',
).value;
const layoutOpts = {
stacking: {
arrange: stacking,
},
stretchType,
packing,
linkShape: "curved",
};
chart.layout("sequential", layoutOpts);
}
function initChart() {
chart.load(data);
runLayout();
}
async function startKeyLines() {
const options = {
handMode: true,
minZoom: 0.001,
};
chart = await KeyLines.create({ container: "klchart", options });
initChart();
inputs.forEach((input) => {
input.addEventListener("change", runLayout);
});
}
window.addEventListener("DOMContentLoaded", startKeyLines);export const data = {
type: "LinkChart",
items: [
{
type: "link",
id: "link618",
id1: "node5",
id2: "node338",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link619",
id1: "node338",
id2: "node339",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link620",
id1: "node338",
id2: "node340",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link621",
id1: "node338",
id2: "node341",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link622",
id1: "node338",
id2: "node342",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link623",
id1: "node338",
id2: "node343",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link624",
id1: "node338",
id2: "node344",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link625",
id1: "node338",
id2: "node345",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link626",
id1: "node338",
id2: "node346",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link627",
id1: "node338",
id2: "node347",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link648",
id1: "node5",
id2: "node368",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link649",
id1: "node5",
id2: "node369",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link650",
id1: "node5",
id2: "node370",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link651",
id1: "node5",
id2: "node371",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link652",
id1: "node5",
id2: "node372",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link653",
id1: "node5",
id2: "node373",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link654",
id1: "node5",
id2: "node374",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link655",
id1: "node5",
id2: "node375",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link656",
id1: "node5",
id2: "node376",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link657",
id1: "node5",
id2: "node377",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link658",
id1: "node5",
id2: "node378",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link659",
id1: "node5",
id2: "node379",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link660",
id1: "node5",
id2: "node380",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link661",
id1: "node5",
id2: "node381",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link662",
id1: "node5",
id2: "node382",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link663",
id1: "node5",
id2: "node383",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link664",
id1: "node5",
id2: "node384",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link665",
id1: "node5",
id2: "node385",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link666",
id1: "node5",
id2: "node386",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link667",
id1: "node5",
id2: "node387",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link668",
id1: "node5",
id2: "node388",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link669",
id1: "node5",
id2: "node389",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link670",
id1: "node5",
id2: "node390",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link671",
id1: "node5",
id2: "node391",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link672",
id1: "node5",
id2: "node392",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link673",
id1: "node5",
id2: "node393",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link674",
id1: "node5",
id2: "node394",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link675",
id1: "node5",
id2: "node395",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link676",
id1: "node5",
id2: "node396",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link677",
id1: "node5",
id2: "node397",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link678",
id1: "node5",
id2: "node398",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link679",
id1: "node5",
id2: "node399",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link680",
id1: "node5",
id2: "node400",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link681",
id1: "node10",
id2: "node388",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link682",
id1: "node5",
id2: "node401",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link683",
id1: "node5",
id2: "node402",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link684",
id1: "node5",
id2: "node403",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link685",
id1: "node5",
id2: "node404",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link686",
id1: "node5",
id2: "node405",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link687",
id1: "node5",
id2: "node406",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link688",
id1: "node5",
id2: "node407",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link704",
id1: "node5",
id2: "node423",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link705",
id1: "node5",
id2: "node424",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link706",
id1: "node5",
id2: "node425",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link707",
id1: "node5",
id2: "node426",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link708",
id1: "node5",
id2: "node427",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link709",
id1: "node5",
id2: "node428",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link710",
id1: "node5",
id2: "node429",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link711",
id1: "node5",
id2: "node430",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link712",
id1: "node5",
id2: "node431",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link713",
id1: "node5",
id2: "node432",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link714",
id1: "node5",
id2: "node433",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link715",
id1: "node5",
id2: "node4171",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link716",
id1: "node5",
id2: "node434",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link717",
id1: "node5",
id2: "node435",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link718",
id1: "node5",
id2: "node436",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link719",
id1: "node5",
id2: "node437",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link720",
id1: "node5",
id2: "node438",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link721",
id1: "node5",
id2: "node439",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link722",
id1: "node5",
id2: "node440",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link723",
id1: "node5",
id2: "node441",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link724",
id1: "node5",
id2: "node442",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link93",
id1: "node3872",
id2: "node110",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link97",
id1: "node3872",
id2: "node114",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link101",
id1: "node3872",
id2: "node118",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link105",
id1: "node3872",
id2: "node122",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link109",
id1: "node3872",
id2: "node3876",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link113",
id1: "node3872",
id2: "node3878",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link117",
id1: "node3872",
id2: "node132",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link121",
id1: "node3872",
id2: "node136",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link125",
id1: "node139",
id2: "node140",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link147",
id1: "node171",
id2: "node174",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link156",
id1: "node171",
id2: "node3898",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link160",
id1: "node171",
id2: "node3902",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link257",
id1: "node32",
id2: "node300",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link261",
id1: "node3907",
id2: "node3910",
off: 0,
c: "#42BAC8",
c2: "#048170",
},
{
type: "link",
id: "link265",
id1: "node3910",
id2: "node3913",
off: 0,
c: "#048170",
c2: "#00423e",
},
{
type: "link",
id: "link269",
id1: "node3508",
id2: "node3916",
off: 0,
c: "#048170",
c2: "#00423e",
},
{
type: "link",
id: "link273",
id1: "node3917",
id2: "node3919",
off: 0,
c: "#048170",
c2: "#00423e",
},
{
type: "link",
id: "link277",
id1: "node3908",
id2: "node3500",
off: 0,
c: "#42BAC8",
c2: "#048170",
},
{
type: "link",
id: "link281",
id1: "node3909",
id2: "node3921",
off: 0,
c: "#42BAC8",
c2: "#048170",
},
{
type: "link",
id: "link285",
id1: "node32",
id2: "node3923",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link289",
id1: "node32",
id2: "node3927",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link293",
id1: "node32",
id2: "node3931",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link330",
id1: "node3944",
id2: "node3945",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link334",
id1: "node3944",
id2: "node3949",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link362",
id1: "node491",
id2: "node492",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link366",
id1: "node6",
id2: "node497",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link370",
id1: "node6",
id2: "node501",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link374",
id1: "node6",
id2: "node471",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link378",
id1: "node1810",
id2: "node1811",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link750",
id1: "node6",
id2: "node468",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link754",
id1: "node471",
id2: "node476",
off: 0,
c: "#619EF7",
c2: "#42BAC8",
},
{
type: "link",
id: "link758",
id1: "node476",
id2: "node481",
off: 0,
c: "#42BAC8",
c2: "#048170",
},
{
type: "link",
id: "link972",
id1: "node4173",
id2: "node721",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link976",
id1: "node4173",
id2: "node725",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link980",
id1: "node4173",
id2: "node729",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link984",
id1: "node4173",
id2: "node733",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link988",
id1: "node4173",
id2: "node737",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link992",
id1: "node4173",
id2: "node741",
off: 0,
c: "#f15d5b",
c2: "#619EF7",
},
{
type: "link",
id: "link996",
id1: "node4173",
id2: "node745",
off: 0,
c: "#f15d5b",
// ...truncated 3210 lines<!doctype html>
<html lang="en" style="background-color: #2d383f">
<head>
<meta charset="utf-8" />
<title>Navigate Large Hierarchies</title>
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
<link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
</head>
<body>
<div id="klchart" class="klchart"></div>
<script type="module" src="./code.js"></script>
</body>
</html>