This demo illustrates the basics of KeyLines' time bar functionality that provides analysis of, and interaction with, data that is time-stamped. The time bar allows a user to quickly and easily understand the 'when' in the relationships between data.
Data set
The demo uses the Nodobo data that features phone records of 27 high school students over 5 months.
Interacting with the time bar
The chart opens with the full dataset shown – the chart shows the typical tree patterns of the data, the time bar shows a histogram of the call volumes over the full 5 month period. There are two basic sets of controls – the left and right sliders can be dragged to select a particular time period; the 'transport' controls provide zoom and control of animation of the dataset. The upper chart displays data in the period selected by the time bar manipulations.
Note that when 'paused' the time bar can be dragged backwards and forwards to find the exact moment of an event.
Use of animation
Additional insight can be gained by playing an animation of the chart. If the time bar sliders are narrowed to approximately 1 month (September) and the play button is pressed then the dynamic evolution of the social network can be seen as relationships are made and broken.
Data citation: McDiarmid, A. (Creator), Irvine, J. (Creator), Bell, S. D. (Creator), Banford, J. (Creator). (Apr 2015). Nodobo mobile phone usage data. CRAWDAD. 10.15783/C7HP4Q
Key functions used:
import KeyLines from "keylines";
import { data } from "./data.js";
let chart;
let timebar;
async function initialiseTimebarAndChart() {
// Fit all dates inside timebar to set the initial range
await timebar.zoom("fit", { animate: false });
// set the initial layout of the chart
await chart.layout("organic", { packing: "circle" });
// When the timebar is next scrolled or zoomed
timebar.on("change", filterAndLayout);
}
async function filterAndLayout() {
// Filter the chart to only show items in the time bar
await chart.filter(timebar.inRange, { animate: false, type: "link" });
// and then adjust the chart's layout
await chart.layout("organic", {
mode: "adaptive",
animate: true,
time: 400,
easing: "linear",
});
}
async function loadKeyLines() {
const options = {
logo: { u: "/public/images/Logo.png" },
overview: { icon: false, shown: false },
histogram: {
colour: "#05D1E8",
highlightColour: "#CACED5",
},
};
[chart, timebar] = await KeyLines.create([
{ container: "klchart", options },
{ container: "kltimebar", type: "timebar", options },
]);
timebar.load(data);
chart.load(data);
// set up the time bar and chart layout & interactions
initialiseTimebarAndChart();
}
window.addEventListener("DOMContentLoaded", loadKeyLines);export const data = {
type: "LinkChart",
items: [
{
type: "node",
c: "#05D1E8",
id: "9",
t: "9",
},
{
type: "node",
c: "#05D1E8",
id: "127",
t: "127",
},
{
type: "node",
c: "#05D1E8",
id: "129",
t: "129",
},
{
type: "node",
c: "#05D1E8",
id: "157",
t: "157",
},
{
type: "node",
c: "#05D1E8",
id: "192",
t: "192",
},
{
type: "node",
c: "#05D1E8",
id: "193",
t: "193",
},
{
type: "node",
c: "#05D1E8",
id: "208",
t: "208",
},
{
type: "node",
c: "#05D1E8",
id: "244",
t: "244",
},
{
type: "node",
c: "#05D1E8",
id: "372",
t: "372",
},
{
type: "node",
c: "#05D1E8",
id: "452",
t: "452",
},
{
type: "node",
c: "#05D1E8",
id: "455",
t: "455",
},
{
type: "node",
c: "#05D1E8",
id: "563",
t: "563",
},
{
type: "node",
c: "#05D1E8",
id: "901",
t: "901",
},
{
type: "node",
c: "#05D1E8",
id: "908",
t: "908",
},
{
type: "node",
c: "#05D1E8",
id: "1641",
t: "1641",
},
{
type: "node",
c: "#05D1E8",
id: "1740",
t: "1740",
},
{
type: "node",
c: "#05D1E8",
id: "2172",
t: "2172",
},
{
type: "node",
c: "#05D1E8",
id: "2327",
t: "2327",
},
{
type: "node",
c: "#05D1E8",
id: "2330",
t: "2330",
},
{
type: "node",
c: "#05D1E8",
id: "2367",
t: "2367",
},
{
type: "node",
c: "#05D1E8",
id: "2432",
t: "2432",
},
{
type: "node",
c: "#05D1E8",
id: "14099",
t: "14099",
},
{
type: "node",
c: "#05D1E8",
id: "21261",
t: "21261",
},
{
type: "node",
c: "#05D1E8",
id: "45347",
t: "45347",
},
{
type: "node",
c: "#05D1E8",
id: "2284122",
t: "2284122",
},
{
type: "node",
c: "#05D1E8",
id: "3305122",
t: "3305122",
},
{
type: "node",
c: "#05D1E8",
id: "3360769",
t: "3360769",
},
{
type: "node",
c: "#05D1E8",
id: "3371982",
t: "3371982",
},
{
type: "node",
c: "#05D1E8",
id: "3396625",
t: "3396625",
},
{
type: "node",
c: "#05D1E8",
id: "5505813",
t: "5505813",
},
{
type: "node",
c: "#05D1E8",
id: "5844903",
t: "5844903",
},
{
type: "node",
c: "#05D1E8",
id: "7792837",
t: "7792837",
},
{
type: "node",
c: "#05D1E8",
id: "8489720",
t: "8489720",
},
{
type: "node",
c: "#05D1E8",
id: "22400894",
t: "22400894",
},
{
type: "node",
c: "#05D1E8",
id: "07434677419",
t: "07434677419",
},
{
type: "node",
c: "#05D1E8",
id: "07610039694",
t: "07610039694",
},
{
type: "node",
c: "#05D1E8",
id: "07588304495",
t: "07588304495",
},
{
type: "node",
c: "#05D1E8",
id: "07641036117",
t: "07641036117",
},
{
type: "node",
c: "#05D1E8",
id: "07981267897",
t: "07981267897",
},
{
type: "node",
c: "#05D1E8",
id: "07784425582",
t: "07784425582",
},
{
type: "node",
c: "#05D1E8",
id: "07743039441",
t: "07743039441",
},
{
type: "node",
c: "#05D1E8",
id: "07163185791",
t: "07163185791",
},
{
type: "node",
c: "#05D1E8",
id: "01850897526",
t: "01850897526",
},
{
type: "node",
c: "#05D1E8",
id: "07066875066",
t: "07066875066",
},
{
type: "node",
c: "#05D1E8",
id: "07691640598",
t: "07691640598",
},
{
type: "node",
c: "#05D1E8",
id: "07187432175",
t: "07187432175",
},
{
type: "node",
c: "#05D1E8",
id: "07230262224",
t: "07230262224",
},
{
type: "node",
c: "#05D1E8",
id: "07110730864",
t: "07110730864",
},
{
type: "node",
c: "#05D1E8",
id: "07209670163",
t: "07209670163",
},
{
type: "node",
c: "#05D1E8",
id: "48772130600436761996023412922286",
t: "48772130600436761996023412922286",
},
{
type: "node",
c: "#05D1E8",
id: "07501874156",
t: "07501874156",
},
{
type: "node",
c: "#05D1E8",
id: "07681546436",
t: "07681546436",
},
{
type: "node",
c: "#05D1E8",
id: "07914559382",
t: "07914559382",
},
{
type: "node",
c: "#05D1E8",
id: "07304637408",
t: "07304637408",
},
{
type: "node",
c: "#05D1E8",
id: "07087748678",
t: "07087748678",
},
{
type: "node",
c: "#05D1E8",
id: "07211022593",
t: "07211022593",
},
{
type: "node",
c: "#05D1E8",
id: "01256721926",
t: "01256721926",
},
{
type: "node",
c: "#05D1E8",
id: "07607124303",
t: "07607124303",
},
{
type: "node",
c: "#05D1E8",
id: "07029691700",
t: "07029691700",
},
{
type: "node",
c: "#05D1E8",
id: "07839321359",
t: "07839321359",
},
{
type: "node",
c: "#05D1E8",
id: "07651268820",
t: "07651268820",
},
{
type: "node",
c: "#05D1E8",
id: "01499302899",
t: "01499302899",
},
{
type: "node",
c: "#05D1E8",
id: "07854607195",
t: "07854607195",
},
{
type: "node",
c: "#05D1E8",
id: "07080329376",
t: "07080329376",
},
{
type: "node",
c: "#05D1E8",
id: "07167454533",
t: "07167454533",
},
{
type: "node",
c: "#05D1E8",
id: "07162108686",
t: "07162108686",
},
{
type: "node",
c: "#05D1E8",
id: "07541486388",
t: "07541486388",
},
{
type: "node",
c: "#05D1E8",
id: "07195393761",
t: "07195393761",
},
{
type: "node",
c: "#05D1E8",
id: "01780890590",
t: "01780890590",
},
{
type: "node",
c: "#05D1E8",
id: "07978424233",
t: "07978424233",
},
{
type: "node",
c: "#05D1E8",
id: "07946912731",
t: "07946912731",
},
{
type: "node",
c: "#05D1E8",
id: "07225912655",
t: "07225912655",
},
{
type: "node",
c: "#05D1E8",
id: "07400578851",
t: "07400578851",
},
{
type: "node",
c: "#05D1E8",
id: "01546219380",
t: "01546219380",
},
{
type: "node",
c: "#05D1E8",
id: "07150470306",
t: "07150470306",
},
{
type: "node",
c: "#05D1E8",
id: "07266516764",
t: "07266516764",
},
{
type: "node",
c: "#05D1E8",
id: "07652081795",
t: "07652081795",
},
{
type: "node",
c: "#05D1E8",
id: "07817341678",
t: "07817341678",
},
{
type: "node",
c: "#05D1E8",
id: "07869748073",
t: "07869748073",
},
{
type: "node",
c: "#05D1E8",
id: "07279151148",
t: "07279151148",
},
{
type: "node",
c: "#05D1E8",
id: "07613917675",
t: "07613917675",
},
{
type: "node",
c: "#05D1E8",
id: "07771486427",
t: "07771486427",
},
{
type: "node",
c: "#05D1E8",
id: "07587572122",
t: "07587572122",
},
{
type: "node",
c: "#05D1E8",
id: "6061629169",
t: "6061629169",
},
{
type: "node",
c: "#05D1E8",
id: "07758045718",
t: "07758045718",
},
{
type: "node",
c: "#05D1E8",
id: "07394508492",
t: "07394508492",
},
{
type: "node",
c: "#05D1E8",
id: "01887771702",
t: "01887771702",
},
{
type: "node",
c: "#05D1E8",
id: "07806391587",
t: "07806391587",
},
{
type: "node",
c: "#05D1E8",
id: "07909763438",
t: "07909763438",
},
{
type: "node",
c: "#05D1E8",
id: "07028004429",
t: "07028004429",
},
{
type: "node",
c: "#05D1E8",
id: "07392737002",
t: "07392737002",
},
{
type: "node",
c: "#05D1E8",
id: "07942503106",
t: "07942503106",
},
{
type: "node",
c: "#05D1E8",
id: "07090017672",
t: "07090017672",
},
{
type: "node",
c: "#05D1E8",
id: "07962175133",
t: "07962175133",
},
{
type: "node",
c: "#05D1E8",
id: "07651896055",
t: "07651896055",
},
{
type: "node",
c: "#05D1E8",
id: "01022354521",
t: "01022354521",
},
{
type: "node",
c: "#05D1E8",
id: "07830667924",
t: "07830667924",
},
{
type: "node",
c: "#05D1E8",
id: "07574455931",
t: "07574455931",
},
{
type: "node",
c: "#05D1E8",
id: "01954651441",
t: "01954651441",
},
{
type: "node",
c: "#05D1E8",
id: "07122915122",
t: "07122915122",
},
{
type: "node",
c: "#05D1E8",
id: "01815280008",
t: "01815280008",
},
{
type: "node",
c: "#05D1E8",
id: "07682111000",
t: "07682111000",
},
{
type: "node",
c: "#05D1E8",
id: "07969251842",
t: "07969251842",
},
{
type: "node",
c: "#05D1E8",
id: "07221387474",
t: "07221387474",
},
{
type: "node",
c: "#05D1E8",
id: "07375968743",
t: "07375968743",
},
{
type: "node",
c: "#05D1E8",
id: "044",
t: "044",
},
{
type: "node",
c: "#05D1E8",
id: "07151178213",
t: "07151178213",
},
{
type: "node",
c: "#05D1E8",
id: "07197268544",
t: "07197268544",
},
{
type: "node",
c: "#05D1E8",
id: "07014881393",
t: "07014881393",
},
{
type: "node",
c: "#05D1E8",
id: "07246826358",
t: "07246826358",
},
{
type: "node",
c: "#05D1E8",
id: "07548213987",
t: "07548213987",
},
{
type: "node",
c: "#05D1E8",
id: "14191086749599",
t: "14191086749599",
},
{
type: "node",
c: "#05D1E8",
id: "14853692371599",
t: "14853692371599",
},
{
type: "node",
c: "#05D1E8",
id: "07896182404",
t: "07896182404",
},
{
type: "node",
c: "#05D1E8",
id: "07118310788",
t: "07118310788",
},
{
type: "node",
c: "#05D1E8",
id: "07944968233",
t: "07944968233",
},
{
type: "node",
c: "#05D1E8",
id: "07720520621",
t: "07720520621",
},
{
type: "node",
c: "#05D1E8",
id: "07775682498",
t: "07775682498",
},
{
type: "node",
c: "#05D1E8",
id: "07023552017",
t: "07023552017",
},
{
type: "node",
c: "#05D1E8",
id: "07340142898",
t: "07340142898",
},
{
type: "node",
c: "#05D1E8",
id: "07634569803",
t: "07634569803",
},
{
type: "node",
c: "#05D1E8",
id: "01575974486",
t: "01575974486",
},
{
type: "node",
c: "#05D1E8",
id: "07153234302",
t: "07153234302",
},
{
type: "node",
c: "#05D1E8",
id: "07633839447",
t: "07633839447",
},
{
type: "node",
c: "#05D1E8",
id: "07341891255",
t: "07341891255",
},
{
type: "node",
c: "#05D1E8",
id: "07926168565",
t: "07926168565",
},
{
type: "node",
c: "#05D1E8",
id: "07873904393",
t: "07873904393",
},
{
type: "node",
c: "#05D1E8",
id: "07976349200",
t: "07976349200",
},
{
type: "node",
c: "#05D1E8",
id: "07476886744",
t: "07476886744",
},
{
type: "node",
c: "#05D1E8",
id: "01527646556",
t: "01527646556",
},
{
type: "node",
c: "#05D1E8",
id: "07318250386",
t: "07318250386",
},
{
type: "node",
c: "#05D1E8",
id: "07806980885",
t: "07806980885",
},
{
type: "node",
c: "#05D1E8",
id: "07514503190",
t: "07514503190",
},
{
type: "node",
c: "#05D1E8",
id: "07456622368",
t: "07456622368",
},
{
type: "node",
c: "#05D1E8",
id: "07245763413",
t: "07245763413",
},
{
type: "node",
c: "#05D1E8",
id: "07676963558",
t: "07676963558",
},
{
type: "node",
c: "#05D1E8",
id: "07613569456",
t: "07613569456",
},
{
type: "node",
c: "#05D1E8",
id: "07776253730",
t: "07776253730",
},
{
type: "node",
c: "#05D1E8",
id: "07102745960",
t: "07102745960",
},
{
type: "node",
c: "#05D1E8",
id: "07389444649",
t: "07389444649",
},
{
type: "node",
c: "#05D1E8",
id: "07126482937",
t: "07126482937",
},
{
type: "node",
c: "#05D1E8",
id: "07966846548",
t: "07966846548",
},
{
type: "node",
c: "#05D1E8",
id: "07833688765",
t: "07833688765",
},
{
type: "node",
c: "#05D1E8",
id: "01739521988",
t: "01739521988",
},
{
type: "node",
c: "#05D1E8",
id: "07585377112",
t: "07585377112",
},
{
type: "node",
c: "#05D1E8",
id: "07294484859",
t: "07294484859",
},
{
type: "node",
c: "#05D1E8",
id: "07850316631",
t: "07850316631",
},
{
type: "node",
c: "#05D1E8",
id: "07520192003",
t: "07520192003",
},
{
type: "node",
c: "#05D1E8",
id: "07877889057",
t: "07877889057",
},
{
type: "node",
c: "#05D1E8",
id: "07073084322",
t: "07073084322",
},
{
type: "node",
c: "#05D1E8",
id: "07492710736",
t: "07492710736",
},
{
type: "node",
c: "#05D1E8",
id: "07070949771",
t: "07070949771",
},
{
type: "node",
c: "#05D1E8",
id: "07252637450",
t: "07252637450",
},
{
type: "node",
c: "#05D1E8",
id: "07979079238",
t: "07979079238",
},
{
type: "node",
c: "#05D1E8",
id: "01770637968",
t: "01770637968",
},
{
type: "node",
c: "#05D1E8",
id: "0126233087",
t: "0126233087",
},
{
type: "node",
c: "#05D1E8",
id: "01237303110",
t: "01237303110",
},
{
type: "node",
c: "#05D1E8",
id: "14338475884741",
t: "14338475884741",
},
{
type: "node",
c: "#05D1E8",
id: "07873361203",
t: "07873361203",
},
{
type: "node",
c: "#05D1E8",
id: "07189233361",
t: "07189233361",
},
{
type: "node",
c: "#05D1E8",
id: "07497354521",
t: "07497354521",
},
{
type: "node",
c: "#05D1E8",
id: "07541477895",
t: "07541477895",
},
{
type: "node",
c: "#05D1E8",
id: "07690700998",
t: "07690700998",
},
{
type: "node",
c: "#05D1E8",
id: "07351039125",
t: "07351039125",
},
{
type: "node",
c: "#05D1E8",
id: "07529309344",
t: "07529309344",
},
{
type: "node",
c: "#05D1E8",
id: "07216812571",
t: "07216812571",
},
{
// ...truncated 16594 lines<!doctype html>
<html lang="en" style="background-color: #2d383f">
<head>
<meta charset="utf-8" />
<title>Time Bar Basics</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 klchart-timebar"></div>
<div id="kltimebar" class="kltimebar"></div>
<script type="module" src="./code.js"></script>
</body>
</html>