Skip to content

Instantly share code, notes, and snippets.

@usernamenumber

usernamenumber/index.html

Last active April 13, 2022 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save usernamenumber/2a09a21207f0552d8ec1 to your computer and use it in GitHub Desktop.
Save usernamenumber/2a09a21207f0552d8ec1 to your computer and use it in GitHub Desktop.
Download ZIP
JIT tree demo
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
Adapted from http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spacetree - SpaceTree with on-demand nodes</title>
<!-- CSS Files -->
<link type="text/css" href="//philogb.github.io/jit/static/v20/Jit/Examples/css/base.css" rel="stylesheet" />
<link type="text/css" href="//philogb.github.io/jit/static/v20/Jit/Examples/css/Spacetree.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="//philogb.github.io/jit/static/v20/Jit/jit.js"></script>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
.node_tooltip {
height: 200px;
border-radius: 10px;
padding: 2px;
text-align: left;
}
.notice {
padding: 10px;
font-style: italic;
}
</style>
<!-- Example File -->
<script language="javascript" type="text/javascript">
var labelType, useGradients, nativeTextSupport, animate;
(function() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
textSupport = nativeCanvasSupport
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
//I'm setting this based on the fact that ExCanvas provides text support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
}
};
function init() {
// The JSON here would need to be adapted to a swagmap (or vice-versa), of course...
var json = {
id: "node0",
name: "Ktouch",
data: {
instructions: "Arbitrary instructions, <a href='http://tunapanda.org'>links</a>, or whatever"
},
children: [{
id: "node01",
name: "Complete Lecture 1",
data: {},
children: [{
id: "node011",
name: "Complete Lecture 1, Level 1",
data: {},
children: [{
id: "node0111",
name: "Bonus: Perfect score!",
data: {},
}],
},{
id: "node012",
name: "Complete Lecture 1, Level 2",
data: {},
children: [{
id: "node0121",
name: "Bonus: Perfect score!",
data: {},
}],
},{
id: "node013",
name: "Complete Lecture 1, Level 3",
data: {},
children: [{
id: "node0111",
name: "Bonus: Perfect score!",
data: {},
}],
}],
}, {
id: "node02",
name: "Complete Lecture 2",
data: {},
children: [{
id: "node021",
name: "Complete Lecture 2, Level 1",
data: {},
children: [{
id: "node0221",
name: "Bonus: Perfect score!",
data: {},
}],
},{
id: "node022",
name: "Complete Lecture 2, Level 2",
data: {},
children: [{
id: "node0221",
name: "Bonus: Perfect score!",
data: {},
}],
},{
id: "node023",
name: "Complete Lecture 2, Level 3",
data: {},
children: [{
id: "node0231",
name: "Bonus: Perfect score!",
data: {},
}],
}],
}],
};
var st = new $jit.ST({
//id of viz container element
injectInto: 'infovis',
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//enable panning
Navigation: {
enable:true,
panning:true
},
offsetX: 200,
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 60,
width: 60,
//autoHeight: true,
//autoWidth: true,
type: 'rectangle',
color: '#aaa',
overridable: true
},
Edge: {
type: 'bezier',
overridable: true
},
onBeforeCompute: function(node){
Log.write(node.name);
},
onAfterCompute: function(){
//Log.write("done");
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function(){
st.onClick(node.id);
};
label.onmouseover = function() {
console.log("Mouse over " + node.name);
console.log(typeof(node.data.instructions));
// Remove old tooltips, just in case...
$(".node_tooltip").each(function() {
if ($(this).attr("id") == "label-" + label.id) {
return;
}
$(this).mouseout();
});
// Display tooltip
var pos = $(label).position();
var tooltip = $("<div>")
.attr("id", "label-" + label.id)
.attr("class", "node_tooltip")
.css({
position: "absolute",
top: pos.top + 30,
left: pos.left- 30,
background: "white",
color: "black"
})
.mouseover(function() {
// Set a flag so that mouseout on the parent label
// no longer closes this
$(this).data("claimed",true);
})
.mouseout(function() {
$(this).fadeOut({
complete: function() {
this.remove();
}
});
})
.html("<h3>Instructions for " + node.name + "</h3>" + (typeof(node.data.instructions) === "undefined" ? "Everything but the root node has this default text for now, but you get the idea..." : node.data.instructions))
.hide()
.appendTo($("#infovis")
).fadeIn();
}
//label.onmouseout = function() {
// var tooltip = $("#label-" + label.id);
// if ( ! tooltip.data("claimed") ) {
// tooltip.mouseout();
// }
//}
//set label styles
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '#333';
style.fontSize = '0.8em';
style.textAlign= 'center';
style.paddingTop = '3px';
},
//This method is called right before plotting
//a node. It's useful for changing an individual node
//style properties before plotting it.
//The data properties prefixed with a dollar
//sign will override the global node style properties.
onBeforePlotNode: function(node){
//add some color to the nodes in the path between the
//root node and the selected node.
if (node.selected) {
node.data.$color = "#ff7";
}
else {
delete node.data.$color;
//if the node belongs to the last plotted level
if(!node.anySubnode("exist")) {
//count children number
var count = 0;
node.eachSubnode(function(n) { count++; });
//assign a node color based on
//how many children it has
node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
}
}
},
//This method is called right before plotting
//an edge. It's useful for changing an individual edge
//style properties before plotting it.
//Edge data proprties prefixed with a dollar sign will
//override the Edge global style properties.
onBeforePlotLine: function(adj){
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$color = "#eed";
adj.data.$lineWidth = 3;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});
st.loadJSON(json);
st.compute();
st.plot();
//st.geom.translate(new $jit.Complex(-300, 0), "current");
st.onClick(st.root);
console.log("done");
}
</script>
</head>
<body onload="init();">
<h2>What if a swagmap looked like this?</h2>
<div class="notice">Click nodes to expand, mouse over for details</div>
<div class="notice">Based on <a href="http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html">this demo</a> of the <a href="http://philogb.github.io/jit/">JIT</a> toolkit</div>
<div id="container">
<div id="center-container">
<div id="infovis"></div>
<div id="log">LOG</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment