The lens control automatically becomes available when there's not enough space to display entity names,
Hover over the timeline to reveal the open lens control 
. If lens highlight is set, the entities to be shown in lens view are highlighted.
Click to open lens view, then scroll through the entities using the scroll bar.
Click 
to close lens view.
Use the dropdowns provided below to:
- Set or clear lens highlighting
- Specify the
colorfor lens-related controls
You can also open or close lens view using the lens function.
See Also
The lens control automatically becomes available when there's not enough space to display entity names,
Hover over the timeline to reveal the open lens control . If lens highlight is set, the entities to be shown in lens view are highlighted.
Click to open lens view, then scroll through the entities using the scroll bar.
Click to close lens view.
Use the dropdowns provided below to:
- Set or clear lens highlighting
- Specify the
colorfor lens-related controls
You can also open or close lens view using the lens prop.
See Also
import { createTimeline } from "kronograph";
import data from "./data";
const timeline = createTimeline("my-timeline");
timeline.set({
...data,
entityTypes: {
ip: {
groupBy: ["continent"],
typeLabel: "IP Addresses",
},
},
});
timeline.fit();
document.getElementById("show-lens-highlight").addEventListener("change", (e) => {
const { value } = e.target;
timeline.options({ showLensHighlight: value === "true" });
});
document.getElementById("lens-color").addEventListener("change", (e) => {
const { value } = e.target;
timeline.options({
controls: {
lens: {
color: value === "default" ? undefined : value,
},
},
});
});export default {
entities: {
"119.184.100.174": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"165.225.80.116": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"80.255.245.230": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"78.248.27.2": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"27.195.134.201": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"101.226.51.230": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"123.184.218.198": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"191.7.178.2": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"213.189.47.210": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"101.226.102.79": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"66.249.83.129": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"89.97.106.80": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"46.229.170.197": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"118.37.6.215": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"203.133.168.213": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.151": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.152": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"178.220.88.147": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.150": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"182.201.217.26": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"81.161.59.17": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.66.164": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"65.48.139.133": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"66.249.64.128": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"182.200.24.88": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"111.196.169.190": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"123.245.57.154": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"1.180.208.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"125.78.54.96": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"117.144.246.77": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"81.35.209.250": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"41.225.18.137": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"77.75.76.162": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.148": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.64.248": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"106.38.241.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"141.89.226.146": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"213.184.105.182": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"74.115.135.10": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"138.128.6.115": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.171": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.64.181": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"101.226.125.119": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"200.125.165.69": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.65.122": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"144.3.112.100": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"89.210.106.248": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"199.167.52.5": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"78.192.152.139": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.65.52": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"198.162.116.254": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"86.148.131.117": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"180.76.15.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"197.19.166.161": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"52.12.138.36": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"128.29.43.3": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"76.76.223.2": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"192.118.78.198": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"148.255.69.126": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"123.125.71.48": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.65.251": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"62.210.188.203": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"112.224.2.132": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"101.226.125.19": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"73.34.137.174": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"72.252.150.174": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.184": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"120.29.114.217": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.15": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"112.221.202.195": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"82.129.142.72": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"101.226.33.217": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"83.111.62.228": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.98": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.65.130": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"66.249.64.191": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"85.73.75.91": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"131.161.224.94": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"220.181.108.80": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.130": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"179.181.219.24": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"195.55.121.5": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"2.88.23.138": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.152": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.66.40": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"117.185.27.103": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"117.185.27.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"220.181.108.103": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"162.210.196.129": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.76": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"157.55.39.187": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
},
events: {
"event-0": {
entityIds: ["119.184.100.174", "2.88.23.138"],
time: 1744253249000,
},
"event-1": {
entityIds: ["165.225.80.116", "112.224.2.132"],
time: 1765318109000,
},
"event-2": {
entityIds: ["80.255.245.230", "163.172.64.181"],
time: 1750350822000,
},
"event-3": {
entityIds: ["78.248.27.2", "203.133.168.213"],
time: 1751488327000,
},
"event-4": {
entityIds: ["27.195.134.201", "163.172.65.122"],
time: 1760115406000,
},
"event-5": {
entityIds: ["101.226.51.230", "117.185.27.146"],
time: 1760222194000,
},
"event-6": {
entityIds: ["123.184.218.198", "163.172.65.130"],
time: 1759213314000,
},
"event-7": {
entityIds: ["191.7.178.2", "123.125.71.48"],
time: 1762618176000,
},
"event-8": {
entityIds: ["213.189.47.210", "101.226.33.217"],
time: 1762985966000,
},
"event-9": {
entityIds: ["101.226.102.79", "81.161.59.17"],
time: 1737663650000,
},
"event-10": {
entityIds: ["66.249.83.129", "82.129.142.72"],
time: 1744858118000,
},
"event-11": {
entityIds: ["89.97.106.80", "82.129.142.72"],
time: 1749010651000,
},
"event-12": {
entityIds: ["46.229.170.197", "165.225.80.116"],
time: 1759671592000,
},
"event-13": {
entityIds: ["118.37.6.215", "83.111.62.228"],
time: 1744254798000,
},
"event-14": {
entityIds: ["203.133.168.213", "138.128.6.115"],
time: 1759316917000,
},
"event-15": {
entityIds: ["163.172.66.151", "163.172.66.171"],
time: 1760552216000,
},
"event-16": {
entityIds: ["1.180.208.152", "157.55.39.187"],
time: 1761750368000,
},
"event-17": {
entityIds: ["178.220.88.147", "74.115.135.10"],
time: 1760140795000,
},
"event-18": {
entityIds: ["1.180.208.150", "163.172.66.184"],
time: 1743152356000,
},
"event-19": {
entityIds: ["182.201.217.26", "111.196.169.190"],
time: 1748508579000,
},
"event-20": {
entityIds: ["81.161.59.17", "117.185.27.146"],
time: 1741457424000,
},
"event-21": {
entityIds: ["163.172.66.164", "46.229.170.197"],
time: 1757908877000,
},
"event-22": {
entityIds: ["65.48.139.133", "74.115.135.10"],
time: 1751047803000,
},
"event-23": {
entityIds: ["66.249.64.128", "163.172.66.171"],
time: 1753009515000,
},
"event-24": {
entityIds: ["182.200.24.88", "180.76.15.146"],
time: 1761003980000,
},
"event-25": {
entityIds: ["111.196.169.190", "220.181.108.103"],
time: 1758752044000,
},
"event-26": {
entityIds: ["123.245.57.154", "27.195.134.201"],
time: 1745718177000,
},
"event-27": {
entityIds: ["1.180.208.146", "52.12.138.36"],
time: 1750648988000,
},
"event-28": {
entityIds: ["125.78.54.96", "220.181.108.80"],
time: 1737734016000,
},
"event-29": {
entityIds: ["117.144.246.77", "85.73.75.91"],
time: 1737781101000,
},
"event-30": {
entityIds: ["81.35.209.250", "213.184.105.182"],
time: 1744572606000,
},
"event-31": {
entityIds: ["41.225.18.137", "163.172.66.151"],
time: 1761666648000,
},
"event-32": {
entityIds: ["77.75.76.162", "111.196.169.190"],
time: 1744281944000,
},
"event-33": {
entityIds: ["1.180.208.148", "213.184.105.182"],
time: 1738468034000,
},
"event-34": {
entityIds: ["163.172.64.248", "163.172.66.15"],
time: 1763796104000,
},
"event-35": {
entityIds: ["106.38.241.146", "118.37.6.215"],
time: 1765754115000,
},
"event-36": {
entityIds: ["141.89.226.146", "163.172.66.130"],
time: 1753964366000,
},
"event-37": {
entityIds: ["213.184.105.182", "203.133.168.213"],
time: 1757509266000,
},
"event-38": {
entityIds: ["74.115.135.10", "163.172.66.164"],
time: 1749956490000,
},
"event-39": {
entityIds: ["138.128.6.115", "101.226.51.230"],
time: 1759631605000,
},
"event-40": {
entityIds: ["163.172.66.171", "163.172.65.122"],
time: 1765739319000,
},
"event-41": {
entityIds: ["163.172.64.181", "118.37.6.215"],
time: 1744528323000,
},
"event-42": {
entityIds: ["101.226.125.119", "163.172.65.52"],
time: 1738349986000,
},
"event-43": {
entityIds: ["200.125.165.69", "117.185.27.103"],
time: 1764973469000,
},
"event-44": {
entityIds: ["163.172.65.122", "163.172.66.164"],
time: 1744527369000,
},
"event-45": {
entityIds: ["144.3.112.100", "123.184.218.198"],
time: 1744490986000,
},
"event-46": {
entityIds: ["89.210.106.248", "74.115.135.10"],
time: 1759633419000,
},
"event-47": {
entityIds: ["199.167.52.5", "163.172.66.98"],
time: 1757758242000,
},
"event-48": {
entityIds: ["78.192.152.139", "85.73.75.91"],
time: 1744574354000,
},
"event-49": {
entityIds: ["163.172.65.52", "1.180.208.146"],
time: 1736358798000,
},
"event-50": {
entityIds: ["198.162.116.254", "112.221.202.195"],
time: 1758049345000,
},
"event-51": {
entityIds: ["86.148.131.117", "197.19.166.161"],
time: 1764787657000,
},
"event-52": {
entityIds: ["180.76.15.146", "66.249.64.128"],
time: 1764889348000,
},
"event-53": {
entityIds: ["197.19.166.161", "163.172.66.130"],
time: 1751522554000,
},
"event-54": {
entityIds: ["52.12.138.36", "1.180.208.146"],
time: 1764324740000,
},
"event-55": {
entityIds: ["128.29.43.3", "89.210.106.248"],
time: 1748618844000,
},
"event-56": {
entityIds: ["76.76.223.2", "101.226.102.79"],
time: 1763365078000,
},
"event-57": {
entityIds: ["192.118.78.198", "131.161.224.94"],
time: 1750278755000,
},
"event-58": {
entityIds: ["148.255.69.126", "182.201.217.26"],
time: 1763054150000,
},
"event-59": {
entityIds: ["123.125.71.48", "1.180.208.152"],
time: 1743586425000,
},
"event-60": {
entityIds: ["163.172.65.251", "101.226.102.79"],
time: 1763920550000,
},
"event-61": {
entityIds: ["62.210.188.203", "163.172.64.181"],
time: 1750219976000,
},
"event-62": {
entityIds: ["112.224.2.132", "179.181.219.24"],
time: 1757164081000,
},
"event-63": {
entityIds: ["101.226.125.19", "82.129.142.72"],
time: 1737298396000,
},
"event-64": {
entityIds: ["73.34.137.174", "195.55.121.5"],
time: 1738807920000,
},
"event-65": {
entityIds: ["72.252.150.174", "41.225.18.137"],
time: 1751715117000,
},
"event-66": {
entityIds: ["163.172.66.184", "1.180.208.148"],
time: 1758173164000,
},
"event-67": {
entityIds: ["120.29.114.217", "180.76.15.146"],
time: 1744500824000,
},
"event-68": {
entityIds: ["163.172.66.15", "101.226.51.230"],
time: 1744038374000,
},
"event-69": {
entityIds: ["112.221.202.195", "178.220.88.147"],
time: 1759477031000,
},
"event-70": {
entityIds: ["82.129.142.72", "76.76.223.2"],
time: 1743643082000,
},
"event-71": {
entityIds: ["101.226.33.217", "83.111.62.228"],
time: 1754384187000,
},
"event-72": {
entityIds: ["83.111.62.228", "119.184.100.174"],
time: 1754307424000,
},
"event-73": {
entityIds: ["163.172.66.98", "66.249.64.191"],
time: 1755736539000,
},
"event-74": {
entityIds: ["163.172.65.130", "117.144.246.77"],
time: 1747327918000,
},
"event-75": {
entityIds: ["66.249.64.191", "117.144.246.77"],
time: 1739051420000,
},
"event-76": {
entityIds: ["85.73.75.91", "163.172.66.152"],
time: 1763534676000,
},
"event-77": {
entityIds: ["131.161.224.94", "66.249.64.191"],
time: 1760736350000,
},
"event-78": {
entityIds: ["220.181.108.80", "163.172.66.164"],
time: 1763920159000,
},
"event-79": {
entityIds: ["163.172.66.130", "157.55.39.187"],
time: 1752960541000,
},
"event-80": {
entityIds: ["179.181.219.24", "89.210.106.248"],
time: 1739425929000,
},
"event-81": {
entityIds: ["195.55.121.5", "85.73.75.91"],
time: 1760608604000,
},
"event-82": {
entityIds: ["2.88.23.138", "62.210.188.203"],
time: 1766397672000,
},
"event-83": {
entityIds: ["163.172.66.152", "163.172.66.98"],
time: 1749260448000,
},
"event-84": {
entityIds: ["163.172.66.40", "162.210.196.129"],
time: 1745403429000,
},
"event-85": {
entityIds: ["117.185.27.103", "119.184.100.174"],
time: 1764163553000,
},
"event-86": {
entityIds: ["117.185.27.146", "125.78.54.96"],
time: 1755955371000,
},
"event-87": {
entityIds: ["220.181.108.103", "192.118.78.198"],
time: 1750664871000,
},
"event-88": {
entityIds: ["162.210.196.129", "165.225.80.116"],
time: 1758101163000,
},
"event-89": {
entityIds: ["163.172.66.76", "131.161.224.94"],
time: 1751660272000,
},
"event-90": {
entityIds: ["157.55.39.187", "46.229.170.197"],
time: 1759303257000,
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div class="story">
<div class="story__timeline" id="my-timeline"></div>
<div class="story__controls story__controls--row">
<div class="story__controls__item">
<label for="show-lens-highlight" class="flex-2">Show Lens Highlight</label>
<select id="show-lens-highlight" class="select">
<option value="true" selected>True</option>
<option value="false">False</option>
</select>
</div>
<div class="story__controls__item">
<label for="lens-color" class="flex-2">Lens Control Color</label>
<select id="lens-color" class="select">
<option value="default" selected>Default</option>
<option value="#f47425">Orange</option>
</select>
</div>
</div>
</div>
<script type="module" src="./code.js"></script>
</body>
</html>import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
export const Demo = () => {
const [showLensHighlight, setShowLensHighlight] = useState(true);
const [lensControlColor, setLensControlColor] = useState(undefined);
const options = {
showLensHighlight,
controls: {
lens: {
color: lensControlColor,
},
},
};
return (
<div className="story">
<Timeline
events={data.events}
entities={data.entities}
entityTypes={{
ip: {
groupBy: ["continent"],
typeLabel: "IP Addresses",
},
}}
options={options}
/>
<div className="story__controls story__controls--row">
<div className="story__controls__item">
<label htmlFor="lens-highlight-select" className="flex-2">
Show Lens Highlight
</label>
<select
id="lens-highlight-select"
className="select"
value={showLensHighlight}
onChange={(e) => {
setShowLensHighlight(e.target.value === "true");
}}
>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div className="story__controls__item">
<label htmlFor="lens-color" className="flex-2">
Lens Control Color
</label>
<select
id="lens-color"
className="select"
value={lensControlColor}
onChange={(e) => {
setLensControlColor(e.target.value === "default" ? undefined : e.target.value);
}}
>
<option value="default" selected>
Default
</option>
<option value="#f47425">Orange</option>
</select>
</div>
</div>
</div>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export default {
entities: {
"119.184.100.174": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"165.225.80.116": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"80.255.245.230": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"78.248.27.2": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"27.195.134.201": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"101.226.51.230": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"123.184.218.198": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"191.7.178.2": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"213.189.47.210": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"101.226.102.79": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"66.249.83.129": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"89.97.106.80": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"46.229.170.197": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"118.37.6.215": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"203.133.168.213": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.151": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.152": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"178.220.88.147": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.150": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"182.201.217.26": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"81.161.59.17": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.66.164": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"65.48.139.133": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"66.249.64.128": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"182.200.24.88": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"111.196.169.190": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"123.245.57.154": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"1.180.208.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"125.78.54.96": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"117.144.246.77": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"81.35.209.250": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"41.225.18.137": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"77.75.76.162": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"1.180.208.148": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.64.248": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"106.38.241.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"141.89.226.146": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"213.184.105.182": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"74.115.135.10": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"138.128.6.115": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.171": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.64.181": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"101.226.125.119": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"200.125.165.69": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.65.122": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"144.3.112.100": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"89.210.106.248": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"199.167.52.5": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"78.192.152.139": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.65.52": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"198.162.116.254": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"86.148.131.117": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"180.76.15.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"197.19.166.161": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"52.12.138.36": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"128.29.43.3": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"76.76.223.2": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"192.118.78.198": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"148.255.69.126": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"123.125.71.48": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.65.251": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"62.210.188.203": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"112.224.2.132": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"101.226.125.19": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"73.34.137.174": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"72.252.150.174": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.184": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"120.29.114.217": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.15": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"112.221.202.195": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"82.129.142.72": {
type: "ip",
data: {
continent: "Africa",
},
color: "#ff8834",
},
"101.226.33.217": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"83.111.62.228": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.98": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.65.130": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"66.249.64.191": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"85.73.75.91": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"131.161.224.94": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"220.181.108.80": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.130": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"179.181.219.24": {
type: "ip",
data: {
continent: "South America",
},
color: "#2676c7",
},
"195.55.121.5": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"2.88.23.138": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"163.172.66.152": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"163.172.66.40": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"117.185.27.103": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"117.185.27.146": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"220.181.108.103": {
type: "ip",
data: {
continent: "Asia",
},
color: "#f86868",
},
"162.210.196.129": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
"163.172.66.76": {
type: "ip",
data: {
continent: "Europe",
},
color: "#f7d06e",
},
"157.55.39.187": {
type: "ip",
data: {
continent: "North America",
},
color: "#5dbbb4",
},
},
events: {
"event-0": {
entityIds: ["119.184.100.174", "2.88.23.138"],
time: 1744253249000,
},
"event-1": {
entityIds: ["165.225.80.116", "112.224.2.132"],
time: 1765318109000,
},
"event-2": {
entityIds: ["80.255.245.230", "163.172.64.181"],
time: 1750350822000,
},
"event-3": {
entityIds: ["78.248.27.2", "203.133.168.213"],
time: 1751488327000,
},
"event-4": {
entityIds: ["27.195.134.201", "163.172.65.122"],
time: 1760115406000,
},
"event-5": {
entityIds: ["101.226.51.230", "117.185.27.146"],
time: 1760222194000,
},
"event-6": {
entityIds: ["123.184.218.198", "163.172.65.130"],
time: 1759213314000,
},
"event-7": {
entityIds: ["191.7.178.2", "123.125.71.48"],
time: 1762618176000,
},
"event-8": {
entityIds: ["213.189.47.210", "101.226.33.217"],
time: 1762985966000,
},
"event-9": {
entityIds: ["101.226.102.79", "81.161.59.17"],
time: 1737663650000,
},
"event-10": {
entityIds: ["66.249.83.129", "82.129.142.72"],
time: 1744858118000,
},
"event-11": {
entityIds: ["89.97.106.80", "82.129.142.72"],
time: 1749010651000,
},
"event-12": {
entityIds: ["46.229.170.197", "165.225.80.116"],
time: 1759671592000,
},
"event-13": {
entityIds: ["118.37.6.215", "83.111.62.228"],
time: 1744254798000,
},
"event-14": {
entityIds: ["203.133.168.213", "138.128.6.115"],
time: 1759316917000,
},
"event-15": {
entityIds: ["163.172.66.151", "163.172.66.171"],
time: 1760552216000,
},
"event-16": {
entityIds: ["1.180.208.152", "157.55.39.187"],
time: 1761750368000,
},
"event-17": {
entityIds: ["178.220.88.147", "74.115.135.10"],
time: 1760140795000,
},
"event-18": {
entityIds: ["1.180.208.150", "163.172.66.184"],
time: 1743152356000,
},
"event-19": {
entityIds: ["182.201.217.26", "111.196.169.190"],
time: 1748508579000,
},
"event-20": {
entityIds: ["81.161.59.17", "117.185.27.146"],
time: 1741457424000,
},
"event-21": {
entityIds: ["163.172.66.164", "46.229.170.197"],
time: 1757908877000,
},
"event-22": {
entityIds: ["65.48.139.133", "74.115.135.10"],
time: 1751047803000,
},
"event-23": {
entityIds: ["66.249.64.128", "163.172.66.171"],
time: 1753009515000,
},
"event-24": {
entityIds: ["182.200.24.88", "180.76.15.146"],
time: 1761003980000,
},
"event-25": {
entityIds: ["111.196.169.190", "220.181.108.103"],
time: 1758752044000,
},
"event-26": {
entityIds: ["123.245.57.154", "27.195.134.201"],
time: 1745718177000,
},
"event-27": {
entityIds: ["1.180.208.146", "52.12.138.36"],
time: 1750648988000,
},
"event-28": {
entityIds: ["125.78.54.96", "220.181.108.80"],
time: 1737734016000,
},
"event-29": {
entityIds: ["117.144.246.77", "85.73.75.91"],
time: 1737781101000,
},
"event-30": {
entityIds: ["81.35.209.250", "213.184.105.182"],
time: 1744572606000,
},
"event-31": {
entityIds: ["41.225.18.137", "163.172.66.151"],
time: 1761666648000,
},
"event-32": {
entityIds: ["77.75.76.162", "111.196.169.190"],
time: 1744281944000,
},
"event-33": {
entityIds: ["1.180.208.148", "213.184.105.182"],
time: 1738468034000,
},
"event-34": {
entityIds: ["163.172.64.248", "163.172.66.15"],
time: 1763796104000,
},
"event-35": {
entityIds: ["106.38.241.146", "118.37.6.215"],
time: 1765754115000,
},
"event-36": {
entityIds: ["141.89.226.146", "163.172.66.130"],
time: 1753964366000,
},
"event-37": {
entityIds: ["213.184.105.182", "203.133.168.213"],
time: 1757509266000,
},
"event-38": {
entityIds: ["74.115.135.10", "163.172.66.164"],
time: 1749956490000,
},
"event-39": {
entityIds: ["138.128.6.115", "101.226.51.230"],
time: 1759631605000,
},
"event-40": {
entityIds: ["163.172.66.171", "163.172.65.122"],
time: 1765739319000,
},
"event-41": {
entityIds: ["163.172.64.181", "118.37.6.215"],
time: 1744528323000,
},
"event-42": {
entityIds: ["101.226.125.119", "163.172.65.52"],
time: 1738349986000,
},
"event-43": {
entityIds: ["200.125.165.69", "117.185.27.103"],
time: 1764973469000,
},
"event-44": {
entityIds: ["163.172.65.122", "163.172.66.164"],
time: 1744527369000,
},
"event-45": {
entityIds: ["144.3.112.100", "123.184.218.198"],
time: 1744490986000,
},
"event-46": {
entityIds: ["89.210.106.248", "74.115.135.10"],
time: 1759633419000,
},
"event-47": {
entityIds: ["199.167.52.5", "163.172.66.98"],
time: 1757758242000,
},
"event-48": {
entityIds: ["78.192.152.139", "85.73.75.91"],
time: 1744574354000,
},
"event-49": {
entityIds: ["163.172.65.52", "1.180.208.146"],
time: 1736358798000,
},
"event-50": {
entityIds: ["198.162.116.254", "112.221.202.195"],
time: 1758049345000,
},
"event-51": {
entityIds: ["86.148.131.117", "197.19.166.161"],
time: 1764787657000,
},
"event-52": {
entityIds: ["180.76.15.146", "66.249.64.128"],
time: 1764889348000,
},
"event-53": {
entityIds: ["197.19.166.161", "163.172.66.130"],
time: 1751522554000,
},
"event-54": {
entityIds: ["52.12.138.36", "1.180.208.146"],
time: 1764324740000,
},
"event-55": {
entityIds: ["128.29.43.3", "89.210.106.248"],
time: 1748618844000,
},
"event-56": {
entityIds: ["76.76.223.2", "101.226.102.79"],
time: 1763365078000,
},
"event-57": {
entityIds: ["192.118.78.198", "131.161.224.94"],
time: 1750278755000,
},
"event-58": {
entityIds: ["148.255.69.126", "182.201.217.26"],
time: 1763054150000,
},
"event-59": {
entityIds: ["123.125.71.48", "1.180.208.152"],
time: 1743586425000,
},
"event-60": {
entityIds: ["163.172.65.251", "101.226.102.79"],
time: 1763920550000,
},
"event-61": {
entityIds: ["62.210.188.203", "163.172.64.181"],
time: 1750219976000,
},
"event-62": {
entityIds: ["112.224.2.132", "179.181.219.24"],
time: 1757164081000,
},
"event-63": {
entityIds: ["101.226.125.19", "82.129.142.72"],
time: 1737298396000,
},
"event-64": {
entityIds: ["73.34.137.174", "195.55.121.5"],
time: 1738807920000,
},
"event-65": {
entityIds: ["72.252.150.174", "41.225.18.137"],
time: 1751715117000,
},
"event-66": {
entityIds: ["163.172.66.184", "1.180.208.148"],
time: 1758173164000,
},
"event-67": {
entityIds: ["120.29.114.217", "180.76.15.146"],
time: 1744500824000,
},
"event-68": {
entityIds: ["163.172.66.15", "101.226.51.230"],
time: 1744038374000,
},
"event-69": {
entityIds: ["112.221.202.195", "178.220.88.147"],
time: 1759477031000,
},
"event-70": {
entityIds: ["82.129.142.72", "76.76.223.2"],
time: 1743643082000,
},
"event-71": {
entityIds: ["101.226.33.217", "83.111.62.228"],
time: 1754384187000,
},
"event-72": {
entityIds: ["83.111.62.228", "119.184.100.174"],
time: 1754307424000,
},
"event-73": {
entityIds: ["163.172.66.98", "66.249.64.191"],
time: 1755736539000,
},
"event-74": {
entityIds: ["163.172.65.130", "117.144.246.77"],
time: 1747327918000,
},
"event-75": {
entityIds: ["66.249.64.191", "117.144.246.77"],
time: 1739051420000,
},
"event-76": {
entityIds: ["85.73.75.91", "163.172.66.152"],
time: 1763534676000,
},
"event-77": {
entityIds: ["131.161.224.94", "66.249.64.191"],
time: 1760736350000,
},
"event-78": {
entityIds: ["220.181.108.80", "163.172.66.164"],
time: 1763920159000,
},
"event-79": {
entityIds: ["163.172.66.130", "157.55.39.187"],
time: 1752960541000,
},
"event-80": {
entityIds: ["179.181.219.24", "89.210.106.248"],
time: 1739425929000,
},
"event-81": {
entityIds: ["195.55.121.5", "85.73.75.91"],
time: 1760608604000,
},
"event-82": {
entityIds: ["2.88.23.138", "62.210.188.203"],
time: 1766397672000,
},
"event-83": {
entityIds: ["163.172.66.152", "163.172.66.98"],
time: 1749260448000,
},
"event-84": {
entityIds: ["163.172.66.40", "162.210.196.129"],
time: 1745403429000,
},
"event-85": {
entityIds: ["117.185.27.103", "119.184.100.174"],
time: 1764163553000,
},
"event-86": {
entityIds: ["117.185.27.146", "125.78.54.96"],
time: 1755955371000,
},
"event-87": {
entityIds: ["220.181.108.103", "192.118.78.198"],
time: 1750664871000,
},
"event-88": {
entityIds: ["162.210.196.129", "165.225.80.116"],
time: 1758101163000,
},
"event-89": {
entityIds: ["163.172.66.76", "131.161.224.94"],
time: 1751660272000,
},
"event-90": {
entityIds: ["157.55.39.187", "46.229.170.197"],
time: 1759303257000,
},
},
};<!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>