create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
739 lines (688 loc) • 28.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Interactive visualization of multi-dimensional data with HTML tooltips." />
<meta itemprop="description" content="Interactive visualization of multi-dimensional data with HTML tooltips." />
<meta property="og:description" content="Interactive visualization of multi-dimensional data with HTML tooltips." />
<meta name="twitter:description" content="Interactive visualization of multi-dimensional data with HTML tooltips." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Data Visualization of Multi-Dimensional Data using Nodes and ToolTips" />
<meta property="og:title" content="Data Visualization of Multi-Dimensional Data using Nodes and ToolTips" />
<meta name="twitter:title" content="Data Visualization of Multi-Dimensional Data using Nodes and ToolTips" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/datavisualization.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/datavisualization.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/datavisualization.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/dataVisualization.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/dataVisualization.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Data Visualization of Multi-Dimensional Data using Nodes and ToolTips | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<!--
The div needs an explicit size or else we won't see anything.
Lets also add a border to help see the edges.
-->
<style type="text/css">
#infoBoxHolder {
z-index: 300;
position: absolute;
left: 5px;
}
#infoBox {
border: 1px solid #999;
padding: 8px;
background-color: whitesmoke;
opacity: 0.9;
position: relative;
width: 170px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
}
/* this is known as the "clearfix" hack to allow
floated objects to add to the height of a div */
#infoBox:after, #controls::after {
visibility: hidden;
display: block;
font-size: 0;
content: ' ';
clear: both;
height: 0;
}
div.infoTitle {
width: 100px;
font-weight: normal;
color: #787878;
float: left;
margin-left: 4px;
}
div.infoValues {
width: 30px;
text-align: right;
float: right;
}
label:hover,
label:focus {
background: #cedff2;
}
</style>
<script src="../extensions/Figures.js"></script>
<script id="code">
var myLocation = {
// this controls the data properties used by data binding conversions
x: 'sepalLength',
y: 'sepalWidth'
};
var lastStroked = null; // this remembers the last highlight Shape
function init() {
const myToolTip = new go.HTMLInfo({
show: showToolTip
// do nothing on hide: This tooltip doesn't hide unless the mouse leaves the diagram
});
myDiagram = new go.Diagram('myDiagramDiv', {
'animationManager.initialAnimationStyle': go.AnimationStyle.AnimateLocations,
contentAlignment: go.Spot.Center, // content is always centered in the viewport
autoScale: go.AutoScale.Uniform, // scale always has all content fitting in the viewport
'toolManager.hoverDelay': 10, // how quickly tooltips are shown
isReadOnly: true, // don't let users modify anything
mouseOver: doMouseOver, // this event handler is defined below
click: doMouseOver // this event handler is defined below
});
// define a simple Node template
myDiagram.nodeTemplate =
new go.Node('Auto', {
selectable: false,
toolTip: myToolTip
})
//.trigger('position', null, go.TriggerStart.Bundled)
.bind('location', '',
data => new go.Point(data[myLocation.x] * 200, data[myLocation.y] * 200))
.add(
new go.Shape('Hexagon', {
name: 'SHAPE',
width: 20,
height: 20,
strokeWidth: 4,
stroke: null
})
.bind('fill', 'species', name => {
switch (name) {
case 'Iris-setosa':
return 'rgba(240, 120, 50, .6)';
case 'Iris-versicolor':
return 'rgba(240, 230, 120, .6)';
case 'Iris-virginica':
return 'rgba(125, 200, 120, .6)';
}
return 'black';
})
);
// This is the fundamental data set, taken from:
// https://en.wikipedia.org/wiki/Iris_flower_data_set
var irisData = [
[5.1, 3.5, 1.4, 0.2, 'Iris-setosa'],
[4.9, 3.0, 1.4, 0.2, 'Iris-setosa'],
[4.7, 3.2, 1.3, 0.2, 'Iris-setosa'],
[4.6, 3.1, 1.5, 0.2, 'Iris-setosa'],
[5.0, 3.6, 1.4, 0.2, 'Iris-setosa'],
[5.4, 3.9, 1.7, 0.4, 'Iris-setosa'],
[4.6, 3.4, 1.4, 0.3, 'Iris-setosa'],
[5.0, 3.4, 1.5, 0.2, 'Iris-setosa'],
[4.4, 2.9, 1.4, 0.2, 'Iris-setosa'],
[4.9, 3.1, 1.5, 0.1, 'Iris-setosa'],
[5.4, 3.7, 1.5, 0.2, 'Iris-setosa'],
[4.8, 3.4, 1.6, 0.2, 'Iris-setosa'],
[4.8, 3.0, 1.4, 0.1, 'Iris-setosa'],
[4.3, 3.0, 1.1, 0.1, 'Iris-setosa'],
[5.8, 4.0, 1.2, 0.2, 'Iris-setosa'],
[5.7, 4.4, 1.5, 0.4, 'Iris-setosa'],
[5.4, 3.9, 1.3, 0.4, 'Iris-setosa'],
[5.1, 3.5, 1.4, 0.3, 'Iris-setosa'],
[5.7, 3.8, 1.7, 0.3, 'Iris-setosa'],
[5.1, 3.8, 1.5, 0.3, 'Iris-setosa'],
[5.4, 3.4, 1.7, 0.2, 'Iris-setosa'],
[5.1, 3.7, 1.5, 0.4, 'Iris-setosa'],
[4.6, 3.6, 1.0, 0.2, 'Iris-setosa'],
[5.1, 3.3, 1.7, 0.5, 'Iris-setosa'],
[4.8, 3.4, 1.9, 0.2, 'Iris-setosa'],
[5.0, 3.0, 1.6, 0.2, 'Iris-setosa'],
[5.0, 3.4, 1.6, 0.4, 'Iris-setosa'],
[5.2, 3.5, 1.5, 0.2, 'Iris-setosa'],
[5.2, 3.4, 1.4, 0.2, 'Iris-setosa'],
[4.7, 3.2, 1.6, 0.2, 'Iris-setosa'],
[4.8, 3.1, 1.6, 0.2, 'Iris-setosa'],
[5.4, 3.4, 1.5, 0.4, 'Iris-setosa'],
[5.2, 4.1, 1.5, 0.1, 'Iris-setosa'],
[5.5, 4.2, 1.4, 0.2, 'Iris-setosa'],
[4.9, 3.1, 1.5, 0.2, 'Iris-setosa'],
[5.0, 3.2, 1.2, 0.2, 'Iris-setosa'],
[5.5, 3.5, 1.3, 0.2, 'Iris-setosa'],
[4.9, 3.6, 1.4, 0.1, 'Iris-setosa'],
[4.4, 3.0, 1.3, 0.2, 'Iris-setosa'],
[5.1, 3.4, 1.5, 0.2, 'Iris-setosa'],
[5.0, 3.5, 1.3, 0.3, 'Iris-setosa'],
[4.5, 2.3, 1.3, 0.3, 'Iris-setosa'],
[4.4, 3.2, 1.3, 0.2, 'Iris-setosa'],
[5.0, 3.5, 1.6, 0.6, 'Iris-setosa'],
[5.1, 3.8, 1.9, 0.4, 'Iris-setosa'],
[4.8, 3.0, 1.4, 0.3, 'Iris-setosa'],
[5.1, 3.8, 1.6, 0.2, 'Iris-setosa'],
[4.6, 3.2, 1.4, 0.2, 'Iris-setosa'],
[5.3, 3.7, 1.5, 0.2, 'Iris-setosa'],
[5.0, 3.3, 1.4, 0.2, 'Iris-setosa'],
[7.0, 3.2, 4.7, 1.4, 'Iris-versicolor'],
[6.4, 3.2, 4.5, 1.5, 'Iris-versicolor'],
[6.9, 3.1, 4.9, 1.5, 'Iris-versicolor'],
[5.5, 2.3, 4.0, 1.3, 'Iris-versicolor'],
[6.5, 2.8, 4.6, 1.5, 'Iris-versicolor'],
[5.7, 2.8, 4.5, 1.3, 'Iris-versicolor'],
[6.3, 3.3, 4.7, 1.6, 'Iris-versicolor'],
[4.9, 2.4, 3.3, 1.0, 'Iris-versicolor'],
[6.6, 2.9, 4.6, 1.3, 'Iris-versicolor'],
[5.2, 2.7, 3.9, 1.4, 'Iris-versicolor'],
[5.0, 2.0, 3.5, 1.0, 'Iris-versicolor'],
[5.9, 3.0, 4.2, 1.5, 'Iris-versicolor'],
[6.0, 2.2, 4.0, 1.0, 'Iris-versicolor'],
[6.1, 2.9, 4.7, 1.4, 'Iris-versicolor'],
[5.6, 2.9, 3.6, 1.3, 'Iris-versicolor'],
[6.7, 3.1, 4.4, 1.4, 'Iris-versicolor'],
[5.6, 3.0, 4.5, 1.5, 'Iris-versicolor'],
[5.8, 2.7, 4.1, 1.0, 'Iris-versicolor'],
[6.2, 2.2, 4.5, 1.5, 'Iris-versicolor'],
[5.6, 2.5, 3.9, 1.1, 'Iris-versicolor'],
[5.9, 3.2, 4.8, 1.8, 'Iris-versicolor'],
[6.1, 2.8, 4.0, 1.3, 'Iris-versicolor'],
[6.3, 2.5, 4.9, 1.5, 'Iris-versicolor'],
[6.1, 2.8, 4.7, 1.2, 'Iris-versicolor'],
[6.4, 2.9, 4.3, 1.3, 'Iris-versicolor'],
[6.6, 3.0, 4.4, 1.4, 'Iris-versicolor'],
[6.8, 2.8, 4.8, 1.4, 'Iris-versicolor'],
[6.7, 3.0, 5.0, 1.7, 'Iris-versicolor'],
[6.0, 2.9, 4.5, 1.5, 'Iris-versicolor'],
[5.7, 2.6, 3.5, 1.0, 'Iris-versicolor'],
[5.5, 2.4, 3.8, 1.1, 'Iris-versicolor'],
[5.5, 2.4, 3.7, 1.0, 'Iris-versicolor'],
[5.8, 2.7, 3.9, 1.2, 'Iris-versicolor'],
[6.0, 2.7, 5.1, 1.6, 'Iris-versicolor'],
[5.4, 3.0, 4.5, 1.5, 'Iris-versicolor'],
[6.0, 3.4, 4.5, 1.6, 'Iris-versicolor'],
[6.7, 3.1, 4.7, 1.5, 'Iris-versicolor'],
[6.3, 2.3, 4.4, 1.3, 'Iris-versicolor'],
[5.6, 3.0, 4.1, 1.3, 'Iris-versicolor'],
[5.5, 2.5, 4.0, 1.3, 'Iris-versicolor'],
[5.5, 2.6, 4.4, 1.2, 'Iris-versicolor'],
[6.1, 3.0, 4.6, 1.4, 'Iris-versicolor'],
[5.8, 2.6, 4.0, 1.2, 'Iris-versicolor'],
[5.0, 2.3, 3.3, 1.0, 'Iris-versicolor'],
[5.6, 2.7, 4.2, 1.3, 'Iris-versicolor'],
[5.7, 3.0, 4.2, 1.2, 'Iris-versicolor'],
[5.7, 2.9, 4.2, 1.3, 'Iris-versicolor'],
[6.2, 2.9, 4.3, 1.3, 'Iris-versicolor'],
[5.1, 2.5, 3.0, 1.1, 'Iris-versicolor'],
[5.7, 2.8, 4.1, 1.3, 'Iris-versicolor'],
[6.3, 3.3, 6.0, 2.5, 'Iris-virginica'],
[5.8, 2.7, 5.1, 1.9, 'Iris-virginica'],
[7.1, 3.0, 5.9, 2.1, 'Iris-virginica'],
[6.3, 2.9, 5.6, 1.8, 'Iris-virginica'],
[6.5, 3.0, 5.8, 2.2, 'Iris-virginica'],
[7.6, 3.0, 6.6, 2.1, 'Iris-virginica'],
[4.9, 2.5, 4.5, 1.7, 'Iris-virginica'],
[7.3, 2.9, 6.3, 1.8, 'Iris-virginica'],
[6.7, 2.5, 5.8, 1.8, 'Iris-virginica'],
[7.2, 3.6, 6.1, 2.5, 'Iris-virginica'],
[6.5, 3.2, 5.1, 2.0, 'Iris-virginica'],
[6.4, 2.7, 5.3, 1.9, 'Iris-virginica'],
[6.8, 3.0, 5.5, 2.1, 'Iris-virginica'],
[5.7, 2.5, 5.0, 2.0, 'Iris-virginica'],
[5.8, 2.8, 5.1, 2.4, 'Iris-virginica'],
[6.4, 3.2, 5.3, 2.3, 'Iris-virginica'],
[6.5, 3.0, 5.5, 1.8, 'Iris-virginica'],
[7.7, 3.8, 6.7, 2.2, 'Iris-virginica'],
[7.7, 2.6, 6.9, 2.3, 'Iris-virginica'],
[6.0, 2.2, 5.0, 1.5, 'Iris-virginica'],
[6.9, 3.2, 5.7, 2.3, 'Iris-virginica'],
[5.6, 2.8, 4.9, 2.0, 'Iris-virginica'],
[7.7, 2.8, 6.7, 2.0, 'Iris-virginica'],
[6.3, 2.7, 4.9, 1.8, 'Iris-virginica'],
[6.7, 3.3, 5.7, 2.1, 'Iris-virginica'],
[7.2, 3.2, 6.0, 1.8, 'Iris-virginica'],
[6.2, 2.8, 4.8, 1.8, 'Iris-virginica'],
[6.1, 3.0, 4.9, 1.8, 'Iris-virginica'],
[6.4, 2.8, 5.6, 2.1, 'Iris-virginica'],
[7.2, 3.0, 5.8, 1.6, 'Iris-virginica'],
[7.4, 2.8, 6.1, 1.9, 'Iris-virginica'],
[7.9, 3.8, 6.4, 2.0, 'Iris-virginica'],
[6.4, 2.8, 5.6, 2.2, 'Iris-virginica'],
[6.3, 2.8, 5.1, 1.5, 'Iris-virginica'],
[6.1, 2.6, 5.6, 1.4, 'Iris-virginica'],
[7.7, 3.0, 6.1, 2.3, 'Iris-virginica'],
[6.3, 3.4, 5.6, 2.4, 'Iris-virginica'],
[6.4, 3.1, 5.5, 1.8, 'Iris-virginica'],
[6.0, 3.0, 4.8, 1.8, 'Iris-virginica'],
[6.9, 3.1, 5.4, 2.1, 'Iris-virginica'],
[6.7, 3.1, 5.6, 2.4, 'Iris-virginica'],
[6.9, 3.1, 5.1, 2.3, 'Iris-virginica'],
[5.8, 2.7, 5.1, 1.9, 'Iris-virginica'],
[6.8, 3.2, 5.9, 2.3, 'Iris-virginica'],
[6.7, 3.3, 5.7, 2.5, 'Iris-virginica'],
[6.7, 3.0, 5.2, 2.3, 'Iris-virginica'],
[6.3, 2.5, 5.0, 1.9, 'Iris-virginica'],
[6.5, 3.0, 5.2, 2.0, 'Iris-virginica'],
[6.2, 3.4, 5.4, 2.3, 'Iris-virginica'],
[5.9, 3.0, 5.1, 1.8, 'Iris-virginica']
];
// now convert that data into an Array of JavaScript Objects,
// to be used as the Model.nodeDataArray
var array = [];
for (var i = 0; i < irisData.length; i++) {
var line = irisData[i];
var data = {
sepalLength: line[0],
sepalWidth: line[1],
petalLength: line[2],
petalWidth: line[3],
species: line[4]
};
array.push(data);
}
// create the Model for the Diagram to display
myDiagram.model = new go.Model(array);
// Called when the mouse is over the diagram's background
function doMouseOver(e) {
if (performance.now() - e.timestamp > 200) return; // ignore old events
if (e === undefined) e = myDiagram.lastInput;
var doc = e.documentPoint;
// find all Nodes that are within 100 units
var list = myDiagram.findObjectsNear(
doc,
100,
null,
x => x instanceof go.Node
);
// now find the one that is closest to e.documentPoint
var closest = null;
var closestDist = 999999999;
list.each(node => {
var dist = doc.distanceSquaredPoint(
node.getDocumentPoint(go.Spot.Center)
);
if (dist < closestDist) {
closestDist = dist;
closest = node;
}
});
showToolTip(closest, myDiagram);
}
// Called with a Node (or null) that the mouse is over or near
function showToolTip(obj, diagram) {
if (obj !== null) {
var node = obj.part;
var e = diagram.lastInput;
var shape = node.findObject('SHAPE');
shape.stroke = 'white';
if (lastStroked !== null && lastStroked !== shape) {
lastStroked.stroke = null;
}
lastStroked = shape;
updateInfoBox(e.viewPoint, node.data);
} else {
if (lastStroked !== null) lastStroked.stroke = null;
lastStroked = null;
document.getElementById('infoBoxHolder').innerHTML = '';
}
}
// Make sure the infoBox is momentarily hidden if the user tries to mouse over it
var infoBoxH = document.getElementById('infoBoxHolder');
infoBoxH.addEventListener('mousemove',
() => {
var box = document.getElementById('infoBoxHolder');
box.style.left = parseInt(box.style.left) + 'px';
box.style.top = parseInt(box.style.top) + 30 + 'px';
},
false
);
var diagramDiv = document.getElementById('myDiagramDiv');
// Make sure the infoBox is hidden when the mouse is not over the Diagram
diagramDiv.addEventListener('mouseout',
e => {
if (lastStroked !== null) lastStroked.stroke = null;
lastStroked = null;
var infoBox = document.getElementById('infoBox');
var elem = document.elementFromPoint(e.clientX, e.clientY);
if (
elem !== null &&
(elem === infoBox || elem.parentNode === infoBox)
) {
var box = document.getElementById('infoBoxHolder');
box.style.left = parseInt(box.style.left) + 'px';
box.style.top = parseInt(box.style.top) + 30 + 'px';
} else {
var box = document.getElementById('infoBoxHolder');
box.innerHTML = '';
}
},
false
);
} // end init
// This function is called to update the tooltip information
// depending on the bound data of the Node that is closest to the pointer.
function updateInfoBox(mousePt, data) {
const box = document.getElementById('infoBoxHolder');
box.innerHTML = '';
const infobox = document.createElement('div');
infobox.id = 'infoBox';
box.appendChild(infobox);
for (let i = 0; i < 9; i++) {
const child = document.createElement('div');
switch (i) {
case 0:
child.textContent = data.species;
break;
case 1:
child.className = 'infoTitle';
child.textContent = 'Sepal Length';
break;
case 2:
child.className = 'infoValues';
child.textContent = data.sepalLength;
break;
case 3:
child.className = 'infoTitle';
child.textContent = 'Sepal Width';
break;
case 4:
child.className = 'infoValues';
child.textContent = data.sepalWidth;
break;
case 5:
child.className = 'infoTitle';
child.textContent = 'Petal Length';
break;
case 6:
child.className = 'infoValues';
child.textContent = data.petalLength;
break;
case 7:
child.className = 'infoTitle';
child.textContent = 'Petal Width';
break;
case 8:
child.className = 'infoValues';
child.textContent = data.petalWidth;
break;
}
infobox.appendChild(child);
}
box.style.left = mousePt.x + 30 + 'px';
box.style.top = mousePt.y + 20 + 'px';
}
// This function is called which a radio button is pressed.
// It changes the value of a variable that the node template's location conversion function uses.
// It then updates all target bindings, causing all node locations to change.
function changeAxes(e) {
var value = e.value;
if (e.name === 'X') {
myLocation.x = value;
} else {
myLocation.y = value;
}
myDiagram.startTransaction('updateBindings');
myDiagram.updateAllTargetBindings();
myDiagram.commitTransaction('updateBindings');
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="display: inline-block; position: relative">
<!--The DIV for the Diagram needs an explicit size or else we won't see anything.
Also add a border to help see the edges. -->
<div
id="myDiagramDiv"
style="
background-color: #3d3d3d;
border: solid 1px black;
width: 500px;
height: 500px;
float: left;
margin-right: 10px;
"></div>
<!-- This sibling of the Diagram provides information when the mouse is near a Diagram Node -->
<div id="infoBoxHolder">
<!-- Initially Empty, it is populated when updateInfoBox is called -->
</div>
<div id="controls">
<div style="border: solid 1px gray; float: left; padding: 2px; margin-right: 10px; margin-bottom: 10px;">
<p style="text-align: center">X-axis</p>
<hr />
<input
type="radio"
name="X"
onclick="changeAxes(this)"
value="sepalLength"
id="SLx"
checked />
<label for="SLx">Sepal Length</label><br />
<input
type="radio"
name="X"
onclick="changeAxes(this)"
value="sepalWidth"
id="SWx" />
<label for="SWx">Sepal Width</label><br />
<input
type="radio"
name="X"
onclick="changeAxes(this)"
value="petalLength"
id="PLx" />
<label for="PLx">Petal Length</label><br />
<input
type="radio"
name="X"
onclick="changeAxes(this)"
value="petalWidth"
id="PWx" />
<label for="PWx">Petal Width</label><br />
</div>
<div
style="
border: solid 1px gray;
float: left;
padding: 2px;
">
<p style="text-align: center">Y-axis</p>
<hr />
<input
type="radio"
name="Y"
onclick="changeAxes(this)"
value="sepalLength"
id="SLy" />
<label for="SLy">Sepal Length</label><br />
<input
type="radio"
name="Y"
onclick="changeAxes(this)"
value="sepalWidth"
id="SWy"
checked />
<label for="SWy">Sepal Width</label><br />
<input
type="radio"
name="Y"
onclick="changeAxes(this)"
value="petalLength"
id="PLy" />
<label for="PLy">Petal Length</label><br />
<input
type="radio"
name="Y"
onclick="changeAxes(this)"
value="petalWidth"
id="PWy" />
<label for="PWy">Petal Width</label><br />
</div>
</div>
<div id="description">
<p>
This sample gives an example of a Diagram interacting with other HTML
elements on the page.
</p>
<p>
As the mouse moves over the diagram, a formatted HTML DIV element
displays information about the nearest Node.
</p>
<p>
The data displayed is from the
<a href="https://en.wikipedia.org/wiki/Iris_flower_data_set"
>Iris flower data set</a
>, describing the variations in dimensions of three related flower
species.
</p>
</div>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>ToolTips</h4>
<p>
A tooltip is an <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shown when the mouse hovers over an object that has its <a href="../api/symbols/GraphObject.html#toolTip" target="api">GraphObject.toolTip</a> set.
The tooltip part is bound to the same data as the part itself.
</p>
<p>
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a href="../api/symbols/TextBlock.html" target="api">TextBlock</a> or a Panel of TextBlocks and other objects.
Each "ToolTip" is just an "Auto" Panel <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shadowed, and where the border is a rectangular <a href="../api/symbols/Shape.html" target="api">Shape</a> with a light gray fill.
However you can implement the tooltip as any arbitrarily complicated Adornment.
</p>
<p>
More information can be found in the <a href="../intro/tooltips.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tooltips">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>HTML Interaction</h4>
<p>
GoJS Diagrams can be used alongside other HTML elements in a webapp.
For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the <a href="../api/symbols/HTMLInfo.html" target="api">HTMLInfo</a> class.
</p>
<p>
More information can be found in the <a href="../intro/HTMLinteraction.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#html">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Animation</h4>
<p>
<b>GoJS</b> offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
</p>
<p>
The <a href="../api/symbols/Diagram.html#animationManager" target="api">Diagram.animationManager</a> handles animations within a <a href="../api/symbols/Diagram.html" target="api">Diagram</a>.
The <a href="../api/symbols/AnimationManager.html" target="api">AnimationManager</a> automatically sets up and dispatches default animations, and has properties to customize and disable them.
Custom animations are possible by creating instances of <a href="../api/symbols/Animation.html" target="api">Animation</a> or <a href="../api/symbols/AnimationTrigger.html" target="api">AnimationTrigger</a>.
More information can be found in the <a href="../intro/animation.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#animation">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>