Events can have multiple sources.
Here, Bitcoin transactions are modeled as instantaneous events with one or many input addresses, and one or many output addresses.
It is common for an input address to also be listed as an output, to send some "change" back to the sender.
By providing entityIds as an object, you can specify to and from properties of individual transactions within a single Bitcoin transaction.
See also:
import { createTimeline } from "kronograph";
import { entities, events, entityTypes } from "./data";
const timeline = createTimeline("my-timeline");
timeline.options({ entities: { truncateLabelsAt: 17 }, events: { joinStyle: "horizontal" } });
timeline.set({ entities, events, entityTypes });
timeline.setOrdering("keyorder");
timeline.fit(); export const events = {
event1: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: ["1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
},
time: Date.UTC(2021, 2, 1, 23, 59, 51, 900),
},
event2: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: ["11cCjMJAQE39nUWsFYTDQRhrFk8kWs"],
},
time: Date.UTC(2021, 2, 2, 0, 3, 14, 400),
},
event3: {
entityIds: {
from: ["3VUVeDpTmjaJFjKx55opJV5QJTBNx"],
to: [
"1eqKut7zeuaVj1CA1Sd5imrMAjuCa5y3J",
"3w3TyjLZ2XfMRuwnfa9FvM842s",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1JiiQjYwBGH2wcAfxnnZAu8bZGwudD",
"3zcq8asFsVrWXJ95RweSik2eeKZ",
"3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3VUVeDpTmjaJFjKx55opJV5QJTBNx",
],
},
time: Date.UTC(2021, 2, 2, 0, 5, 43, 800),
},
event4: {
entityIds: {
from: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm", "1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
to: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
},
time: Date.UTC(2021, 2, 2, 0, 10, 38, 100),
},
event5: {
entityIds: {
from: ["1tdpBMrRgKTKhP9aaQQ7U31fYB"],
to: [
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm",
"13FU3N5CDd9GR9TEBKJQwmQtSDh",
],
},
time: Date.UTC(2021, 2, 2, 0, 15, 25, 200),
},
event6: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX", "1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY"],
to: ["1dqFCTJDoZCQGcoaADzUfWNxbbBe", "1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 18, 30, 600),
},
event7: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
to: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm", "1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 22, 24, 600),
},
event8: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: [
"1dqFCTJDoZCQGcoaADzUfWNxbbBe",
"3zcq8asFsVrWXJ95RweSik2eeKZ",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"3hjwuBeeF1ScUjdcr2pSv4jX8E",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
],
},
time: Date.UTC(2021, 2, 2, 0, 24, 45, 900),
},
event9: {
entityIds: {
from: ["1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT"],
to: ["1dqFCTJDoZCQGcoaADzUfWNxbbBe"],
},
time: Date.UTC(2021, 2, 2, 0, 27, 57, 600),
},
event10: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: [
"11cCjMJAQE39nUWsFYTDQRhrFk8kWs",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ",
],
},
time: Date.UTC(2021, 2, 2, 0, 31, 2, 100),
},
event11: {
entityIds: {
from: [
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1tdpBMrRgKTKhP9aaQQ7U31fYB",
"3VUVeDpTmjaJFjKx55opJV5QJTBNx",
],
to: ["3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ"],
},
time: Date.UTC(2021, 2, 2, 0, 34, 57, 200),
},
event12: {
entityIds: {
from: ["12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
to: ["13FU3N5CDd9GR9TEBKJQwmQtSDh", "12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
},
time: Date.UTC(2021, 2, 2, 0, 37, 9, 300),
},
event13: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: ["11cCjMJAQE39nUWsFYTDQRhrFk8kWs", "3hjwuBeeF1ScUjdcr2pSv4jX8E"],
},
time: Date.UTC(2021, 2, 2, 0, 38, 30, 300),
},
event14: {
entityIds: {
from: ["1dD4yFcz1EuTNi9q4AZisVvSHhZPTW"],
to: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
},
time: Date.UTC(2021, 2, 2, 0, 42, 54),
},
event15: {
entityIds: {
from: ["1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
to: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm"],
},
time: Date.UTC(2021, 2, 2, 0, 46, 23, 700),
},
event16: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
to: [
"3nTgZTc4LqoXYZnY6yExtckeG",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1dqFCTJDoZCQGcoaADzUfWNxbbBe",
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1tdpBMrRgKTKhP9aaQQ7U31fYB",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"13FU3N5CDd9GR9TEBKJQwmQtSDh",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ",
],
},
time: Date.UTC(2021, 2, 2, 0, 48, 36, 900),
},
event17: {
entityIds: {
from: ["3nTgZTc4LqoXYZnY6yExtckeG"],
to: ["12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
},
time: Date.UTC(2021, 2, 2, 0, 50, 9, 600),
},
event18: {
entityIds: {
from: ["3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s"],
to: ["1dD4yFcz1EuTNi9q4AZisVvSHhZPTW", "3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s"],
},
time: Date.UTC(2021, 2, 2, 0, 53, 4, 200),
},
event19: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 56, 15, 900),
},
};
export const entities = {
"11cCjMJAQE39nUWsFYTDQRhrFk8kWs": {},
"1eqKut7zeuaVj1CA1Sd5imrMAjuCa5y3J": {},
"3w3TyjLZ2XfMRuwnfa9FvM842s": {},
"3nTgZTc4LqoXYZnY6yExtckeG": {},
"12zvCZ99FmG9b4PyWBp5hadEdY9u1": {},
"1dqFCTJDoZCQGcoaADzUfWNxbbBe": {},
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY": {},
"1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm": {},
"1JiiQjYwBGH2wcAfxnnZAu8bZGwudD": {},
"3zcq8asFsVrWXJ95RweSik2eeKZ": {},
"1tdpBMrRgKTKhP9aaQQ7U31fYB": {},
"3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s": {},
"3VUVeDpTmjaJFjKx55opJV5QJTBNx": {},
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ": {},
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT": {},
"13FU3N5CDd9GR9TEBKJQwmQtSDh": {},
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW": {},
"1C4fkvmdAHMkMf1P9DZvEg3fa": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
"3hjwuBeeF1ScUjdcr2pSv4jX8E": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
"1p4CUQM74WYkxbpzKJ2PF4brZwX": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
};
export const entityTypes = {
default: {
typeLabel: "Bitcoin addresses",
lineWidth: 0.5,
groupBy: ["group"],
},
}; <!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.js"></script>
</body>
</html> import React from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import { entities, events, entityTypes } from "./data";
export const Demo = () => (
<Timeline
entityTypes={entityTypes}
entities={entities}
events={events}
options={{
entities: {
truncateLabelsAt: 17,
},
events: {
joinStyle: "horizontal",
},
}}
ordering={"keyorder"}
/>
);
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />); export const events = {
event1: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: ["1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
},
time: Date.UTC(2021, 2, 1, 23, 59, 51, 900),
},
event2: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: ["11cCjMJAQE39nUWsFYTDQRhrFk8kWs"],
},
time: Date.UTC(2021, 2, 2, 0, 3, 14, 400),
},
event3: {
entityIds: {
from: ["3VUVeDpTmjaJFjKx55opJV5QJTBNx"],
to: [
"1eqKut7zeuaVj1CA1Sd5imrMAjuCa5y3J",
"3w3TyjLZ2XfMRuwnfa9FvM842s",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1JiiQjYwBGH2wcAfxnnZAu8bZGwudD",
"3zcq8asFsVrWXJ95RweSik2eeKZ",
"3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3VUVeDpTmjaJFjKx55opJV5QJTBNx",
],
},
time: Date.UTC(2021, 2, 2, 0, 5, 43, 800),
},
event4: {
entityIds: {
from: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm", "1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
to: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
},
time: Date.UTC(2021, 2, 2, 0, 10, 38, 100),
},
event5: {
entityIds: {
from: ["1tdpBMrRgKTKhP9aaQQ7U31fYB"],
to: [
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm",
"13FU3N5CDd9GR9TEBKJQwmQtSDh",
],
},
time: Date.UTC(2021, 2, 2, 0, 15, 25, 200),
},
event6: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX", "1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY"],
to: ["1dqFCTJDoZCQGcoaADzUfWNxbbBe", "1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 18, 30, 600),
},
event7: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
to: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm", "1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 22, 24, 600),
},
event8: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: [
"1dqFCTJDoZCQGcoaADzUfWNxbbBe",
"3zcq8asFsVrWXJ95RweSik2eeKZ",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"3hjwuBeeF1ScUjdcr2pSv4jX8E",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
],
},
time: Date.UTC(2021, 2, 2, 0, 24, 45, 900),
},
event9: {
entityIds: {
from: ["1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT"],
to: ["1dqFCTJDoZCQGcoaADzUfWNxbbBe"],
},
time: Date.UTC(2021, 2, 2, 0, 27, 57, 600),
},
event10: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: [
"11cCjMJAQE39nUWsFYTDQRhrFk8kWs",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ",
],
},
time: Date.UTC(2021, 2, 2, 0, 31, 2, 100),
},
event11: {
entityIds: {
from: [
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1tdpBMrRgKTKhP9aaQQ7U31fYB",
"3VUVeDpTmjaJFjKx55opJV5QJTBNx",
],
to: ["3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ"],
},
time: Date.UTC(2021, 2, 2, 0, 34, 57, 200),
},
event12: {
entityIds: {
from: ["12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
to: ["13FU3N5CDd9GR9TEBKJQwmQtSDh", "12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
},
time: Date.UTC(2021, 2, 2, 0, 37, 9, 300),
},
event13: {
entityIds: {
from: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
to: ["11cCjMJAQE39nUWsFYTDQRhrFk8kWs", "3hjwuBeeF1ScUjdcr2pSv4jX8E"],
},
time: Date.UTC(2021, 2, 2, 0, 38, 30, 300),
},
event14: {
entityIds: {
from: ["1dD4yFcz1EuTNi9q4AZisVvSHhZPTW"],
to: ["3hjwuBeeF1ScUjdcr2pSv4jX8E"],
},
time: Date.UTC(2021, 2, 2, 0, 42, 54),
},
event15: {
entityIds: {
from: ["1JiiQjYwBGH2wcAfxnnZAu8bZGwudD"],
to: ["1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm"],
},
time: Date.UTC(2021, 2, 2, 0, 46, 23, 700),
},
event16: {
entityIds: {
from: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
to: [
"3nTgZTc4LqoXYZnY6yExtckeG",
"12zvCZ99FmG9b4PyWBp5hadEdY9u1",
"1dqFCTJDoZCQGcoaADzUfWNxbbBe",
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY",
"1tdpBMrRgKTKhP9aaQQ7U31fYB",
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT",
"13FU3N5CDd9GR9TEBKJQwmQtSDh",
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW",
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ",
],
},
time: Date.UTC(2021, 2, 2, 0, 48, 36, 900),
},
event17: {
entityIds: {
from: ["3nTgZTc4LqoXYZnY6yExtckeG"],
to: ["12zvCZ99FmG9b4PyWBp5hadEdY9u1"],
},
time: Date.UTC(2021, 2, 2, 0, 50, 9, 600),
},
event18: {
entityIds: {
from: ["3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s"],
to: ["1dD4yFcz1EuTNi9q4AZisVvSHhZPTW", "3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s"],
},
time: Date.UTC(2021, 2, 2, 0, 53, 4, 200),
},
event19: {
entityIds: {
from: ["1C4fkvmdAHMkMf1P9DZvEg3fa"],
to: ["1p4CUQM74WYkxbpzKJ2PF4brZwX"],
},
time: Date.UTC(2021, 2, 2, 0, 56, 15, 900),
},
};
export const entities = {
"11cCjMJAQE39nUWsFYTDQRhrFk8kWs": {},
"1eqKut7zeuaVj1CA1Sd5imrMAjuCa5y3J": {},
"3w3TyjLZ2XfMRuwnfa9FvM842s": {},
"3nTgZTc4LqoXYZnY6yExtckeG": {},
"12zvCZ99FmG9b4PyWBp5hadEdY9u1": {},
"1dqFCTJDoZCQGcoaADzUfWNxbbBe": {},
"1vgHaGUCaiRHc4XHBAK3JJfUuWDRkmY": {},
"1Kiwe1raeMCgMxhJAokRPw68YTP5zezBqm": {},
"1JiiQjYwBGH2wcAfxnnZAu8bZGwudD": {},
"3zcq8asFsVrWXJ95RweSik2eeKZ": {},
"1tdpBMrRgKTKhP9aaQQ7U31fYB": {},
"3PRKYkRM9EryCxcLGYBNUi4EjhWtRA8s": {},
"3VUVeDpTmjaJFjKx55opJV5QJTBNx": {},
"3D1ngTiUwW8PsvniRvCsyFxaEMTZrHJ": {},
"1sHvmUxvbRQL4B9W7daPdMeNPaXirNq7BT": {},
"13FU3N5CDd9GR9TEBKJQwmQtSDh": {},
"1dD4yFcz1EuTNi9q4AZisVvSHhZPTW": {},
"1C4fkvmdAHMkMf1P9DZvEg3fa": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
"3hjwuBeeF1ScUjdcr2pSv4jX8E": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
"1p4CUQM74WYkxbpzKJ2PF4brZwX": {
color: "#f7d06e",
data: {
group: "Suspicious Wallet",
},
},
};
export const entityTypes = {
default: {
typeLabel: "Bitcoin addresses",
lineWidth: 0.5,
groupBy: ["group"],
},
}; <!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>