//
// Copyright © 2011-2025 Cambridge Intelligence Limited.
// All rights reserved.
//
// Sample Code
//! Explore relations between malware and their vulnerabilities.
import KeyLines from "keylines";
import { data } from "./exploitkits-data.js";
let chart;
async function filterItems(exploitsToShow, allCheckboxes) {
function isExploitChecked(item) {
// Ensure malware nodes are always shown
return item.d.type === "malware" || exploitsToShow.includes(item.d.product);
}
// filter out the subsets that aren't selected
await chart.filter(isExploitChecked, { type: "node" });
// finish with a layout
chart.layout("structural");
// re-enable checkboxes now that filtering is complete
allCheckboxes.forEach((checkbox) => {
checkbox.disabled = false;
});
}
function findSelection(checkboxes) {
// disable the legend to prevent asynchronous calls
checkboxes.forEach((checkbox) => {
checkbox.disabled = true;
});
// find checked boxes and put into a new array
const checkedBoxes = [...checkboxes]
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.id);
filterItems(checkedBoxes, checkboxes);
}
function initialiseInteractions() {
// Set up event listener for the legend
const legendCheckboxes = document.querySelectorAll('input[type="checkbox"]');
legendCheckboxes.forEach((checkbox) => {
checkbox.addEventListener("click", () => findSelection(legendCheckboxes));
});
}
async function loadKeyLines() {
const options = {
logo: { u: "/images/Logo.png" },
handMode: true,
};
chart = await KeyLines.create({ container: "klchart", options });
chart.load(data);
chart.layout("structural");
// set up user interactions
initialiseInteractions();
}
window.addEventListener("DOMContentLoaded", loadKeyLines);
<!DOCTYPE html>
<html lang="en" style="background-color: #2d383f;">
<head>
<meta charset="UTF-8">
<title>Filtering Basics</title>
<link rel="stylesheet" type="text/css" href="/css/keylines.css">
<link rel="stylesheet" type="text/css" href="/css/minimalsdk.css">
<link rel="stylesheet" type="text/css" href="/css/sdk-layout.css">
<link rel="stylesheet" type="text/css" href="/css/demo.css">
<link rel="stylesheet" type="text/css" href="/exploitkits.css">
<script src="/vendor/jquery.js" defer type="text/javascript"></script>
<script id="keylines" src="/public/keylines.umd.cjs" defer type="text/javascript"></script>
<script src="/exploitkits.js" crossorigin="use-credentials" defer type="module"></script>
</head>
<body>
<div class="chart-wrapper demo-cols">
<div class="tab-content-panel flex1" id="lhs" data-tab-group="rhs">
<div class="toggle-content is-visible" id="lhsVisual" style="width:100%; height: 100%;">
<div class="klchart" id="klchart">
</div>
</div>
</div>
<div class="rhs citext closed" id="demorhscontent">
<div class="title-bar">
<svg viewBox="0 0 360 60" style="max-width: 360px; max-height: 60px; font-size: 24px; font-family: Raleway; flex: 1;">
<text x="0" y="38" style="width: 100%;">Filtering Basics</text>
</svg>
</div>
<div class="tab-content-panel" data-tab-group="rhs">
<div class="toggle-content is-visible tabcontent" id="controlsTab">
<p>Explore the relation between malware families and the vulnerabilities they exploit.</p>
<form autocomplete="off" onsubmit="return false" id="rhsForm">
<div class="cicontent">
<fieldset>
<div class="reduce-bottom-margin">
<legend>Filter by technology</legend>
<p>Select different technologies to highlight their relations to exploit kits.</p>
<div class="row-fluid">
<dl class="half-span">
<h5>Browsers & Plug-ins</h5>
<label class="checkbox">
<input name="exploitKits" id="firefox" type="checkbox" checked>
<div class="firefox">
<dt> </dt>
<dd>Mozilla Firefox</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="chrome" checked>
<div class="chrome">
<dt> </dt>
<dd>Google Chrome</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="ie" checked>
<div class="ie">
<dt> </dt>
<dd>Internet Explorer</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="flash" checked>
<div class="flash">
<dt> </dt>
<dd>Adobe Flash</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="silverlight" checked>
<div class="silverlight">
<dt> </dt>
<dd>Microsoft Silverlight</dd>
</div>
</label>
</dl>
<dl class="half-span">
<h5>Other</h5>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="java" checked>
<div class="java">
<dt> </dt>
<dd>Oracle Java</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="windows" checked>
<div class="windows">
<dt> </dt>
<dd>Microsoft Windows</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="php" checked>
<div class="php">
<dt> </dt>
<dd>PHP Language</dd>
</div>
</label>
<label class="checkbox">
<input name="exploitKits" type="checkbox" id="adobe" value="False" checked>
<div class="adobe">
<dt> </dt>
<dd>Adobe PDF</dd>
</div>
</label>
</dl>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="moreParent">
<div id="moreContainer">
</div>
</div>
<div id="lazyScripts">
</div>
</body>
</html>.toggle-content::-webkit-scrollbar {
display: none;
}
.toggle-content {
scrollbar-width: none;
-ms-overflow-style: none;
}
dl {
margin-bottom:50px;
}
dl dt {
color:#fff;
float:left;
font-weight:bold;
margin-left:0px;
margin-right:10px;
padding:3px;
width:22px;
height:22px;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
line-height: 12px;
}
dl dd {
margin:2px 0;
padding:5px 0;
line-height: 12px;
font-size: 12px;
}
/* Legend Colours */
.firefox dt {
background-color: #ff7f00;
}
.chrome dt {
background-color: #4daf4a;
}
.ie dt {
background-color: #1f78b4;
}
.flash dt {
background-color: #e41a1c;
}
.silverlight dt {
background-color: #a6cee3;
}
.java dt {
background-color: #FFD903;
}
.windows dt {
background-color: #999999;
}
.php dt {
background-color: #a65628;
}
.adobe dt {
background-color: #f781bf;
}
.highlight {
font-weight: bold;
}
#htmlModal {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
#tooltip.popover {
max-width: 500px;
}
.reduce-bottom-margin {
margin-bottom: -55px;
}
.tab-content-panel:-webkit-scrollbar {
display: none;
}
.increase-bottom-margin {
margin-bottom: 25px;
}
dl input {
margin-top: 5px;
}
@media (max-width: 979px) {
dl dt {
margin-left: -4px;
margin-right: 3px;
}
}
@media (max-width: 767px) {
label dd {
max-width: 79.5px;
margin-top: -5px;
}
.half-span h5 {
height: 40px;
}
}
Loading source