Click a node in the map to focus on its associated entity in the timeline.
Pan and zoom the timeline to filter the map so that it only shows the nodes associated with the events displayed in the timeline.
This story shows an integration between KronoGraph and MapWeave.
We're using the focus and range events to keep the two components in sync.
See also:
Click a node in the map to focus on its associated entity in the timeline.
Pan and zoom the timeline to filter the map so that it only shows the nodes associated with the events displayed in the timeline.
We're using the focus and range props to keep the two components in sync.
See also:
import { MapWeave } from "mapweave/mapbox";
import { NetworkLayer } from "mapweave/layers";
import { networkData, defaultView, kgData } from "./data";
import { createTimeline } from "kronograph";
import "mapbox-gl/dist/mapbox-gl.css";
let networkLayer;
let selectedLayer;
let graphEng;
let timeline;
const networkLayerOptions = {
links: { bundling: { enabled: true } },
};
async function main() {
const mapweave = new MapWeave({
container: "map",
options: { accessToken: MAPBOX_ACCESS_TOKEN },
});
networkLayer = new NetworkLayer({ data: networkData, options: networkLayerOptions });
selectedLayer = new NetworkLayer();
mapweave.addLayer(networkLayer);
mapweave.addLayer(selectedLayer);
mapweave.view(defaultView);
graphEng = networkLayer.getGraphEngine();
mapweave.on("click", clickHandler);
timeline = createTimeline({
container: "timeline",
options: {
focus: { backgroundColor: "#00a171", reorder: false },
controls: { pin: { show: false } },
},
});
timeline.labelAreaWidth("fixed", 130);
timeline.set(kgData);
timeline.fit();
timeline.on("range", timeRangeChangeHandler);
timeline.on("focus", focusHandler);
}
main();
function timeRangeChangeHandler({ start, end }) {
const rangeStart = start;
const rangeEnd = end;
networkLayer.options({ timeFilterRange: { start: rangeStart, end: rangeEnd } });
}
function focusHandler(event) {
if (event.focus.length === 0) {
networkLayer.options({ foreground: { ids: [] } });
selectedLayer.data({});
} else {
const stationId = event.focus[0];
const neighbours = graphEng.neighbors(stationId);
const neighbourNodes = neighbours.nodeIds;
networkLayer.options({
foreground: { ids: neighbourNodes.concat(neighbours.linkIds), backgroundOpacity: 0.2 },
});
const selectedNode = { ...networkData[stationId] };
selectedNode.border = { color: "#00a171", width: 2 };
selectedLayer.data({ [stationId]: selectedNode });
}
}
function clickHandler(click) {
if (click.item !== null) {
const clickedItem = click.item;
if (clickedItem.type === "node") {
const neighbours = graphEng.neighbors(click.id);
const neighbourNodes = neighbours.nodeIds;
networkLayer.options({
foreground: { ids: neighbourNodes.concat(neighbours.linkIds), backgroundOpacity: 0 },
});
const selectedNode = { ...clickedItem };
selectedNode.border = { color: "#00a171", width: 2 };
selectedLayer.data({ [click.id]: selectedNode });
if ("children" in selectedNode) {
timeline.focus(selectedNode.children);
} else {
timeline.focus(click.id);
}
}
} else {
networkLayer.options({ foreground: { ids: [] } });
selectedLayer.data({});
timeline.focus([]);
}
}export const nodesData = [
["52", 42.348717, -71.085954],
["58", 42.355596, -71.07278],
["67", 42.3581, -71.093198],
["80", 42.362429, -71.090188],
["99", 42.35892, -71.057629],
["113", 42.36069, -71.070884],
];
export const linksData = [
["67-80", 1366106400000, 1366131900000, 1366141800000, 1366144800000],
[
"80-67",
1366119900000,
1366134300000,
1366137600000,
1366140300000,
1366142400000,
1366148100000,
],
["80-113", 1366112700000],
["113-80", 1366103700000, 1366111500000],
["58-113", 1366116600000, 1366121700000],
["67-99", 1366122300000],
["52-67", 1366123500000],
["52-113", 1366110600000, 1366118700000],
["52-58", 1366118400000, 1366138200000],
["99-80", 1366123500000],
["99-58", 1366114800000, 1366115700000],
["67-113", 1366154700000],
["113-67", 1366108200000, 1366126200000],
["52-80", 1366110600000],
["113-52", 1366132800000],
["58-67", 1366130100000],
["58-80", 1366101600000],
["113-99", 1366116600000],
["67-58", 1366119900000],
];
function makeNetworkData() {
const nodes = {};
const links = {};
for (const [id, latitude, longitude] of nodesData) {
nodes[id] = {
type: "node",
latitude,
longitude,
color: "rgba(29, 29, 29, 0.5)",
border: { color: "#ff5e0d", width: 1.5 },
size: 6,
time: [],
};
}
for (const [id, ...time] of linksData) {
const [id1, id2] = id.split("-");
links[id] = {
type: "link",
id1,
id2,
width: 2,
color: "rgba(255, 119, 51, 0.2)",
time,
};
nodes[id1].time.push(...time);
nodes[id2].time.push(...time);
}
return { ...nodes, ...links };
}
function makeKGData() {
const ets = {};
const evs = {};
for (const [id] of nodesData) {
ets[id] = {
type: "Station",
label: `${id}`,
color: "#ff5e0d",
};
}
for (const [id, ...time] of linksData) {
const [id1, id2] = id.split("-");
for (let i = 0; i < time.length; i++) {
evs[`${id}-${i + 1}`] = {
entityIds: [id1, id2],
time: time[i],
color: "#ff7733",
};
}
}
return { entities: ets, events: evs };
}
export const networkData = makeNetworkData();
export const kgData = makeKGData();
export const defaultView = {
latitude: 42.357,
longitude: -71.08,
zoom: 13,
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div style="display: flex; flex-direction: column; height: 100%">
<div id="map" style="flex: 3 1 200px"></div>
<div id="timeline" style="flex: 2 1 200px"></div>
</div>
<script type="module" src="./code.js"></script>
</body>
</html>import React, { useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import { MapWeave } from "mapweave/react/mapbox";
import { NetworkLayer, createNetworkGraphEngine } from "mapweave/react/layers";
import { networkData, defaultView, kgData } from "./data";
import Timeline from "kronograph/react/Timeline";
import "mapbox-gl/dist/mapbox-gl.css";
const mapWeaveOptions = {
accessToken: MAPBOX_ACCESS_TOKEN,
};
const timelineOptions = {
focus: { backgroundColor: "#00a171", reorder: false },
controls: { pin: { show: false } },
};
export const Demo = () => {
const graphEngine = useMemo(() => createNetworkGraphEngine(networkData), [networkData]);
const [selectedData, setSelectedData] = useState({});
const [focus, setFocus] = useState([]);
const [networkLayerOptions, setNetworkLayerOptions] = useState({
links: { bundling: { enabled: true } },
});
function timelineChangeHandler({ focus, range }) {
if (focus) {
if (focus.length === 0) {
setNetworkLayerOptions((options) => {
return { ...options, foreground: { ids: [] } };
});
setSelectedData({});
} else {
const stationId = focus[0];
const neighbours = graphEngine.neighbors(stationId);
const neighbourNodes = neighbours.nodeIds;
setNetworkLayerOptions((options) => {
return {
...options,
foreground: { ids: neighbourNodes.concat(neighbours.linkIds), backgroundOpacity: 0.2 },
};
});
const selectedNode = { ...networkData[stationId] };
selectedNode.border = { color: "#00a171", width: 2 };
setSelectedData({ [stationId]: selectedNode });
}
} else if (range) {
const rangeStart = range.start;
const rangeEnd = range.end;
setNetworkLayerOptions((options) => {
return { ...options, timeFilterRange: { start: rangeStart, end: rangeEnd } };
});
}
}
function clickHandler(click) {
if (click.item !== null) {
const clickedItem = click.item;
if (clickedItem.type === "node") {
const neighbours = graphEngine.neighbors(click.id);
const neighbourNodes = neighbours.nodeIds;
setNetworkLayerOptions((options) => {
return {
...options,
foreground: { ids: neighbourNodes.concat(neighbours.linkIds), backgroundOpacity: 0 },
};
});
const selectedNode = { ...clickedItem };
selectedNode.border = { color: "#00a171", width: 2 };
setSelectedData({ [click.id]: selectedNode });
if ("children" in selectedNode) {
setFocus(selectedNode.children);
} else {
setFocus(click.id);
}
}
} else {
setNetworkLayerOptions((options) => {
return { ...options, foreground: { ids: [] } };
});
setSelectedData({});
setFocus([]);
}
}
return (
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<div style={{ flex: "3 1 200px" }}>
<MapWeave options={mapWeaveOptions} view={defaultView} onClick={clickHandler}>
<NetworkLayer data={networkData} options={networkLayerOptions} />
<NetworkLayer data={selectedData} />
</MapWeave>
</div>
<div style={{ flex: "2 1 200px" }}>
<Timeline
{...kgData}
options={timelineOptions}
focus={focus}
labelAreaWidth={{ mode: "fixed", width: 170 }}
onTimelineChange={timelineChangeHandler}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export const nodesData = [
["52", 42.348717, -71.085954],
["58", 42.355596, -71.07278],
["67", 42.3581, -71.093198],
["80", 42.362429, -71.090188],
["99", 42.35892, -71.057629],
["113", 42.36069, -71.070884],
];
export const linksData = [
["67-80", 1366106400000, 1366131900000, 1366141800000, 1366144800000],
[
"80-67",
1366119900000,
1366134300000,
1366137600000,
1366140300000,
1366142400000,
1366148100000,
],
["80-113", 1366112700000],
["113-80", 1366103700000, 1366111500000],
["58-113", 1366116600000, 1366121700000],
["67-99", 1366122300000],
["52-67", 1366123500000],
["52-113", 1366110600000, 1366118700000],
["52-58", 1366118400000, 1366138200000],
["99-80", 1366123500000],
["99-58", 1366114800000, 1366115700000],
["67-113", 1366154700000],
["113-67", 1366108200000, 1366126200000],
["52-80", 1366110600000],
["113-52", 1366132800000],
["58-67", 1366130100000],
["58-80", 1366101600000],
["113-99", 1366116600000],
["67-58", 1366119900000],
];
function makeNetworkData() {
const nodes = {};
const links = {};
for (const [id, latitude, longitude] of nodesData) {
nodes[id] = {
type: "node",
latitude,
longitude,
color: "rgba(29, 29, 29, 0.5)",
border: { color: "#ff5e0d", width: 1.5 },
size: 6,
time: [],
};
}
for (const [id, ...time] of linksData) {
const [id1, id2] = id.split("-");
links[id] = {
type: "link",
id1,
id2,
width: 2,
color: "rgba(255, 119, 51, 0.2)",
time,
};
nodes[id1].time.push(...time);
nodes[id2].time.push(...time);
}
return { ...nodes, ...links };
}
function makeKGData() {
const ets = {};
const evs = {};
for (const [id] of nodesData) {
ets[id] = {
type: "Station",
label: `${id}`,
color: "#ff5e0d",
};
}
for (const [id, ...time] of linksData) {
const [id1, id2] = id.split("-");
for (let i = 0; i < time.length; i++) {
evs[`${id}-${i + 1}`] = {
entityIds: [id1, id2],
time: time[i],
color: "#ff7733",
};
}
}
return { entities: ets, events: evs };
}
export const networkData = makeNetworkData();
export const kgData = makeKGData();
export const defaultView = {
latitude: 42.357,
longitude: -71.08,
zoom: 13,
};<!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>