Displaying large networks and amounts of data all at once is tricky, but KeyLines offers features that can make even large data visualisations clear and effective.
Organic layout
This demo uses organic layout to make sense of the data's complex structure. This, combined with the enhanced rendering performance you can achieve with WebGL, creates a responsive, clear and engaging chart.
Organic also supports incrementally reporting progress events, which provide information about the layout's progress. This can be used for example to display a progress indicator and improve the user's experience while the layout is running.
Adaptive styling
Adaptive styling enlarges small nodes so that you can see them better, and fades out links and text when they're too closely packed or too small to read. This means that details are shown when you need them, but don't clutter the chart when they're unnecessary.
The data is taken from OpenFlights, available under the Open Database License (ODbL).
Chart Options used:
import KeyLines from "keylines";
let chart;
let dataSizeOverlay;
function getById(id) {
return document.getElementById(id);
}
const progressBarContainer = getById("progressBarContainer");
const progressBar = getById("progressBar");
const progressFrame = getById("progressFrame");
const layoutButton = getById("layoutButton");
const fpsLabel = getById("fps");
function updateProgressBar(progress) {
const percentage = (progress * 100).toFixed(2);
progressBar.style.width = `${percentage}%`;
}
async function doLayout() {
layoutButton.disabled = true;
progressBarContainer.style.display = "block";
await chart.layout("organic", { time: 1500 });
progressBarContainer.style.display = "none";
layoutButton.disabled = false;
}
function setupLayoutUX() {
// Add progress event listener
chart.on("progress", ({ progress, task }) => {
if (task === "layout") {
updateProgressBar(progress);
}
});
layoutButton.addEventListener("click", () => doLayout());
}
function fpsCounter(blend = 0.33) {
let tick = Date.now();
let mean;
(function next() {
requestAnimationFrame((tock) => {
const dt = tock - tick;
mean = mean ? mean * blend + dt * (1 - blend) : dt;
tick = tock;
next();
});
})();
return { get: () => Math.round(1000 / mean) };
}
function toggleSwitch(name, onOn, onOff) {
const onElement = getById(`${name}On`);
const offElement = getById(`${name}Off`);
onElement.addEventListener("click", (evt) => {
onElement.classList.add("active", "btn-kl");
offElement.classList.remove("active", "btn-kl");
offElement.disabled = false;
onElement.disabled = true;
onOn();
evt.preventDefault();
});
offElement.addEventListener("click", (evt) => {
onElement.classList.remove("active", "btn-kl");
onElement.disabled = false;
offElement.disabled = true;
offElement.classList.add("active", "btn-kl");
onOff();
evt.preventDefault();
});
}
async function loadAndStart() {
dataSizeOverlay = document.getElementsByClassName("datasize")[0];
const chartDefinition = {
container: "klchart",
options: {
backColour: "#2d383f",
controlTheme: "dark",
drag: {
links: false,
},
minZoom: 0.01,
overview: {
backColour: "#2d383f",
borderColour: "grey",
},
handMode: true,
},
};
chart = await KeyLines.create(chartDefinition);
// display frame rate
setInterval(
(fps) => {
fpsLabel.innerText = fps.get() + " Frames per Second";
},
400,
fpsCounter(),
);
function adaptiveStylingOn() {
chart.options({ zoom: { adaptiveStyling: true } });
}
function adaptiveStylingOff() {
chart.options({ zoom: { adaptiveStyling: false } });
}
function darkModeOn() {
chart.options({
backColour: "#2d383f",
controlTheme: "dark",
overview: {
backColour: "#2d383f",
borderColour: "grey",
},
});
progressFrame.style["border-color"] = "white";
dataSizeOverlay.classList.add("dark");
}
function darkModeOff() {
chart.options({
backColour: "white",
controlTheme: "light",
overview: {
backColour: "white",
borderColour: "rgb(243, 246, 247)",
},
});
progressFrame.style["border-color"] = "black";
dataSizeOverlay.classList.remove("dark");
}
function gradientLinksOn() {
const links = [];
chart.each({ type: "link" }, (link) => {
links.push({ id: link.id, c: link.d.c, c2: link.d.c2 });
});
chart.setProperties(links);
}
function gradientLinksOff() {
const links = [];
chart.each({ type: "link" }, (link) => {
links.push({
id: link.id,
c: null,
c2: null,
d: { c: link.c, c2: link.c2 },
});
});
chart.setProperties(links);
}
toggleSwitch("adaptiveStyling", adaptiveStylingOn, adaptiveStylingOff);
toggleSwitch("darkMode", darkModeOn, darkModeOff);
toggleSwitch("gradientLinks", gradientLinksOn, gradientLinksOff);
const data = await (await fetch("/public/worldflights-data.json")).json();
chart.load(data);
setupLayoutUX();
await doLayout();
}
window.addEventListener("DOMContentLoaded", loadAndStart);<!doctype html>
<html lang="en" style="background-color: #2d383f">
<head>
<meta charset="utf-8" />
<title>Visualising Big Data</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" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="klchart" class="klchart">
<div id="progressBarContainer">
<div class="progress" id="progressFrame"><div id="progressBar"></div></div>
</div>
<div class="datasize dark" id="dataSize">
<h5 id="fps">0 Frames per Second</h5>
<p>Nodes: 2875</p>
<p>Links: 13139</p>
</div>
</div>
<script type="module" src="./code.js"></script>
</body>
</html>.klchart {
background-color: #2d383f;
}
.datasize {
position: absolute;
bottom: 0px;
height: 100px;
line-height: 16px;
left: 16px;
color: #2d383f;
background-color: transparent;
}
.datasize > h5 {
font-size: 20px;
}
.datasize.dark,
.datasize.dark p {
color: #eee;
}
.progress {
position: absolute;
top: calc(50% - 22.5px);
left: 30%;
width: 40%;
height: 45px;
padding: 4px;
opacity: 0.9;
border: white 3px solid;
}
.progress > div {
background-color: #009968;
width: 0%;
height: 100%;
transition: width 1s ease-in;
}{
"type": "LinkChart",
"items": [
{
"id": "l3714193",
"type": "link",
"id1": "3714",
"id2": "193",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37142188",
"type": "link",
"id1": "3714",
"id2": "2188",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143645",
"type": "link",
"id1": "3714",
"id2": "3645",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.29
},
{
"id": "l37143825",
"type": "link",
"id1": "3714",
"id2": "3825",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.51
},
{
"id": "l37142176",
"type": "link",
"id1": "3714",
"id2": "2176",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37141382",
"type": "link",
"id1": "3714",
"id2": "1382",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37142709",
"type": "link",
"id1": "3714",
"id2": "2709",
"c": "rgb(204, 102, 197)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143820",
"type": "link",
"id1": "3714",
"id2": "3820",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.09
},
{
"id": "l37143751",
"type": "link",
"id1": "3714",
"id2": "3751",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.14
},
{
"id": "l37143484",
"type": "link",
"id1": "3714",
"id2": "3484",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.83
},
{
"id": "l37143533",
"type": "link",
"id1": "3714",
"id2": "3533",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.22
},
{
"id": "l37141084",
"type": "link",
"id1": "3714",
"id2": "1084",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37142082",
"type": "link",
"id1": "3714",
"id2": "2082",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37141107",
"type": "link",
"id1": "3714",
"id2": "1107",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143611",
"type": "link",
"id1": "3714",
"id2": "3611",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 9.51
},
{
"id": "l37143864",
"type": "link",
"id1": "3714",
"id2": "3864",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.26
},
{
"id": "l37142072",
"type": "link",
"id1": "3714",
"id2": "2072",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143752",
"type": "link",
"id1": "3714",
"id2": "3752",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.14
},
{
"id": "l37141229",
"type": "link",
"id1": "3714",
"id2": "1229",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143797",
"type": "link",
"id1": "3714",
"id2": "3797",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 11.66
},
{
"id": "l37143622",
"type": "link",
"id1": "3714",
"id2": "3622",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.31
},
{
"id": "l37141665",
"type": "link",
"id1": "3714",
"id2": "1665",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143678",
"type": "link",
"id1": "3714",
"id2": "3678",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.57
},
{
"id": "l37143877",
"type": "link",
"id1": "3714",
"id2": "3877",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.15
},
{
"id": "l37143576",
"type": "link",
"id1": "3714",
"id2": "3576",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.55
},
{
"id": "l37144014",
"type": "link",
"id1": "3714",
"id2": "4014",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143462",
"type": "link",
"id1": "3714",
"id2": "3462",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 9.51
},
{
"id": "l37141892",
"type": "link",
"id1": "3714",
"id2": "1892",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37141871",
"type": "link",
"id1": "3714",
"id2": "1871",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l3714346",
"type": "link",
"id1": "3714",
"id2": "346",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 9.51
},
{
"id": "l37143759",
"type": "link",
"id1": "3714",
"id2": "3759",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.14
},
{
"id": "l37142279",
"type": "link",
"id1": "3714",
"id2": "2279",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143585",
"type": "link",
"id1": "3714",
"id2": "3585",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.07
},
{
"id": "l37143694",
"type": "link",
"id1": "3714",
"id2": "3694",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37141780",
"type": "link",
"id1": "3714",
"id2": "1780",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143673",
"type": "link",
"id1": "3714",
"id2": "3673",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.57
},
{
"id": "l37143364",
"type": "link",
"id1": "3714",
"id2": "3364",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.27
},
{
"id": "l37143627",
"type": "link",
"id1": "3714",
"id2": "3627",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.31
},
{
"id": "l37143621",
"type": "link",
"id1": "3714",
"id2": "3621",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.31
},
{
"id": "l37143806",
"type": "link",
"id1": "3714",
"id2": "3806",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.96
},
{
"id": "l37143697",
"type": "link",
"id1": "3714",
"id2": "3697",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143855",
"type": "link",
"id1": "3714",
"id2": "3855",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143819",
"type": "link",
"id1": "3714",
"id2": "3819",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.29
},
{
"id": "l37144008",
"type": "link",
"id1": "3714",
"id2": "4008",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37141926",
"type": "link",
"id1": "3714",
"id2": "1926",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37144318",
"type": "link",
"id1": "3714",
"id2": "4318",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37145730",
"type": "link",
"id1": "3714",
"id2": "5730",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37144169",
"type": "link",
"id1": "3714",
"id2": "4169",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l37143561",
"type": "link",
"id1": "3714",
"id2": "3561",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.54
},
{
"id": "l37144015",
"type": "link",
"id1": "3714",
"id2": "4015",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l1933670",
"type": "link",
"id1": "193",
"id2": "3670",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 8.42
},
{
"id": "l1933682",
"type": "link",
"id1": "193",
"id2": "3682",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 11.12
},
{
"id": "l1933930",
"type": "link",
"id1": "193",
"id2": "3930",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.6
},
{
"id": "l1933093",
"type": "link",
"id1": "193",
"id2": "3093",
"c": "rgb(204, 194, 102)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 6.41
},
{
"id": "l193580",
"type": "link",
"id1": "193",
"id2": "580",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.88
},
{
"id": "l1932939",
"type": "link",
"id1": "193",
"id2": "2939",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.27
},
{
"id": "l1931590",
"type": "link",
"id1": "193",
"id2": "1590",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.02
},
{
"id": "l19349",
"type": "link",
"id1": "193",
"id2": "49",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.12
},
{
"id": "l1933878",
"type": "link",
"id1": "193",
"id2": "3878",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.35
},
{
"id": "l1934069",
"type": "link",
"id1": "193",
"id2": "4069",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.11
},
{
"id": "l1933550",
"type": "link",
"id1": "193",
"id2": "3550",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 8.43
},
{
"id": "l1932851",
"type": "link",
"id1": "193",
"id2": "2851",
"c": "rgb(204, 102, 197)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.56
},
{
"id": "l1933458",
"type": "link",
"id1": "193",
"id2": "3458",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 4.59
},
{
"id": "l1933751",
"type": "link",
"id1": "193",
"id2": "3751",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.15
},
{
"id": "l1933406",
"type": "link",
"id1": "193",
"id2": "3406",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 6.71
},
{
"id": "l193345",
"type": "link",
"id1": "193",
"id2": "345",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.09
},
{
"id": "l1933864",
"type": "link",
"id1": "193",
"id2": "3864",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.12
},
{
"id": "l1931953",
"type": "link",
"id1": "193",
"id2": "1953",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.22
},
{
"id": "l193146",
"type": "link",
"id1": "193",
"id2": "146",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.05
},
{
"id": "l193100",
"type": "link",
"id1": "193",
"id2": "100",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.15
},
{
"id": "l1933858",
"type": "link",
"id1": "193",
"id2": "3858",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.3
},
{
"id": "l1933830",
"type": "link",
"id1": "193",
"id2": "3830",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 10.93
},
{
"id": "l1933752",
"type": "link",
"id1": "193",
"id2": "3752",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 8.28
},
{
"id": "l1933622",
"type": "link",
"id1": "193",
"id2": "3622",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.89
},
{
"id": "l1933678",
"type": "link",
"id1": "193",
"id2": "3678",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 5.04
},
{
"id": "l1933861",
"type": "link",
"id1": "193",
"id2": "3861",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 4.36
},
{
"id": "l1933877",
"type": "link",
"id1": "193",
"id2": "3877",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.15
},
{
"id": "l1933576",
"type": "link",
"id1": "193",
"id2": "3576",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 8.46
},
{
"id": "l1932875",
"type": "link",
"id1": "193",
"id2": "2875",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.03
},
{
"id": "l1931701",
"type": "link",
"id1": "193",
"id2": "1701",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.11
},
{
"id": "l19387",
"type": "link",
"id1": "193",
"id2": "87",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 10.58
},
{
"id": "l1933520",
"type": "link",
"id1": "193",
"id2": "3520",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 5.25
},
{
"id": "l193166",
"type": "link",
"id1": "193",
"id2": "166",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 10.58
},
{
"id": "l1933685",
"type": "link",
"id1": "193",
"id2": "3685",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.9
},
{
"id": "l1932650",
"type": "link",
"id1": "193",
"id2": "2650",
"c": "rgb(204, 102, 197)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1
},
{
"id": "l1931892",
"type": "link",
"id1": "193",
"id2": "1892",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 3.35
},
{
"id": "l1931871",
"type": "link",
"id1": "193",
"id2": "1871",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 4.18
},
{
"id": "l193534",
"type": "link",
"id1": "193",
"id2": "534",
"c": "rgb(204, 102, 111)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.08
},
{
"id": "l1933486",
"type": "link",
"id1": "193",
"id2": "3486",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 5.19
},
{
"id": "l1932902",
"type": "link",
"id1": "193",
"id2": "2902",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.05
},
{
"id": "l1932279",
"type": "link",
"id1": "193",
"id2": "2279",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 7.31
},
{
"id": "l1933585",
"type": "link",
"id1": "193",
"id2": "3585",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 4.08
},
{
"id": "l1933849",
"type": "link",
"id1": "193",
"id2": "3849",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 5.55
},
{
"id": "l1933364",
"type": "link",
"id1": "193",
"id2": "3364",
"c": "rgb(102, 204, 112)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 8.85
},
{
"id": "l193177",
"type": "link",
"id1": "193",
"id2": "177",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.34
},
{
"id": "l1933722",
"type": "link",
"id1": "193",
"id2": "3722",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.97
},
{
"id": "l1932883",
"type": "link",
"id1": "193",
"id2": "2883",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 1.03
},
{
"id": "l193111",
"type": "link",
"id1": "193",
"id2": "111",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 10.58
},
{
"id": "l1934355",
"type": "link",
"id1": "193",
"id2": "4355",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
"b": "rgba(20,20,20,0.4)",
"e": 2.05
},
{
"id": "l1932899",
"type": "link",
"id1": "193",
"id2": "2899",
"c": "rgb(102, 158, 204)",
"c2": "rgb(102, 158, 204)",
// ...truncated 167772 lines