<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Vision Semantic Graph</title>
<style>
:root{
--color1: #f94144;
--color2: #f3722c;
--color3: #f8961e;
/* --color4: #f9844a; */
--color5: #f9c74f;
--color6: #90be6d;
--color7: #43aa8b;
--color8: #4d908e;
--color9: #577590;
--color10: #277da1;
--hover-color: var(--color1);
--selected-color: var(--color1);
--selected-color: var(--color1);
}
body {
margin: 0;
overflow: hidden;
background: #333;
font-family: sans-serif;
}
svg {
cursor: grab;
font-family: sans-serif;
}
svg.dragging {
cursor: grabbing;
}
svg .links line{
stroke: lightgray;
stroke-width: 1;
}
.links text{
/* display:none; */
font-size:5pt;
text-anchor: middle;
fill: whitesmoke;
}
.node text{
text-anchor: middle;
}
.node circle{
fill: white;
}
.node:hover{
cursor: pointer;
}
.node:hover circle{
stroke: var(--hover-color);
stroke-width: 5px;
}
.node.selected circle{
stroke: var(--selected-color);
stroke-width: 5px;
}
.node.Person circle {
fill: lightgreen
}
.node.Technology circle {
fill: lightcoral;
}
.node.Deployment circle {
fill: lightblue;
}
.node.Institution circle {
fill: lightgoldenrodyellow
}
.node.Dataset circle {
fill: plum
}
/* .node.Person circle {
fill: var(--color2)
}
.node.Technology circle {
fill: var(--color3);
}
.node.Deployment circle {
fill: var(--color5);
}
.node.Institution circle {
fill: var(--color6)
}
.node.Dataset circle {
fill: var(--color7)
} */
#nodeInfo{
position: fixed;
display:block;
right:20px;
bottom:20px;
background:white;
padding: 10px;
border: solid 1px #ccc;
}
#nodeInfo.hidden{
display:none;
}
#nodeInfo h2{
margin: 0;
padding: 0;
}
#nodeInfo iframe{
width: 50vw;
height: calc(100vh - 40px - 20px - 30px);
}
#closeInfo{
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
}
#closeInfo:hover{
color: var(--hover-color);
}
a, a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<svg id='graph'>
<defs>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="lightgray"><path d="M0,-3L8,0L0,3"></path></marker>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>
</defs>
</svg>
<div id="nodeInfo" class='hidden'>
<h2 class='nodeTitle'><a class='nodeHref' target="_blank"></a></h2>
<div id='closeInfo'>×</div>
<iframe class='nodeContents'></iframe>
</div>
</body>
<!-- <script src="https://d3js.org/d3.v6.min.js"></script> -->
<script src="d3.v6.js"></script>
<script src="graph.js"></script>
</html>