removed extraneous files
This commit is contained in:
Connor Turland
parent
00df5539d0
commit
1144c4c145
|
|
@ -1,61 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>AreaChart - Area Chart Example</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/AreaChart.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Area Chart Example
|
||||
</h4>
|
||||
|
||||
A static Area Chart example with gradients that displays tooltips when hovering the stacks.<br /><br />
|
||||
Left-click a Stack to apply a filter to it.<br /><br />
|
||||
Right-click to restore all stacks.<br /><br />
|
||||
Click the Update button to update the JSON data.
|
||||
|
||||
</div>
|
||||
<ul id="id-list"></ul>
|
||||
<a id="update" href="#" class="theme button white">Update Data</a>
|
||||
<a id="restore" href="#" class="theme button white">Remove Filter</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
'label': ['label A', 'label B', 'label C', 'label D'],
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [20, 40, 15, 5]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 10, 45, 10]
|
||||
},
|
||||
{
|
||||
'label': 'date E',
|
||||
'values': [38, 20, 35, 17]
|
||||
},
|
||||
{
|
||||
'label': 'date F',
|
||||
'values': [58, 10, 35, 32]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 60, 34, 38]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 25, 40]
|
||||
}]
|
||||
|
||||
};
|
||||
var json2 = {
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [10, 40, 15, 7]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 40, 45, 9]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 30, 34, 26]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 85, 28]
|
||||
}]
|
||||
|
||||
};
|
||||
//end
|
||||
var infovis = document.getElementById('infovis');
|
||||
//init AreaChart
|
||||
var areaChart = new $jit.AreaChart({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//add animations
|
||||
animate: true,
|
||||
//separation offsets
|
||||
Margin: {
|
||||
top: 5,
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5
|
||||
},
|
||||
labelOffset: 10,
|
||||
//whether to display sums
|
||||
showAggregates: true,
|
||||
//whether to display labels at all
|
||||
showLabels: true,
|
||||
//could also be 'stacked'
|
||||
type: useGradients? 'stacked:gradient' : 'stacked',
|
||||
//label styling
|
||||
Label: {
|
||||
type: labelType, //can be 'Native' or 'HTML'
|
||||
size: 13,
|
||||
family: 'Arial',
|
||||
color: 'white'
|
||||
},
|
||||
//enable tips
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function(tip, elem) {
|
||||
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
|
||||
}
|
||||
},
|
||||
//add left and right click handlers
|
||||
filterOnClick: true,
|
||||
restoreOnRightClick:true
|
||||
});
|
||||
//load JSON data.
|
||||
areaChart.loadJSON(json);
|
||||
//end
|
||||
var list = $jit.id('id-list'),
|
||||
button = $jit.id('update'),
|
||||
restoreButton = $jit.id('restore');
|
||||
//update json on click
|
||||
$jit.util.addEvent(button, 'click', function() {
|
||||
var util = $jit.util;
|
||||
if(util.hasClass(button, 'gray')) return;
|
||||
util.removeClass(button, 'white');
|
||||
util.addClass(button, 'gray');
|
||||
areaChart.updateJSON(json2);
|
||||
});
|
||||
//restore graph on click
|
||||
$jit.util.addEvent(restoreButton, 'click', function() {
|
||||
areaChart.restore();
|
||||
});
|
||||
//dynamically add legend to list
|
||||
var legend = areaChart.getLegend(),
|
||||
listItems = [];
|
||||
for(var name in legend) {
|
||||
listItems.push('<div class=\'query-color\' style=\'background-color:'
|
||||
+ legend[name] +'\'> </div>' + name);
|
||||
}
|
||||
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>BarChart - Bar Chart Example</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/BarChart.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Bar Chart Example
|
||||
</h4>
|
||||
|
||||
A static vertical Bar Chart example with gradients. The Bar Chart displays tooltips when hovering the stacks. <br /><br />
|
||||
Click the Update button to update the JSON data.
|
||||
|
||||
</div>
|
||||
<ul id="id-list"></ul>
|
||||
<a id="update" href="#" class="theme button white">Update Data</a>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
'label': ['label A', 'label B', 'label C', 'label D'],
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [20, 40, 15, 5]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 10, 45, 10]
|
||||
},
|
||||
{
|
||||
'label': 'date E',
|
||||
'values': [38, 20, 35, 17]
|
||||
},
|
||||
{
|
||||
'label': 'date F',
|
||||
'values': [58, 10, 35, 32]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 60, 34, 38]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 25, 40]
|
||||
}]
|
||||
|
||||
};
|
||||
//end
|
||||
var json2 = {
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [10, 40, 15, 7]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 40, 45, 9]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 30, 34, 26]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 85, 28]
|
||||
}]
|
||||
|
||||
};
|
||||
//init BarChart
|
||||
var barChart = new $jit.BarChart({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//whether to add animations
|
||||
animate: true,
|
||||
//horizontal or vertical barcharts
|
||||
orientation: 'vertical',
|
||||
//bars separation
|
||||
barsOffset: 20,
|
||||
//visualization offset
|
||||
Margin: {
|
||||
top:5,
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom:5
|
||||
},
|
||||
//labels offset position
|
||||
labelOffset: 5,
|
||||
//bars style
|
||||
type: useGradients? 'stacked:gradient' : 'stacked',
|
||||
//whether to show the aggregation of the values
|
||||
showAggregates:true,
|
||||
//whether to show the labels for the bars
|
||||
showLabels:true,
|
||||
//labels style
|
||||
Label: {
|
||||
type: labelType, //Native or HTML
|
||||
size: 13,
|
||||
family: 'Arial',
|
||||
color: 'white'
|
||||
},
|
||||
//add tooltips
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function(tip, elem) {
|
||||
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
barChart.loadJSON(json);
|
||||
//end
|
||||
var list = $jit.id('id-list'),
|
||||
button = $jit.id('update'),
|
||||
orn = $jit.id('switch-orientation');
|
||||
//update json on click 'Update Data'
|
||||
$jit.util.addEvent(button, 'click', function() {
|
||||
var util = $jit.util;
|
||||
if(util.hasClass(button, 'gray')) return;
|
||||
util.removeClass(button, 'white');
|
||||
util.addClass(button, 'gray');
|
||||
barChart.updateJSON(json2);
|
||||
});
|
||||
//dynamically add legend to list
|
||||
var legend = barChart.getLegend(),
|
||||
listItems = [];
|
||||
for(var name in legend) {
|
||||
listItems.push('<div class=\'query-color\' style=\'background-color:'
|
||||
+ legend[name] +'\'> </div>' + name);
|
||||
}
|
||||
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>BarChart - Bar Chart Example</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/BarChart.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Bar Chart Example
|
||||
</h4>
|
||||
|
||||
A static horizontal Bar Chart example without gradients. The Bar Chart displays tooltips when hovering the stacks.<br /><br />
|
||||
Click the Update button to update the JSON data.
|
||||
|
||||
</div>
|
||||
<ul id="id-list"></ul>
|
||||
<a id="update" href="#" class="theme button white">Update Data</a>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
'label': ['label A', 'label B', 'label C', 'label D'],
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [20, 40, 15, 5]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 10, 45, 10]
|
||||
},
|
||||
{
|
||||
'label': 'date E',
|
||||
'values': [38, 20, 35, 17]
|
||||
},
|
||||
{
|
||||
'label': 'date F',
|
||||
'values': [58, 10, 35, 32]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 60, 34, 38]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 25, 40]
|
||||
}]
|
||||
|
||||
};
|
||||
//end
|
||||
var json2 = {
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [10, 40, 15, 7]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 40, 45, 9]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 30, 34, 26]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 85, 28]
|
||||
}]
|
||||
|
||||
};
|
||||
//init BarChart
|
||||
var barChart = new $jit.BarChart({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//whether to add animations
|
||||
animate: true,
|
||||
//horizontal or vertical barcharts
|
||||
orientation: 'horizontal',
|
||||
//bars separation
|
||||
barsOffset: 0.5,
|
||||
//visualization offset
|
||||
Margin: {
|
||||
top: 5,
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5
|
||||
},
|
||||
//labels offset position
|
||||
labelOffset:5,
|
||||
//bars style
|
||||
type:'stacked',
|
||||
//whether to show the aggregation of the values
|
||||
showAggregates:true,
|
||||
//whether to show the labels for the bars
|
||||
showLabels:true,
|
||||
//label styles
|
||||
Label: {
|
||||
type: labelType, //Native or HTML
|
||||
size: 13,
|
||||
family: 'Arial',
|
||||
color: 'white'
|
||||
},
|
||||
//tooltip options
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function(tip, elem) {
|
||||
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
barChart.loadJSON(json);
|
||||
//end
|
||||
var list = $jit.id('id-list'),
|
||||
button = $jit.id('update');
|
||||
//update json on click 'Update Data'
|
||||
$jit.util.addEvent(button, 'click', function() {
|
||||
var util = $jit.util;
|
||||
if(util.hasClass(button, 'gray')) return;
|
||||
util.removeClass(button, 'white');
|
||||
util.addClass(button, 'gray');
|
||||
barChart.updateJSON(json2);
|
||||
});
|
||||
//dynamically add legend to list
|
||||
var legend = barChart.getLegend(),
|
||||
listItems = [];
|
||||
for(var name in legend) {
|
||||
listItems.push('<div class=\'query-color\' style=\'background-color:'
|
||||
+ legend[name] +'\'> </div>' + name);
|
||||
}
|
||||
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>ForceDirected - Force Directed Static Graph</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/ForceDirected.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Force Directed Static Graph
|
||||
</h4>
|
||||
|
||||
A static JSON Graph structure is used as input for this visualization.<br /><br />
|
||||
You can <b>zoom</b> and <b>pan</b> the visualization by <b>scrolling</b> and <b>dragging</b>.<br /><br />
|
||||
You can <b>change node positions</b> by <b>dragging the nodes around</b>.<br /><br />
|
||||
The clicked node's connections are displayed in a relations list in the right column.<br /><br />
|
||||
The JSON static data is customized to provide different node types, colors and widths.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>ForceDirected - Graph Operations</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/ForceDirected.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Graph Operations
|
||||
</h4>
|
||||
|
||||
In this (advanced) example a static graph is fed into the visualization.<br /><br />
|
||||
Custom Animations are triggered when clicking on a node's label or when deleting a node.<br /><br />
|
||||
<b>Click on a node's label</b> to select a node and its connections.<br /><br />
|
||||
<b>Click on the 'x' link</b> to delete a node.<br /><br />
|
||||
You can <b>drag nodes</b> around and <b>zoom</b> and <b>pan</b>, just like you did in the previous
|
||||
example.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,638 +0,0 @@
|
|||
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(){
|
||||
// init data
|
||||
var json = [
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode1",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode3",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode2",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode4",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode10",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode6",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode11",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode12",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode13",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode14",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode15",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode16",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode17",
|
||||
"nodeFrom": "graphnode0",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#83548B",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode0",
|
||||
"name": "graphnode0"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode2",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode3",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode4",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode5",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode6",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode7",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode8",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode9",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode10",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode11",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode12",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode13",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode14",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode15",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode16",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode17",
|
||||
"nodeFrom": "graphnode1",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#83548B",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode1",
|
||||
"name": "graphnode1"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode3",
|
||||
"nodeFrom": "graphnode2",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode5",
|
||||
"nodeFrom": "graphnode2",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode9",
|
||||
"nodeFrom": "graphnode2",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode18",
|
||||
"nodeFrom": "graphnode2",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#EBB056",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode2",
|
||||
"name": "graphnode2"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode5",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode9",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode10",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode6",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode11",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode12",
|
||||
"nodeFrom": "graphnode3",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#70A35E",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode3",
|
||||
"name": "graphnode3"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#70A35E",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode4",
|
||||
"name": "graphnode4"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode9",
|
||||
"nodeFrom": "graphnode5",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode5",
|
||||
"name": "graphnode5"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode10",
|
||||
"nodeFrom": "graphnode6",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode11",
|
||||
"nodeFrom": "graphnode6",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode6",
|
||||
"name": "graphnode6"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode7",
|
||||
"name": "graphnode7"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#EBB056",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode8",
|
||||
"name": "graphnode8"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#70A35E",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode9",
|
||||
"name": "graphnode9"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode11",
|
||||
"nodeFrom": "graphnode10",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#83548B",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode10",
|
||||
"name": "graphnode10"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode11",
|
||||
"name": "graphnode11"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#70A35E",
|
||||
"$type": "square"
|
||||
},
|
||||
"id": "graphnode12",
|
||||
"name": "graphnode12"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode14",
|
||||
"nodeFrom": "graphnode13",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "square"
|
||||
},
|
||||
"id": "graphnode13",
|
||||
"name": "graphnode13"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#70A35E",
|
||||
"$type": "square"
|
||||
},
|
||||
"id": "graphnode14",
|
||||
"name": "graphnode14"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode16",
|
||||
"nodeFrom": "graphnode15",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode17",
|
||||
"nodeFrom": "graphnode15",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#C74243",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode15",
|
||||
"name": "graphnode15"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode17",
|
||||
"nodeFrom": "graphnode16",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#EBB056",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode16",
|
||||
"name": "graphnode16"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#83548B",
|
||||
"$type": "triangle"
|
||||
},
|
||||
"id": "graphnode17",
|
||||
"name": "graphnode17"
|
||||
},
|
||||
{
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "graphnode19",
|
||||
"nodeFrom": "graphnode18",
|
||||
"data": {}
|
||||
},
|
||||
{
|
||||
"nodeTo": "graphnode20",
|
||||
"nodeFrom": "graphnode18",
|
||||
"data": {}
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$color": "#C74243",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode18",
|
||||
"name": "graphnode18"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#EBB056",
|
||||
"$type": "star"
|
||||
},
|
||||
"id": "graphnode19",
|
||||
"name": "graphnode19"
|
||||
},
|
||||
{
|
||||
"adjacencies": [],
|
||||
"data": {
|
||||
"$color": "#416D9C",
|
||||
"$type": "circle"
|
||||
},
|
||||
"id": "graphnode20",
|
||||
"name": "graphnode20"
|
||||
}
|
||||
];
|
||||
// end
|
||||
// init ForceDirected
|
||||
var fd = new $jit.ForceDirected({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//Enable zooming and panning
|
||||
//with scrolling and DnD
|
||||
Navigation: {
|
||||
enable: true,
|
||||
//Enable panning events only if we're dragging the empty
|
||||
//canvas (and not a node).
|
||||
panning: 'avoid nodes',
|
||||
zooming: 10 //zoom speed. higher is more sensible
|
||||
},
|
||||
// Change node and edge styles such as
|
||||
// color and width.
|
||||
// These properties are also set per node
|
||||
// with dollar prefixed data-properties in the
|
||||
// JSON structure.
|
||||
Node: {
|
||||
overridable: true,
|
||||
dim: 7
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#23A4FF',
|
||||
lineWidth: 0.4
|
||||
},
|
||||
// Add node events
|
||||
Events: {
|
||||
enable: true,
|
||||
type: 'Native',
|
||||
//Change cursor style when hovering a node
|
||||
onMouseEnter: function() {
|
||||
fd.canvas.getElement().style.cursor = 'move';
|
||||
},
|
||||
onMouseLeave: function() {
|
||||
fd.canvas.getElement().style.cursor = '';
|
||||
},
|
||||
//Update node positions when dragged
|
||||
onDragMove: function(node, eventInfo, e) {
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
fd.plot();
|
||||
},
|
||||
//Implement the same handler for touchscreens
|
||||
onTouchMove: function(node, eventInfo, e) {
|
||||
$jit.util.event.stop(e); //stop default touchmove event
|
||||
this.onDragMove(node, eventInfo, e);
|
||||
}
|
||||
},
|
||||
//Number of iterations for the FD algorithm
|
||||
iterations: 200,
|
||||
//Edge length
|
||||
levelDistance: 130,
|
||||
// This method is only triggered
|
||||
// on label creation and only for DOM labels (not native canvas ones).
|
||||
onCreateLabel: function(domElement, node){
|
||||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
var nameContainer = document.createElement('span'),
|
||||
closeButton = document.createElement('span'),
|
||||
style = nameContainer.style;
|
||||
nameContainer.className = 'name';
|
||||
nameContainer.innerHTML = node.name;
|
||||
closeButton.className = 'close';
|
||||
closeButton.innerHTML = 'x';
|
||||
domElement.appendChild(nameContainer);
|
||||
domElement.appendChild(closeButton);
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ddd";
|
||||
//Fade the node and its connections when
|
||||
//clicking the close button
|
||||
closeButton.onclick = function() {
|
||||
node.setData('alpha', 0, 'end');
|
||||
node.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 0, 'end');
|
||||
});
|
||||
fd.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: 500
|
||||
});
|
||||
};
|
||||
//Toggle a node selection when clicking
|
||||
//its name. This is done by animating some
|
||||
//node styles like its dimension and the color
|
||||
//and lineWidth of its adjacencies.
|
||||
nameContainer.onclick = function() {
|
||||
//set final styles
|
||||
fd.graph.eachNode(function(n) {
|
||||
if(n.id != node.id) delete n.selected;
|
||||
n.setData('dim', 7, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.4,
|
||||
color: '#23a4ff'
|
||||
});
|
||||
});
|
||||
});
|
||||
if(!node.selected) {
|
||||
node.selected = true;
|
||||
node.setData('dim', 17, 'end');
|
||||
node.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#36acfb'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
delete node.selected;
|
||||
}
|
||||
//trigger animation to final styles
|
||||
fd.fx.animate({
|
||||
modes: ['node-property:dim',
|
||||
'edge-property:lineWidth:color'],
|
||||
duration: 500
|
||||
});
|
||||
// Build the right column relations list.
|
||||
// This is done by traversing the clicked node connections.
|
||||
var html = "<h4>" + node.name + "</h4><b> connections:</b><ul><li>",
|
||||
list = [];
|
||||
node.eachAdjacency(function(adj){
|
||||
if(adj.getData('alpha')) list.push(adj.nodeTo.name);
|
||||
});
|
||||
//append connections information
|
||||
$jit.id('inner-details').innerHTML = html + list.join("</li><li>") + "</li></ul>";
|
||||
};
|
||||
},
|
||||
// Change node styles when DOM labels are placed
|
||||
// or moved.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var top = parseInt(style.top);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
style.top = (top + 10) + 'px';
|
||||
style.display = '';
|
||||
}
|
||||
});
|
||||
// load JSON data.
|
||||
fd.loadJSON(json);
|
||||
// compute positions incrementally and animate.
|
||||
fd.computeIncremental({
|
||||
iter: 40,
|
||||
property: 'end',
|
||||
onStep: function(perc){
|
||||
Log.write(perc + '% loaded...');
|
||||
},
|
||||
onComplete: function(){
|
||||
Log.write('done');
|
||||
fd.animate({
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Elastic.easeOut,
|
||||
duration: 2500
|
||||
});
|
||||
}
|
||||
});
|
||||
// end
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Hypertree - Tree Animation</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Hypertree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Tree Animation
|
||||
</h4>
|
||||
|
||||
A static JSON Tree structure is used as input for this animation.<br /><br />
|
||||
Clicking on a node should move the tree and center that node.<br /><br />
|
||||
The centered node's children are displayed in a relations list in the right column.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,431 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
"id": "347_0",
|
||||
"name": "Nine Inch Nails",
|
||||
"children": [{
|
||||
"id": "126510_1",
|
||||
"name": "Jerome Dillon",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "52163_2",
|
||||
"name": "Howlin' Maggie",
|
||||
"data": {
|
||||
"band": "Jerome Dillon",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "324134_3",
|
||||
"name": "nearLY",
|
||||
"data": {
|
||||
"band": "Jerome Dillon",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "173871_4",
|
||||
"name": "Charlie Clouser",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "235952_5",
|
||||
"name": "James Woolley",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "235951_6",
|
||||
"name": "Jeff Ward",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "2382_7",
|
||||
"name": "Ministry",
|
||||
"data": {
|
||||
"band": "Jeff Ward",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "2415_8",
|
||||
"name": "Revolting Cocks",
|
||||
"data": {
|
||||
"band": "Jeff Ward",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "3963_9",
|
||||
"name": "Pigface",
|
||||
"data": {
|
||||
"band": "Jeff Ward",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "7848_10",
|
||||
"name": "Lard",
|
||||
"data": {
|
||||
"band": "Jeff Ward",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "235950_11",
|
||||
"name": "Richard Patrick",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1007_12",
|
||||
"name": "Filter",
|
||||
"data": {
|
||||
"band": "Richard Patrick",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "327924_13",
|
||||
"name": "Army of Anyone",
|
||||
"data": {
|
||||
"band": "Richard Patrick",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "2396_14",
|
||||
"name": "Trent Reznor",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "3963_15",
|
||||
"name": "Pigface",
|
||||
"data": {
|
||||
"band": "Trent Reznor",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "32247_16",
|
||||
"name": "1000 Homo DJs",
|
||||
"data": {
|
||||
"band": "Trent Reznor",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "83761_17",
|
||||
"name": "Option 30",
|
||||
"data": {
|
||||
"band": "Trent Reznor",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "133257_18",
|
||||
"name": "Exotic Birds",
|
||||
"data": {
|
||||
"band": "Trent Reznor",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "36352_19",
|
||||
"name": "Chris Vrenna",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1013_20",
|
||||
"name": "Stabbing Westward",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "3963_21",
|
||||
"name": "Pigface",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "5752_22",
|
||||
"name": "Jack Off Jill",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "33602_23",
|
||||
"name": "Die Warzau",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "40485_24",
|
||||
"name": "tweaker",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "is person"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "133257_25",
|
||||
"name": "Exotic Birds",
|
||||
"data": {
|
||||
"band": "Chris Vrenna",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236021_26",
|
||||
"name": "Aaron North",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "236024_27",
|
||||
"name": "Jeordie White",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "909_28",
|
||||
"name": "A Perfect Circle",
|
||||
"data": {
|
||||
"band": "Jeordie White",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "237377_29",
|
||||
"name": "Twiggy Ramirez",
|
||||
"data": {
|
||||
"band": "Jeordie White",
|
||||
"relation": "is person"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "235953_30",
|
||||
"name": "Robin Finck",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1440_31",
|
||||
"name": "Guns N' Roses",
|
||||
"data": {
|
||||
"band": "Robin Finck",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "235955_32",
|
||||
"name": "Danny Lohner",
|
||||
"data": {
|
||||
"band": "Nine Inch Nails",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "909_33",
|
||||
"name": "A Perfect Circle",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1695_34",
|
||||
"name": "Killing Joke",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1938_35",
|
||||
"name": "Methods of Mayhem",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "5138_36",
|
||||
"name": "Skrew",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "53549_37",
|
||||
"name": "Angkor Wat",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "113510_38",
|
||||
"name": "Puscifer",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "113512_39",
|
||||
"name": "Renhold\u00ebr",
|
||||
"data": {
|
||||
"band": "Danny Lohner",
|
||||
"relation": "is person"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}],
|
||||
"data": []
|
||||
};
|
||||
//end
|
||||
var infovis = document.getElementById('infovis');
|
||||
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;
|
||||
|
||||
//init Hypertree
|
||||
var ht = new $jit.Hypertree({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//canvas width and height
|
||||
width: w,
|
||||
height: h,
|
||||
//Change node and edge styles such as
|
||||
//color, width and dimensions.
|
||||
Node: {
|
||||
dim: 9,
|
||||
color: "#f00"
|
||||
},
|
||||
Edge: {
|
||||
lineWidth: 2,
|
||||
color: "#088"
|
||||
},
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("centering");
|
||||
},
|
||||
//Attach event handlers and add text to the
|
||||
//labels. This method is only triggered on label
|
||||
//creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
$jit.util.addEvent(domElement, 'click', function () {
|
||||
ht.onClick(node.id);
|
||||
});
|
||||
},
|
||||
//Change node styles when labels are placed
|
||||
//or moved.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ddd";
|
||||
|
||||
} else if(node._depth == 2){
|
||||
style.fontSize = "0.7em";
|
||||
style.color = "#555";
|
||||
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
},
|
||||
|
||||
onAfterCompute: function(){
|
||||
Log.write("done");
|
||||
|
||||
//Build the right column relations list.
|
||||
//This is done by collecting the information (stored in the data property)
|
||||
//for all the nodes adjacent to the centered node.
|
||||
var node = ht.graph.getClosestNodeToOrigin("current");
|
||||
var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
|
||||
html += "<ul>";
|
||||
node.eachAdjacency(function(adj){
|
||||
var child = adj.nodeTo;
|
||||
if (child.data) {
|
||||
var rel = (child.data.band == node.name) ? child.data.relation : node.data.relation;
|
||||
html += "<li>" + child.name + " " + "<div class=\"relation\">(relation: " + rel + ")</div></li>";
|
||||
}
|
||||
});
|
||||
html += "</ul>";
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
ht.loadJSON(json);
|
||||
//compute positions and plot.
|
||||
ht.refresh();
|
||||
//end
|
||||
ht.controller.onAfterCompute();
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Hypertree - Weighted Graph Animation</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Hypertree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Weighted Graph Animation
|
||||
</h4>
|
||||
|
||||
A static JSON graph structure is used for this animation.<br /><br />
|
||||
For each JSON node the "$type" and "$dim" parameters set the type of node to be plotted and its dimensions.<br /><br />
|
||||
Line weights are added programmatically, <em>onBeforePlotLine</em>.<br /><br />
|
||||
A <b>Back</b> transition is used instead of the linear transition for the animation.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,315 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
//By defining properties with the dollar sign ($)
|
||||
//in nodes and edges we can override the global configuration
|
||||
//properties for nodes and edges.
|
||||
//In this case we use "$type" and "$dim" properties to override
|
||||
//the type of the node to be plotted and its dimension.
|
||||
var json = [{
|
||||
"id": "node0",
|
||||
"name": "node0 name",
|
||||
"data": {
|
||||
"$dim": 16.759175934208628,
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node1",
|
||||
"name": "node1 name",
|
||||
"data": {
|
||||
"$dim": 13.077119090372014,
|
||||
"$type": "square",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node2",
|
||||
"name": "node2 name",
|
||||
"data": {
|
||||
"$dim": 24.937383149648717,
|
||||
"$type": "triangle",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node3",
|
||||
"name": "node3 name",
|
||||
"data": {
|
||||
"$dim": 10.53272740718869,
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node4",
|
||||
"name": "node4 name",
|
||||
"data": {
|
||||
"$dim": 5.3754347037767345,
|
||||
"$type":"triangle",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node5",
|
||||
"name": "node5 name",
|
||||
"data": {
|
||||
"$dim": 32.26403873194912,
|
||||
"$type": "star",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}];
|
||||
//end
|
||||
//init Hypertree
|
||||
var ht = new $jit.Hypertree({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//By setting overridable=true,
|
||||
//Node and Edge global properties can be
|
||||
//overriden for each node/edge.
|
||||
Node: {
|
||||
overridable: true,
|
||||
'transform': false,
|
||||
color: "#f00"
|
||||
},
|
||||
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: "#088"
|
||||
},
|
||||
//calculate nodes offset
|
||||
offset: 0.2,
|
||||
//Change the animation transition type
|
||||
transition: $jit.Trans.Back.easeOut,
|
||||
//animation duration (in milliseconds)
|
||||
duration:1000,
|
||||
|
||||
//This method is called right before plotting an
|
||||
//edge. This method is useful for adding individual
|
||||
//styles to edges.
|
||||
onBeforePlotLine: function(adj){
|
||||
//Set random lineWidth for edges.
|
||||
if (!adj.data.$lineWidth)
|
||||
adj.data.$lineWidth = Math.random() * 7 + 1;
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("centering");
|
||||
},
|
||||
//Attach event handlers on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
domElement.style.cursor = "pointer";
|
||||
domElement.onclick = function () {
|
||||
ht.onClick(node.id, { hideLabels: false });
|
||||
};
|
||||
},
|
||||
//This method is called when moving/placing a label.
|
||||
//You can add some positioning offsets to the labels here.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var width = domElement.offsetWidth;
|
||||
var intX = parseInt(domElement.style.left);
|
||||
intX -= width / 2;
|
||||
domElement.style.left = intX + 'px';
|
||||
},
|
||||
|
||||
onAfterCompute: function(){
|
||||
Log.write("done");
|
||||
|
||||
//Make the relations list shown in the right column.
|
||||
var node = ht.graph.getClosestNodeToOrigin("current");
|
||||
var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
|
||||
html += "<ul>";
|
||||
node.eachAdjacency(function(adj){
|
||||
var child = adj.nodeTo;
|
||||
html += "<li>" + child.name + "</li>";
|
||||
});
|
||||
html += "</ul>";
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
}
|
||||
});
|
||||
//load JSON graph.
|
||||
ht.loadJSON(json, 2);
|
||||
//compute positions and plot
|
||||
ht.refresh();
|
||||
//end
|
||||
ht.controller.onBeforeCompute(ht.graph.getNode(ht.root));
|
||||
ht.controller.onAfterCompute();
|
||||
}
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Hypertree - Graph Operations</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Hypertree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Graph Operations
|
||||
</h4>
|
||||
|
||||
You can do the following operations with the Hypertree<br /><br />
|
||||
1.- Removing subtrees or nodes<br /><br />
|
||||
2.- Removing edges<br /><br />
|
||||
3.- Adding another graph, also called sum<br /><br />
|
||||
4.- Morphing (or transforming) the graph into another one<br />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Global Options</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
duration:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-duration">
|
||||
<option>1000</option>
|
||||
<option>1500</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
fps:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-fps">
|
||||
<option>10</option>
|
||||
<option selected="selected">30</option>
|
||||
<option>60</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
hide labels:
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" checked="checked" id="hide-labels" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>1.- Remove Nodes</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-remove-nodes">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>iter</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Remove" id="remove-nodes" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>2.- Remove Edges</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-remove-edges">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>iter</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Remove" id="remove-edges" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>3.- Add Graph (Sum)</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-sum">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Sum" id="sum" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>4.- Morph</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-morph">
|
||||
<option>fade:con</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Morph" id="morph" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,625 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
"id": "190_0",
|
||||
"name": "Pearl Jam",
|
||||
"children": [{
|
||||
"id": "306208_1",
|
||||
"name": "Pearl Jam & Cypress Hill",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": [{
|
||||
"id": "84_2",
|
||||
"name": "Cypress Hill",
|
||||
"data": {
|
||||
"band": "Pearl Jam & Cypress Hill",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "107877_3",
|
||||
"name": "Neil Young & Pearl Jam",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": [{
|
||||
"id": "964_4",
|
||||
"name": "Neil Young",
|
||||
"data": {
|
||||
"band": "Neil Young & Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236797_5",
|
||||
"name": "Jeff Ament",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_6",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "14581_7",
|
||||
"name": "Mother Love Bone",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "50188_8",
|
||||
"name": "Green River",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_9",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "115632_10",
|
||||
"name": "Three Fish",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_11",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "41529_12",
|
||||
"name": "Stone Gossard",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_13",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "14581_14",
|
||||
"name": "Mother Love Bone",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "24119_15",
|
||||
"name": "Brad",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "50188_16",
|
||||
"name": "Green River",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_17",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "131161_18",
|
||||
"name": "Eddie Vedder",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_19",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "72007_20",
|
||||
"name": "Eddie Vedder & Zeke",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "236657_21",
|
||||
"name": "Bad Radio",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "432176_22",
|
||||
"name": "Beck & Eddie Vedder",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236583_23",
|
||||
"name": "Mike McCready",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1744_24",
|
||||
"name": "Mad Season",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1756_25",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "43661_26",
|
||||
"name": "$10,000 Gold Chain",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_27",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "153766_28",
|
||||
"name": "The Rockfords",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_29",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236585_30",
|
||||
"name": "Matt Cameron",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1111_31",
|
||||
"name": "Soundgarden",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1756_32",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "9570_33",
|
||||
"name": "Eleven",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "supporting musician"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "11783_34",
|
||||
"name": "Queens of the Stone Age",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "61972_35",
|
||||
"name": "Wellwater Conspiracy",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_36",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "353097_37",
|
||||
"name": "Tone Dogs",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236594_38",
|
||||
"name": "Dave Krusen",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "2092_39",
|
||||
"name": "Candlebox",
|
||||
"data": {
|
||||
"band": "Dave Krusen",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236022_40",
|
||||
"name": "Matt Chamberlain",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "54761_41",
|
||||
"name": "Critters Buggin",
|
||||
"data": {
|
||||
"band": "Matt Chamberlain",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "92043_42",
|
||||
"name": "Edie Brickell and New Bohemians",
|
||||
"data": {
|
||||
"band": "Matt Chamberlain",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236611_43",
|
||||
"name": "Dave Abbruzzese",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "276933_44",
|
||||
"name": "Green Romance Orchestra",
|
||||
"data": {
|
||||
"band": "Dave Abbruzzese",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236612_45",
|
||||
"name": "Jack Irons",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "4619_46",
|
||||
"name": "Redd Kross",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "9570_47",
|
||||
"name": "Eleven",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "12389_48",
|
||||
"name": "Red Hot Chili Peppers",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "114288_49",
|
||||
"name": "Anthym",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "240013_50",
|
||||
"name": "What Is This?",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}],
|
||||
"data": []
|
||||
};
|
||||
|
||||
var graph = '[{id:"190_0", adjacencies:["node0"]}, {id:"node0", name:"node0 name", data:{$dim:8.660354683365695, "some other key":"some other value"}, adjacencies:["node1", "node2", "node3", "node4", "node5"]}, {id:"node1", name:"node1 name", data:{$dim:21.118129724156983, "some other key":"some other value"}, adjacencies:["node0", "node2", "node3", "node4", "node5"]}, {id:"node2", name:"node2 name", data:{$dim:6.688951018413683, "some other key":"some other value"}, adjacencies:["node0", "node1", "node3", "node4", "node5"]}, {id:"node3", name:"node3 name", data:{$dim:19.78771599710248, "some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node4", "node5"]}, {id:"node4", name:"node4 name", data:{$dim:3.025781742947326, "some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node3", "node5"]}, {id:"node5", name:"node5 name", data:{$dim:9.654383829711456, "some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node3", "node4"]}, {id:"4619_46", adjacencies:["190_0"]}, {id:"236585_30", adjacencies:["190_0"]}, {id:"131161_18", adjacencies:["190_0"]}, {id:"41529_12", adjacencies:["190_0"]}]';
|
||||
//end
|
||||
|
||||
var infovis = document.getElementById('infovis');
|
||||
var w = infovis.offsetWidth - 50, h = infovis.offsetHeight - 50;
|
||||
|
||||
//init Hypertree
|
||||
var ht = new $jit.Hypertree({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//canvas width and height
|
||||
width: w,
|
||||
height: h,
|
||||
//Change Node and Edge styles and colors.
|
||||
Node: {
|
||||
dim: 9,
|
||||
color: "#f00",
|
||||
overridable: true
|
||||
},
|
||||
|
||||
Edge: {
|
||||
lineWidth: 2,
|
||||
color: "#088",
|
||||
overridable: true
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("centering");
|
||||
},
|
||||
//Add the node's name to its corresponding label.
|
||||
//This method is only called on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
},
|
||||
|
||||
//Ths method is called when moving/placing a label.
|
||||
//Add label styles based on their position.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ddd";
|
||||
|
||||
} else if(node._depth == 2){
|
||||
style.fontSize = "0.7em";
|
||||
style.color = "#555";
|
||||
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
},
|
||||
|
||||
onAfterCompute: function(){
|
||||
Log.write("done");
|
||||
}
|
||||
});
|
||||
|
||||
//load JSON data.
|
||||
ht.loadJSON(json);
|
||||
|
||||
//Add some edges to transform the
|
||||
//tree into a graph (just for fun).
|
||||
ht.graph.addAdjacence({
|
||||
'id': '236585_30'
|
||||
}, {
|
||||
'id': '236583_23'
|
||||
}, null);
|
||||
ht.graph.addAdjacence({
|
||||
'id': '236585_30'
|
||||
}, {
|
||||
'id': '4619_46'
|
||||
}, null);
|
||||
|
||||
//Compute positions and plot.
|
||||
ht.refresh();
|
||||
//end
|
||||
|
||||
//Global Options
|
||||
//Define a function that returns the selected duration
|
||||
function getDuration() {
|
||||
var sduration = document.getElementById('select-duration');
|
||||
var sdindex = sduration.selectedIndex;
|
||||
return parseInt(sduration.options[sdindex].text);
|
||||
};
|
||||
//Define a function that returns the selected fps
|
||||
function getFPS() {
|
||||
var fpstype = document.getElementById('select-fps');
|
||||
var fpsindex = fpstype.selectedIndex;
|
||||
return parseInt(fpstype.options[fpsindex].text);
|
||||
};
|
||||
//Define a function that returns whether you have to
|
||||
//hide labels during the animation or not.
|
||||
function hideLabels() {
|
||||
return document.getElementById('hide-labels').checked;
|
||||
};
|
||||
|
||||
//init handlers
|
||||
//Add event handlers to the right column controls.
|
||||
|
||||
//Remove Nodes
|
||||
var button = $jit.id('remove-nodes');
|
||||
button.onclick = function() {
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-remove-nodes');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//get node ids to be removed.
|
||||
var n = ht.graph.getNode('236797_5');
|
||||
if(!n) return;
|
||||
var subnodes = n.getSubnodes(0);
|
||||
var map = [];
|
||||
for (var i = 0; i < subnodes.length; i++) {
|
||||
map.push(subnodes[i].id);
|
||||
}
|
||||
//perform node-removing animation.
|
||||
ht.op.removeNode(map.reverse(), {
|
||||
type: type,
|
||||
duration: getDuration(),
|
||||
fps: getFPS(),
|
||||
hideLabels:hideLabels()
|
||||
});
|
||||
};
|
||||
|
||||
//Remove edges
|
||||
button = $jit.id('remove-edges');
|
||||
button.onclick = function() {
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-remove-edges');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform edge removing animation.
|
||||
ht.op.removeEdge([['236585_30', "190_0"], ['236585_30', '4619_46']], {
|
||||
type: type,
|
||||
duration: getDuration(),
|
||||
fps: getFPS(),
|
||||
hideLabels: hideLabels()
|
||||
});
|
||||
};
|
||||
|
||||
//Add a Graph (Sum)
|
||||
button = $jit.id('sum');
|
||||
button.onclick = function(){
|
||||
//create json graph to add.
|
||||
var trueGraph = eval('(' + graph + ')');
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-sum');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform sum animation.
|
||||
ht.op.sum(trueGraph, {
|
||||
type: type,
|
||||
fps: getFPS(),
|
||||
duration: getDuration(),
|
||||
hideLabels: hideLabels(),
|
||||
onComplete: function(){
|
||||
Log.write("sum complete!");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Morph
|
||||
button = $jit.id('morph');
|
||||
button.onclick = function(){
|
||||
//create json graph to morph to.
|
||||
var trueGraph = eval('(' + graph + ')');
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-morph');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform morphing animation.
|
||||
ht.op.morph(trueGraph, {
|
||||
type: type,
|
||||
fps: getFPS(),
|
||||
duration: getDuration(),
|
||||
hideLabels: hideLabels(),
|
||||
onComplete: function(){
|
||||
Log.write("morph complete!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//end
|
||||
}
|
||||
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Icicle - Icicle Tree with static JSON data</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Icicle.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
<div class="text">
|
||||
|
||||
<h4>
|
||||
Icicle Tree with static JSON data
|
||||
</h4>
|
||||
|
||||
<p>Some static JSON tree data is fed to this visualization.</p>
|
||||
<p>
|
||||
<b>Left click</b> to set a node as root for the visualization.
|
||||
</p>
|
||||
<p>
|
||||
<b>Right click</b> to set the parent node as root for the visualization.
|
||||
</p>
|
||||
|
||||
|
||||
<div>
|
||||
<label for="s-orientation">Orientation: </label>
|
||||
<select name="s-orientation" id="s-orientation">
|
||||
<option value="h" selected>horizontal</option>
|
||||
<option value="v">vertical</option>
|
||||
</select>
|
||||
<br>
|
||||
<div id="max-levels">
|
||||
<label for="i-levels-to-show">Max levels: </label>
|
||||
<select id="i-levels-to-show" name="i-levels-to-show" style="width: 50px">
|
||||
<option>all</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option selected="selected">3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a id="update" href="#" class="theme button white">Go to Parent</a>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,83 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Icicle - Icicle tree with limited levels shown</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Icicle.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
<div class="text">
|
||||
|
||||
<h4>
|
||||
Icicle tree with limited levels shown
|
||||
</h4>
|
||||
|
||||
<p>A static JSON tree representing a file system tree is loaded into
|
||||
an Icicle Tree.</p>
|
||||
<p>
|
||||
<b>Left click</b> to set a node as root for the visualization.
|
||||
</p>
|
||||
<p>
|
||||
<b>Right click</b> to set the parent node as root for the visualization.
|
||||
</p>
|
||||
|
||||
|
||||
<div>
|
||||
<label for="s-orientation">Orientation: </label>
|
||||
<select name="s-orientation" id="s-orientation">
|
||||
<option value="h" selected>horizontal</option>
|
||||
<option value="v">vertical</option>
|
||||
</select>
|
||||
<br>
|
||||
<div id="max-levels">
|
||||
<label for="i-levels-to-show">Max levels: </label>
|
||||
<select id="i-levels-to-show" name="i-levels-to-show" style="width: 50px">
|
||||
<option>all</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option selected="selected">3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a id="update" href="#" class="theme button white">Go to Parent</a>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Other - Implementing Node Types</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Other.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Implementing Node Types
|
||||
</h4>
|
||||
|
||||
In this example some custom node types are created for rendering pie charts with the RGraph.<br /><br />
|
||||
Multiple instances of the RGraph are created using these node types. (top)<br /><br />
|
||||
The SpaceTree is loaded with some custom data that individually changes nodes dimensions, making a bar chart (bottom).
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,569 +0,0 @@
|
|||
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() {
|
||||
//init data
|
||||
var jsonpie = {
|
||||
'id': 'root',
|
||||
'name': 'RGraph based Pie Chart',
|
||||
'data': {
|
||||
'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie1',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#f55'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie2',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#f77'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie3',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#f99'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie4',
|
||||
'name': 'pie4',
|
||||
'data': {
|
||||
'$angularWidth': 30,
|
||||
'$color': '#fbb'
|
||||
},
|
||||
'children': []
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var jsonpie2 = {
|
||||
'id': 'root',
|
||||
'name': 'Making an Extended Pie Chart',
|
||||
'data': {
|
||||
'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie10',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#f55'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie100',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#55f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie101',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 70,
|
||||
'$color': '#66f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie102',
|
||||
'name': 'pc3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#77f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie20',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#f77'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie200',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie201',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 60,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie30',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#f99'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie300',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 100,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var jsonpie3 = {
|
||||
'id': 'root1',
|
||||
'name': 'ST Bar Chart',
|
||||
'data': {
|
||||
'$type': 'none',
|
||||
'$width': 80,
|
||||
'$height':20
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'h1',
|
||||
'name': 'h1',
|
||||
'data': {
|
||||
'$color': '#55f',
|
||||
'$height':30
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h2',
|
||||
'name': 'h2',
|
||||
'data': {
|
||||
'$color': '#66f',
|
||||
'$height':50
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h3',
|
||||
'name': 'h3',
|
||||
'data': {
|
||||
'$color': '#77f',
|
||||
'$height':70
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h4',
|
||||
'name': 'h4',
|
||||
'data': {
|
||||
'$height':90,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h5',
|
||||
'name': 'h5',
|
||||
'data': {
|
||||
'$height':100,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h6',
|
||||
'name': 'h6',
|
||||
'data': {
|
||||
'$height':110,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h7',
|
||||
'name': 'h7',
|
||||
'data': {
|
||||
'$height':150,
|
||||
'$color': '#bbf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h8',
|
||||
'name': 'h8',
|
||||
'data': {
|
||||
'$height':110,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h9',
|
||||
'name': 'h9',
|
||||
'data': {
|
||||
'$height':100,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h10',
|
||||
'name': 'h10',
|
||||
'data': {
|
||||
'$height':90,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h11',
|
||||
'name': 'h11',
|
||||
'data': {
|
||||
'$height':110,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h12',
|
||||
'name': 'h12',
|
||||
'data': {
|
||||
'$height':150,
|
||||
'$color': '#bbf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h13',
|
||||
'name': 'h13',
|
||||
'data': {
|
||||
'$height':110,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h14',
|
||||
'name': 'h14',
|
||||
'data': {
|
||||
'$height':100,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'h15',
|
||||
'name': 'h15',
|
||||
'data': {
|
||||
'$height':90,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
}
|
||||
]
|
||||
};
|
||||
//end
|
||||
|
||||
var infovis = document.getElementById('infovis');
|
||||
var w = infovis.offsetWidth, h = infovis.offsetHeight;
|
||||
|
||||
//create some containers for the visualizations
|
||||
var container = document.createElement('div');
|
||||
container.id = "infovis1";
|
||||
var style = container.style;
|
||||
style.left = "0px";
|
||||
style.top = "0px";
|
||||
style.width = Math.floor(w / 2) + "px";
|
||||
style.height = Math.floor(h / 2) + "px";
|
||||
style.position = 'absolute';
|
||||
infovis.appendChild(container);
|
||||
|
||||
container = document.createElement('div');
|
||||
container.id = "infovis2";
|
||||
var style = container.style;
|
||||
style.left = Math.floor(w / 2) + "px";
|
||||
style.top = "0px";
|
||||
style.width = style.left;
|
||||
style.height = Math.floor(h / 2) + "px";
|
||||
style.position = 'absolute';
|
||||
infovis.appendChild(container);
|
||||
|
||||
container = document.createElement('div');
|
||||
container.id = "infovis3";
|
||||
var style = container.style;
|
||||
style.left = "0px";
|
||||
style.top = Math.floor(h / 2) + "px";
|
||||
style.width = w + "px";
|
||||
style.height = Math.floor(h / 2) + "px";
|
||||
style.position = 'absolute';
|
||||
infovis.appendChild(container);
|
||||
|
||||
//init nodetypes
|
||||
//Here we implement custom node rendering types for the RGraph
|
||||
//Using this feature requires some javascript and canvas experience.
|
||||
$jit.RGraph.Plot.NodeTypes.implement({
|
||||
//This node type is used for plotting the upper-left pie chart
|
||||
'nodepie': {
|
||||
'render': function(node, canvas) {
|
||||
var span = node.angleSpan, begin = span.begin, end = span.end;
|
||||
var polarNode = node.pos.getp(true);
|
||||
var polar = new $jit.Polar(polarNode.rho, begin);
|
||||
var p1coord = polar.getc(true);
|
||||
polar.theta = end;
|
||||
var p2coord = polar.getc(true);
|
||||
|
||||
var ctx = canvas.getCtx();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(p1coord.x, p1coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(p2coord.x, p2coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho, begin, end, false);
|
||||
ctx.fill();
|
||||
}
|
||||
},
|
||||
//This node type is used for plotting the upper-right pie chart
|
||||
'shortnodepie': {
|
||||
'render': function(node, canvas) {
|
||||
var ldist = this.config.levelDistance;
|
||||
var span = node.angleSpan, begin = span.begin, end = span.end;
|
||||
var polarNode = node.pos.getp(true);
|
||||
|
||||
var polar = new $jit.Polar(polarNode.rho, begin);
|
||||
var p1coord = polar.getc(true);
|
||||
|
||||
polar.theta = end;
|
||||
var p2coord = polar.getc(true);
|
||||
|
||||
polar.rho += ldist;
|
||||
var p3coord = polar.getc(true);
|
||||
|
||||
polar.theta = begin;
|
||||
var p4coord = polar.getc(true);
|
||||
|
||||
|
||||
var ctx = canvas.getCtx();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(p1coord.x, p1coord.y);
|
||||
ctx.lineTo(p4coord.x, p4coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho, begin, end, false);
|
||||
|
||||
ctx.moveTo(p2coord.x, p2coord.y);
|
||||
ctx.lineTo(p3coord.x, p3coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho + ldist, end, begin, true);
|
||||
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
});
|
||||
//end
|
||||
|
||||
//init rgraph
|
||||
//This RGraph is used to plot the upper-left pie chart.
|
||||
//It has custom *pie-chart-nodes*.
|
||||
var rgraph = new $jit.RGraph({
|
||||
injectInto: 'infovis1',
|
||||
width: w/2,
|
||||
height: h/2,
|
||||
//Add node/edge styles and set
|
||||
//overridable=true if you want your
|
||||
//styles to be individually overriden
|
||||
Node: {
|
||||
'overridable': true,
|
||||
'type': 'nodepie'
|
||||
},
|
||||
Edge: {
|
||||
'overridable': true
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 135,
|
||||
|
||||
//Add styles to node labels on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
if(node.data.$angularWidth)
|
||||
domElement.innerHTML += " " + node.data.$angularWidth + "%";
|
||||
var style = domElement.style;
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#fff";
|
||||
},
|
||||
//Add some offset to the labels when placed.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
});
|
||||
//load graph.
|
||||
rgraph.loadJSON(jsonpie);
|
||||
rgraph.refresh();
|
||||
//end
|
||||
//init rgraph2
|
||||
//This RGraph instance is used for plotting the upper-right
|
||||
//pie chart.
|
||||
var rgraph2 = new $jit.RGraph({
|
||||
'injectInto': 'infovis2',
|
||||
'width': w/2,
|
||||
'height': h/2,
|
||||
//Add node/edge styles and set
|
||||
//overridable=true if you want your
|
||||
//styles to be individually overriden
|
||||
Node: {
|
||||
'overridable': true,
|
||||
'type':'shortnodepie'
|
||||
},
|
||||
Edge: {
|
||||
'overridable': true
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 45,
|
||||
|
||||
//Add styles to node labels on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
if(node.id == rgraph2.root) return;
|
||||
domElement.innerHTML = node.name;
|
||||
if(node.data.$angularWidth) {
|
||||
domElement.innerHTML += " " + node.data.$angularWidth + "%";
|
||||
}
|
||||
var style = domElement.style;
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#fff";
|
||||
},
|
||||
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
});
|
||||
//load graph.
|
||||
rgraph2.loadJSON(jsonpie2);
|
||||
rgraph2.refresh();
|
||||
//end
|
||||
//init st
|
||||
//This Spacetree nodes' heights are overriden individually
|
||||
//so that it serves as a bar chart.
|
||||
var st = new $jit.ST({
|
||||
'injectInto': 'infovis3',
|
||||
'width': w,
|
||||
'height': h/2,
|
||||
//set orientarion
|
||||
orientation:'bottom',
|
||||
//set duration for the animation
|
||||
duration: 800,
|
||||
//set parent-children distance
|
||||
levelDistance: 30,
|
||||
//set node and edge styles
|
||||
//set overridable=true for styling individual
|
||||
//nodes or edges
|
||||
Node: {
|
||||
overridable: true,
|
||||
width: 30,
|
||||
type: 'rectangle',
|
||||
color: '#aaa',
|
||||
align: 'right'
|
||||
},
|
||||
|
||||
Edge: {
|
||||
type: 'bezier',
|
||||
color: '#444'
|
||||
},
|
||||
|
||||
//This method is called on DOM label creation.
|
||||
//Use this method to add styles to
|
||||
//your node label.
|
||||
onCreateLabel: function(label, node){
|
||||
label.id = node.id;
|
||||
label.innerHTML = node.name;
|
||||
//set label styles
|
||||
var style = label.style;
|
||||
style.fontSize = '0.7em';
|
||||
style.textAlign= 'center';
|
||||
style.paddingTop = '3px';
|
||||
style.height = node.data.$height + 'px';
|
||||
|
||||
if(node.id == st.root) {
|
||||
style.color = '#eee';
|
||||
style.width = node.data.$width + 'px';
|
||||
} else {
|
||||
style.color = '#fff';
|
||||
style.width = 30 + 'px';
|
||||
}
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(jsonpie3);
|
||||
//compute node positions and layout
|
||||
st.compute();
|
||||
//emulate a click on the root node and
|
||||
//add an offset position to the tree
|
||||
st.onClick(st.root, {
|
||||
Move: {
|
||||
offsetY: -110
|
||||
}
|
||||
});
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Other - Composing Visualizations</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Other.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Composing Visualizations
|
||||
</h4>
|
||||
|
||||
In this example a RGraph is composed with another RGraph (for node rendering).<br /><br />
|
||||
The RGraph used for node rendering implements a custom node type defined in the <em>"Implementing Node Types"</em> example.<br /><br />
|
||||
This example shows that many visualizations can be composed to create new visualizations.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
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() {
|
||||
//init data
|
||||
var json = {
|
||||
'id': 'root',
|
||||
'name': 'RGraph( RGraph )',
|
||||
'data': {
|
||||
'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie10',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#f55'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie100',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#55f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie101',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 70,
|
||||
'$color': '#66f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie102',
|
||||
'name': 'pc3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#77f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie20',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#f77'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie200',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie201',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 60,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie30',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#f99'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie300',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 100,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
var jsonpie = {
|
||||
'id': 'root',
|
||||
'name': 'RGraph based Pie Chart',
|
||||
'data': {
|
||||
'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie1',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#f55'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie2',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#f77'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie3',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#f99'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie4',
|
||||
'name': 'pie4',
|
||||
'data': {
|
||||
'$angularWidth': 30,
|
||||
'$color': '#fbb'
|
||||
},
|
||||
'children': []
|
||||
}
|
||||
]
|
||||
};
|
||||
//end
|
||||
|
||||
//init nodetypes
|
||||
//Here we implement custom node rendering types for the RGraph
|
||||
//Using this feature requires some javascript and canvas experience.
|
||||
$jit.RGraph.Plot.NodeTypes.implement({
|
||||
//This node type is used for plotting pie-chart slices as nodes
|
||||
'nodepie': {
|
||||
'render': function(node, canvas) {
|
||||
var span = node.angleSpan, begin = span.begin, end = span.end;
|
||||
var polarNode = node.pos.getp(true);
|
||||
var polar = new $jit.Polar(polarNode.rho, begin);
|
||||
var p1coord = polar.getc(true);
|
||||
polar.theta = end;
|
||||
var p2coord = polar.getc(true);
|
||||
|
||||
var ctx = canvas.getCtx();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(p1coord.x, p1coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(p2coord.x, p2coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho, begin, end, false);
|
||||
ctx.fill();
|
||||
}
|
||||
},
|
||||
//Create a new node type that renders an entire RGraph visualization
|
||||
//as node
|
||||
'piechart': {
|
||||
'render': function(node, canvas, animating) {
|
||||
var ctx = canvas.getCtx(), pos = node.pos.getc(true);
|
||||
ctx.save();
|
||||
ctx.translate(pos.x, pos.y);
|
||||
pie.plot();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
//end
|
||||
|
||||
//init pie
|
||||
//This RGraph instance will be used as the node for
|
||||
//another RGraph instance.
|
||||
var pie = new $jit.RGraph({
|
||||
'injectInto': 'infovis',
|
||||
//Optional: create a background canvas and plot
|
||||
//concentric circles in it.
|
||||
'background': {
|
||||
CanvasStyles: {
|
||||
strokeStyle: '#555'
|
||||
}
|
||||
},
|
||||
//Add node/edge styles and set
|
||||
//overridable=true if you want your
|
||||
//styles to be individually overriden
|
||||
Node: {
|
||||
'overridable': true,
|
||||
'type':'nodepie'
|
||||
},
|
||||
Edge: {
|
||||
'type':'none'
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 30,
|
||||
//Don't create labels in this visualization
|
||||
withLabels: false,
|
||||
//Don't clear the entire canvas when plotting
|
||||
//this visualization
|
||||
clearCanvas: false
|
||||
});
|
||||
//load graph.
|
||||
pie.loadJSON(jsonpie);
|
||||
pie.compute();
|
||||
//end
|
||||
|
||||
//init rgraph
|
||||
var rgraph = new $jit.RGraph({
|
||||
useCanvas: pie.canvas,
|
||||
//Add node/edge styles and set
|
||||
//overridable=true if you want your
|
||||
//styles to be individually overriden
|
||||
Node: {
|
||||
//set the RGraph rendering function
|
||||
//as node type
|
||||
'type': 'piechart'
|
||||
},
|
||||
Edge: {
|
||||
color: '#772277'
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 100,
|
||||
//Duration
|
||||
duration: 1500,
|
||||
//Add styles to node labels on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
var style = domElement.style;
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#fff";
|
||||
style.cursor = "pointer";
|
||||
domElement.onclick = function() {
|
||||
rgraph.onClick(node.id, {
|
||||
hideLabels: false
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
style.display = '';
|
||||
}
|
||||
});
|
||||
//load graph.
|
||||
rgraph.loadJSON(json);
|
||||
rgraph.refresh();
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Other - Composing Visualizations 2</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Other.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Composing Visualizations 2
|
||||
</h4>
|
||||
|
||||
In this example a SpaceTree is composed with a RGraph (for node rendering).<br /><br />
|
||||
The RGraph used for node rendering implements a custom node type defined in the <em>"Implementing Node Types"</em> example.<br /><br />
|
||||
This example shows that many visualizations can be composed to create new visualizations.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,309 +0,0 @@
|
|||
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() {
|
||||
//init data
|
||||
var json = {
|
||||
'id': 'root',
|
||||
'name': 'root',
|
||||
'data': {
|
||||
//'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie10',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#f55'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie100',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#55f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie101',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 70,
|
||||
'$color': '#66f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie102',
|
||||
'name': 'pc3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#77f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie20',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#f77'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie200',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#88f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
},
|
||||
{
|
||||
'id':'pie201',
|
||||
'name': 'pc2',
|
||||
'data': {
|
||||
'$angularWidth': 60,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id':'pie30',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#f99'
|
||||
},
|
||||
'children': [
|
||||
{
|
||||
'id':'pie300',
|
||||
'name': 'pc1',
|
||||
'data': {
|
||||
'$angularWidth': 100,
|
||||
'$color': '#aaf'
|
||||
},
|
||||
'children': []
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
var jsonpie = {
|
||||
'id': 'root',
|
||||
'name': 'RGraph based Pie Chart',
|
||||
'data': {
|
||||
'$type': 'none'
|
||||
},
|
||||
'children':[
|
||||
{
|
||||
'id':'pie1',
|
||||
'name': 'pie1',
|
||||
'data': {
|
||||
'$angularWidth': 20,
|
||||
'$color': '#55f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie2',
|
||||
'name': 'pie2',
|
||||
'data': {
|
||||
'$angularWidth': 40,
|
||||
'$color': '#77f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie3',
|
||||
'name': 'pie3',
|
||||
'data': {
|
||||
'$angularWidth': 10,
|
||||
'$color': '#99f'
|
||||
},
|
||||
'children': []
|
||||
},
|
||||
{
|
||||
'id':'pie4',
|
||||
'name': 'pie4',
|
||||
'data': {
|
||||
'$angularWidth': 30,
|
||||
'$color': '#bbf'
|
||||
},
|
||||
'children': []
|
||||
}
|
||||
]
|
||||
};
|
||||
//end
|
||||
|
||||
//init nodetypes
|
||||
//Here we implement custom node rendering types for the RGraph
|
||||
//Using this feature requires some javascript and canvas experience.
|
||||
$jit.RGraph.Plot.NodeTypes.implement({
|
||||
//This node type is used for plotting pie-chart slices as nodes
|
||||
'shortnodepie': {
|
||||
'render': function(node, canvas) {
|
||||
var ldist = this.config.levelDistance;
|
||||
var span = node.angleSpan, begin = span.begin, end = span.end;
|
||||
var polarNode = node.pos.getp(true);
|
||||
|
||||
var polar = new $jit.Polar(polarNode.rho, begin);
|
||||
var p1coord = polar.getc(true);
|
||||
|
||||
polar.theta = end;
|
||||
var p2coord = polar.getc(true);
|
||||
|
||||
polar.rho += ldist;
|
||||
var p3coord = polar.getc(true);
|
||||
|
||||
polar.theta = begin;
|
||||
var p4coord = polar.getc(true);
|
||||
|
||||
|
||||
var ctx = canvas.getCtx();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(p1coord.x, p1coord.y);
|
||||
ctx.lineTo(p4coord.x, p4coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho, begin, end, false);
|
||||
|
||||
ctx.moveTo(p2coord.x, p2coord.y);
|
||||
ctx.lineTo(p3coord.x, p3coord.y);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, polarNode.rho + ldist, end, begin, true);
|
||||
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$jit.ST.Plot.NodeTypes.implement({
|
||||
//Create a new node type that renders an entire RGraph visualization
|
||||
'piechart': {
|
||||
'render': function(node, canvas, animating) {
|
||||
var ctx = canvas.getCtx(), pos = node.pos.getc(true);
|
||||
ctx.save();
|
||||
ctx.translate(pos.x, pos.y);
|
||||
pie.plot();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
//end
|
||||
|
||||
//init pie
|
||||
var pie = new $jit.RGraph({
|
||||
'injectInto': 'infovis',
|
||||
//Add node/edge styles and set
|
||||
//overridable=true if you want your
|
||||
//styles to be individually overriden
|
||||
Node: {
|
||||
'overridable': true,
|
||||
'type':'shortnodepie'
|
||||
},
|
||||
Edge: {
|
||||
'type':'none'
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 15,
|
||||
//Don't create labels for this visualization
|
||||
withLabels: false,
|
||||
//Don't clear the canvas when plotting
|
||||
clearCanvas: false
|
||||
});
|
||||
//load graph.
|
||||
pie.loadJSON(jsonpie);
|
||||
pie.compute();
|
||||
//end
|
||||
|
||||
//init st
|
||||
var st = new $jit.ST({
|
||||
useCanvas: pie.canvas,
|
||||
orientation: 'bottom',
|
||||
//Add node/edge styles
|
||||
Node: {
|
||||
type: 'piechart',
|
||||
width: 60,
|
||||
height: 60
|
||||
},
|
||||
Edge: {
|
||||
color: '#999',
|
||||
type: 'quadratic:begin'
|
||||
},
|
||||
//Parent-children distance
|
||||
levelDistance: 60,
|
||||
|
||||
//Add styles to node labels on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
//add some styles to the node label
|
||||
var style = domElement.style;
|
||||
domElement.id = node.id;
|
||||
style.color = '#fff';
|
||||
style.fontSize = '0.8em';
|
||||
style.textAlign = 'center';
|
||||
style.width = "60px";
|
||||
style.height = "24px";
|
||||
style.paddingTop = "22px";
|
||||
style.cursor = 'pointer';
|
||||
domElement.innerHTML = node.name;
|
||||
domElement.onclick = function() {
|
||||
st.onClick(node.id, {
|
||||
Move: {
|
||||
offsetY: -90
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(json);
|
||||
//compute node positions and layout
|
||||
st.compute();
|
||||
//optional: make a translation of the tree
|
||||
st.geom.translate(new $jit.Complex(0, 200), "start");
|
||||
//Emulate a click on the root node.
|
||||
st.onClick(st.root, {
|
||||
Move: {
|
||||
offsetY: -90
|
||||
}
|
||||
});
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>PieChart - Pie Chart Example</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/PieChart.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Pie Chart Example
|
||||
</h4>
|
||||
|
||||
A static Pie Chart example with gradients that displays tooltips when hovering the stacks.<br /><br />
|
||||
Click the Update button to update the JSON data.
|
||||
|
||||
</div>
|
||||
<ul id="id-list"></ul>
|
||||
<a id="update" href="#" class="theme button white">Update Data</a>
|
||||
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
'label': ['label A', 'label B', 'label C', 'label D'],
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [20, 40, 15, 5]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 10, 45, 10]
|
||||
},
|
||||
{
|
||||
'label': 'date E',
|
||||
'values': [38, 20, 35, 17]
|
||||
},
|
||||
{
|
||||
'label': 'date F',
|
||||
'values': [58, 10, 35, 32]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 60, 34, 38]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 25, 40]
|
||||
}]
|
||||
|
||||
};
|
||||
//end
|
||||
var json2 = {
|
||||
'values': [
|
||||
{
|
||||
'label': 'date A',
|
||||
'values': [10, 40, 15, 7]
|
||||
},
|
||||
{
|
||||
'label': 'date B',
|
||||
'values': [30, 40, 45, 9]
|
||||
},
|
||||
{
|
||||
'label': 'date D',
|
||||
'values': [55, 30, 34, 26]
|
||||
},
|
||||
{
|
||||
'label': 'date C',
|
||||
'values': [26, 40, 85, 28]
|
||||
}]
|
||||
|
||||
};
|
||||
//init PieChart
|
||||
var pieChart = new $jit.PieChart({
|
||||
//id of the visualization container
|
||||
injectInto: 'infovis',
|
||||
//whether to add animations
|
||||
animate: true,
|
||||
//offsets
|
||||
offset: 30,
|
||||
sliceOffset: 0,
|
||||
labelOffset: 20,
|
||||
//slice style
|
||||
type: useGradients? 'stacked:gradient' : 'stacked',
|
||||
//whether to show the labels for the slices
|
||||
showLabels:true,
|
||||
//resize labels according to
|
||||
//pie slices values set 7px as
|
||||
//min label size
|
||||
resizeLabels: 7,
|
||||
//label styling
|
||||
Label: {
|
||||
type: labelType, //Native or HTML
|
||||
size: 20,
|
||||
family: 'Arial',
|
||||
color: 'white'
|
||||
},
|
||||
//enable tips
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function(tip, elem) {
|
||||
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
pieChart.loadJSON(json);
|
||||
//end
|
||||
var list = $jit.id('id-list'),
|
||||
button = $jit.id('update');
|
||||
//update json on click
|
||||
$jit.util.addEvent(button, 'click', function() {
|
||||
var util = $jit.util;
|
||||
if(util.hasClass(button, 'gray')) return;
|
||||
util.removeClass(button, 'white');
|
||||
util.addClass(button, 'gray');
|
||||
pieChart.updateJSON(json2);
|
||||
});
|
||||
//dynamically add legend to list
|
||||
var legend = pieChart.getLegend(),
|
||||
listItems = [];
|
||||
for(var name in legend) {
|
||||
listItems.push('<div class=\'query-color\' style=\'background-color:'
|
||||
+ legend[name] +'\'> </div>' + name);
|
||||
}
|
||||
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>RGraph - Tree Animation</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Tree Animation
|
||||
</h4>
|
||||
|
||||
A static JSON Tree structure is used as input for this visualization.<br /><br />
|
||||
<b>Click</b> on a node to move the tree and center that node.<br /><br />
|
||||
The centered node's children are displayed in a relations list in the right column.<br /><br />
|
||||
<b>Use the mouse wheel</b> to zoom and <b>drag and drop the canvas</b> to pan.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,477 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
id: "190_0",
|
||||
name: "Pearl Jam",
|
||||
children: [{
|
||||
id: "306208_1",
|
||||
name: "Pearl Jam & Cypress Hill",
|
||||
data: {
|
||||
relation: "<h4>Pearl Jam & Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: collaboration)</div></li><li>Cypress Hill <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "84_2",
|
||||
name: "Cypress Hill",
|
||||
data: {
|
||||
relation: "<h4>Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam & Cypress Hill <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "107877_3",
|
||||
name: "Neil Young & Pearl Jam",
|
||||
data: {
|
||||
relation: "<h4>Neil Young & Pearl Jam</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: collaboration)</div></li><li>Neil Young <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "964_4",
|
||||
name: "Neil Young",
|
||||
data: {
|
||||
relation: "<h4>Neil Young</h4><b>Connections:</b><ul><li>Neil Young & Pearl Jam <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236797_5",
|
||||
name: "Jeff Ament",
|
||||
data: {
|
||||
relation: "<h4>Jeff Ament</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Mother Love Bone <div>(relation: member of band)</div></li><li>Green River <div>(relation: member of band)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>Three Fish <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "1756_6",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "14581_7",
|
||||
name: "Mother Love Bone",
|
||||
data: {
|
||||
relation: "<h4>Mother Love Bone</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "50188_8",
|
||||
name: "Green River",
|
||||
data: {
|
||||
relation: "<h4>Green River</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "65452_9",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "115632_10",
|
||||
name: "Three Fish",
|
||||
data: {
|
||||
relation: "<h4>Three Fish</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "346850_11",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "41529_12",
|
||||
name: "Stone Gossard",
|
||||
data: {
|
||||
relation: "<h4>Stone Gossard</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Mother Love Bone <div>(relation: member of band)</div></li><li>Brad <div>(relation: member of band)</div></li><li>Green River <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "1756_13",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "14581_14",
|
||||
name: "Mother Love Bone",
|
||||
data: {
|
||||
relation: "<h4>Mother Love Bone</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "24119_15",
|
||||
name: "Brad",
|
||||
data: {
|
||||
relation: "<h4>Brad</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "50188_16",
|
||||
name: "Green River",
|
||||
data: {
|
||||
relation: "<h4>Green River</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "346850_17",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "131161_18",
|
||||
name: "Eddie Vedder",
|
||||
data: {
|
||||
relation: "<h4>Eddie Vedder</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Eddie Vedder & Zeke <div>(relation: collaboration)</div></li><li>Bad Radio <div>(relation: member of band)</div></li><li>Beck & Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "1756_19",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "72007_20",
|
||||
name: "Eddie Vedder & Zeke",
|
||||
data: {
|
||||
relation: "<h4>Eddie Vedder & Zeke</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "236657_21",
|
||||
name: "Bad Radio",
|
||||
data: {
|
||||
relation: "<h4>Bad Radio</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "432176_22",
|
||||
name: "Beck & Eddie Vedder",
|
||||
data: {
|
||||
relation: "<h4>Beck & Eddie Vedder</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236583_23",
|
||||
name: "Mike McCready",
|
||||
data: {
|
||||
relation: "<h4>Mike McCready</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Mad Season <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>$10,000 Gold Chain <div>(relation: collaboration)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>The Rockfords <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "1744_24",
|
||||
name: "Mad Season",
|
||||
data: {
|
||||
relation: "<h4>Mad Season</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "1756_25",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "43661_26",
|
||||
name: "$10,000 Gold Chain",
|
||||
data: {
|
||||
relation: "<h4>$10,000 Gold Chain</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "65452_27",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "153766_28",
|
||||
name: "The Rockfords",
|
||||
data: {
|
||||
relation: "<h4>The Rockfords</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "346850_29",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236585_30",
|
||||
name: "Matt Cameron",
|
||||
data: {
|
||||
relation: "<h4>Matt Cameron</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Soundgarden <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Eleven <div>(relation: supporting musician)</div></li><li>Queens of the Stone Age <div>(relation: member of band)</div></li><li>Wellwater Conspiracy <div>(relation: member of band)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>Tone Dogs <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "1111_31",
|
||||
name: "Soundgarden",
|
||||
data: {
|
||||
relation: "<h4>Soundgarden</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "1756_32",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "9570_33",
|
||||
name: "Eleven",
|
||||
data: {
|
||||
relation: "<h4>Eleven</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: supporting musician)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "11783_34",
|
||||
name: "Queens of the Stone Age",
|
||||
data: {
|
||||
relation: "<h4>Queens of the Stone Age</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "61972_35",
|
||||
name: "Wellwater Conspiracy",
|
||||
data: {
|
||||
relation: "<h4>Wellwater Conspiracy</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "65452_36",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "353097_37",
|
||||
name: "Tone Dogs",
|
||||
data: {
|
||||
relation: "<h4>Tone Dogs</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236594_38",
|
||||
name: "Dave Krusen",
|
||||
data: {
|
||||
relation: "<h4>Dave Krusen</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Candlebox <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "2092_39",
|
||||
name: "Candlebox",
|
||||
data: {
|
||||
relation: "<h4>Candlebox</h4><b>Connections:</b><ul><li>Dave Krusen <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236022_40",
|
||||
name: "Matt Chamberlain",
|
||||
data: {
|
||||
relation: "<h4>Matt Chamberlain</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Critters Buggin <div>(relation: member of band)</div></li><li>Edie Brickell and New Bohemians <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "54761_41",
|
||||
name: "Critters Buggin",
|
||||
data: {
|
||||
relation: "<h4>Critters Buggin</h4><b>Connections:</b><ul><li>Matt Chamberlain <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "92043_42",
|
||||
name: "Edie Brickell and New Bohemians",
|
||||
data: {
|
||||
relation: "<h4>Edie Brickell and New Bohemians</h4><b>Connections:</b><ul><li>Matt Chamberlain <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236611_43",
|
||||
name: "Dave Abbruzzese",
|
||||
data: {
|
||||
relation: "<h4>Dave Abbruzzese</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Green Romance Orchestra <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "276933_44",
|
||||
name: "Green Romance Orchestra",
|
||||
data: {
|
||||
relation: "<h4>Green Romance Orchestra</h4><b>Connections:</b><ul><li>Dave Abbruzzese <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "236612_45",
|
||||
name: "Jack Irons",
|
||||
data: {
|
||||
relation: "<h4>Jack Irons</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Redd Kross <div>(relation: member of band)</div></li><li>Eleven <div>(relation: member of band)</div></li><li>Red Hot Chili Peppers <div>(relation: member of band)</div></li><li>Anthym <div>(relation: member of band)</div></li><li>What Is This? <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [{
|
||||
id: "4619_46",
|
||||
name: "Redd Kross",
|
||||
data: {
|
||||
relation: "<h4>Redd Kross</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "9570_47",
|
||||
name: "Eleven",
|
||||
data: {
|
||||
relation: "<h4>Eleven</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "12389_48",
|
||||
name: "Red Hot Chili Peppers",
|
||||
data: {
|
||||
relation: "<h4>Red Hot Chili Peppers</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "114288_49",
|
||||
name: "Anthym",
|
||||
data: {
|
||||
relation: "<h4>Anthym</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}, {
|
||||
id: "240013_50",
|
||||
name: "What Is This?",
|
||||
data: {
|
||||
relation: "<h4>What Is This?</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}]
|
||||
}],
|
||||
data: {
|
||||
relation: "<h4>Pearl Jam</h4><b>Connections:</b><ul><li>Pearl Jam & Cypress Hill <div>(relation: collaboration)</div></li><li>Neil Young & Pearl Jam <div>(relation: collaboration)</div></li><li>Jeff Ament <div>(relation: member of band)</div></li><li>Stone Gossard <div>(relation: member of band)</div></li><li>Eddie Vedder <div>(relation: member of band)</div></li><li>Mike McCready <div>(relation: member of band)</div></li><li>Matt Cameron <div>(relation: member of band)</div></li><li>Dave Krusen <div>(relation: member of band)</div></li><li>Matt Chamberlain <div>(relation: member of band)</div></li><li>Dave Abbruzzese <div>(relation: member of band)</div></li><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
}
|
||||
};
|
||||
//end
|
||||
|
||||
//init RGraph
|
||||
var rgraph = new $jit.RGraph({
|
||||
//Where to append the visualization
|
||||
injectInto: 'infovis',
|
||||
//Optional: create a background canvas that plots
|
||||
//concentric circles.
|
||||
background: {
|
||||
CanvasStyles: {
|
||||
strokeStyle: '#555'
|
||||
}
|
||||
},
|
||||
//Add navigation capabilities:
|
||||
//zooming by scrolling and panning.
|
||||
Navigation: {
|
||||
enable: true,
|
||||
panning: true,
|
||||
zooming: 10
|
||||
},
|
||||
//Set Node and Edge styles.
|
||||
Node: {
|
||||
color: '#ddeeff'
|
||||
},
|
||||
|
||||
Edge: {
|
||||
color: '#C17878',
|
||||
lineWidth:1.5
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("centering " + node.name + "...");
|
||||
//Add the relation list in the right column.
|
||||
//This list is taken from the data property of each JSON node.
|
||||
$jit.id('inner-details').innerHTML = node.data.relation;
|
||||
},
|
||||
|
||||
onAfterCompute: function(){
|
||||
Log.write("done");
|
||||
},
|
||||
//Add the name of the node in the correponding label
|
||||
//and a click handler to move the graph.
|
||||
//This method is called once, on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
domElement.onclick = function(){
|
||||
rgraph.onClick(node.id);
|
||||
};
|
||||
},
|
||||
//Change some label dom properties.
|
||||
//This method is called each time a label is plotted.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ccc";
|
||||
|
||||
} else if(node._depth == 2){
|
||||
style.fontSize = "0.7em";
|
||||
style.color = "#494949";
|
||||
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
});
|
||||
//load JSON data
|
||||
rgraph.loadJSON(json);
|
||||
//trigger small animation
|
||||
rgraph.graph.eachNode(function(n) {
|
||||
var pos = n.getPos();
|
||||
pos.setc(-200, -200);
|
||||
});
|
||||
rgraph.compute('end');
|
||||
rgraph.fx.animate({
|
||||
modes:['polar'],
|
||||
duration: 2000
|
||||
});
|
||||
//end
|
||||
//append information about the root relations in the right column
|
||||
$jit.id('inner-details').innerHTML = rgraph.graph.getNode(rgraph.root).data.relation;
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>RGraph - Weighted Graph Animation</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Weighted Graph Animation
|
||||
</h4>
|
||||
|
||||
A static JSON graph structure is used for this animation.<br /><br />
|
||||
For each JSON node/edge the properties prefixed with the dollar sign ($) set the type of node/edge to be plotted, its style and its dimensions.<br /><br />
|
||||
Line weights are added programmatically, <em>onBeforePlotLine</em>.<br /><br />
|
||||
An <b>Elastic</b> transition is used instead of the linear transition for the animation.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,341 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
//If a node in this JSON structure
|
||||
//has the "$type" or "$dim" parameters
|
||||
//defined it will override the "type" and
|
||||
//"dim" parameters globally defined in the
|
||||
//RGraph constructor.
|
||||
var json = [{
|
||||
"id": "node0",
|
||||
"name": "node0 name",
|
||||
"data": {
|
||||
"$dim": 16.759175934208628,
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"$type":"arrow",
|
||||
"$color":"#dd99dd",
|
||||
"$dim":25,
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node1",
|
||||
"name": "node1 name",
|
||||
"data": {
|
||||
"$dim": 13.077119090372014,
|
||||
"$type": "square",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node2",
|
||||
"name": "node2 name",
|
||||
"data": {
|
||||
"$dim": 24.937383149648717,
|
||||
"$type": "triangle",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node3",
|
||||
"name": "node3 name",
|
||||
"data": {
|
||||
"$dim": 10.53272740718869,
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"$type":"arrow",
|
||||
"$direction": ["node4", "node3"],
|
||||
"$dim":25,
|
||||
"$color":"#dd99dd",
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node4",
|
||||
"name": "node4 name",
|
||||
"data": {
|
||||
"$dim": 5.3754347037767345,
|
||||
"$type":"triangle",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"id": "node5",
|
||||
"name": "node5 name",
|
||||
"data": {
|
||||
"$dim": 32.26403873194912,
|
||||
"$type": "star",
|
||||
"some other key": "some other value"
|
||||
},
|
||||
"adjacencies": [{
|
||||
"nodeTo": "node0",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
"weight": 1
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"weight": 3
|
||||
}
|
||||
}]
|
||||
}];
|
||||
//end
|
||||
//init RGraph
|
||||
var rgraph = new $jit.RGraph({
|
||||
'injectInto': 'infovis',
|
||||
//Optional: Add a background canvas
|
||||
//that draws some concentric circles.
|
||||
'background': {
|
||||
'CanvasStyles': {
|
||||
'strokeStyle': '#555',
|
||||
'shadowBlur': 50,
|
||||
'shadowColor': '#ccc'
|
||||
}
|
||||
},
|
||||
//Nodes and Edges parameters
|
||||
//can be overridden if defined in
|
||||
//the JSON input data.
|
||||
//This way we can define different node
|
||||
//types individually.
|
||||
Node: {
|
||||
'overridable': true,
|
||||
'color': '#cc0000'
|
||||
},
|
||||
Edge: {
|
||||
'overridable': true,
|
||||
'color': '#cccc00'
|
||||
},
|
||||
//Set polar interpolation.
|
||||
//Default's linear.
|
||||
interpolation: 'polar',
|
||||
//Change the transition effect from linear
|
||||
//to elastic.
|
||||
transition: $jit.Trans.Elastic.easeOut,
|
||||
//Change other animation parameters.
|
||||
duration:3500,
|
||||
fps: 30,
|
||||
//Change father-child distance.
|
||||
levelDistance: 200,
|
||||
//This method is called right before plotting
|
||||
//an edge. This method is useful to change edge styles
|
||||
//individually.
|
||||
onBeforePlotLine: function(adj){
|
||||
//Add some random lineWidth to each edge.
|
||||
if (!adj.data.$lineWidth)
|
||||
adj.data.$lineWidth = Math.random() * 5 + 1;
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("centering " + node.name + "...");
|
||||
|
||||
//Make right column relations list.
|
||||
var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
|
||||
html += "<ul>";
|
||||
node.eachAdjacency(function(adj){
|
||||
var child = adj.nodeTo;
|
||||
html += "<li>" + child.name + "</li>";
|
||||
});
|
||||
html += "</ul>";
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
},
|
||||
//Add node click handler and some styles.
|
||||
//This method is called only once for each node/label crated.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
domElement.onclick = function () {
|
||||
rgraph.onClick(node.id, { hideLabels: false });
|
||||
};
|
||||
var style = domElement.style;
|
||||
style.cursor = 'pointer';
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#fff";
|
||||
},
|
||||
//This method is called when rendering/moving a label.
|
||||
//This is method is useful to make some last minute changes
|
||||
//to node labels like adding some position offset.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
},
|
||||
|
||||
onAfterCompute: function(){
|
||||
Log.write("done");
|
||||
}
|
||||
|
||||
});
|
||||
//load graph.
|
||||
rgraph.loadJSON(json, 1);
|
||||
|
||||
//compute positions and plot
|
||||
rgraph.refresh();
|
||||
//end
|
||||
rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
|
||||
rgraph.controller.onAfterCompute();
|
||||
|
||||
}
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>RGraph - Graph Operations</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Graph Operations
|
||||
</h4>
|
||||
|
||||
You can do the following operations with the RGraph<br /><br />
|
||||
1.- Removing subtrees or nodes<br /><br />
|
||||
2.- Removing edges<br /><br />
|
||||
3.- Adding another graph, also called sum<br /><br />
|
||||
4.- Morphing (or transforming) the graph into another one<br />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Global Options</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
duration:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-duration">
|
||||
<option>1000</option>
|
||||
<option>1500</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
fps:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-fps">
|
||||
<option>10</option>
|
||||
<option selected="selected">30</option>
|
||||
<option>60</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
hide labels:
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" checked="checked" id="hide-labels" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>1.- Remove Nodes</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-remove-nodes">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>iter</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Remove" id="remove-nodes" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>2.- Remove Edges</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-remove-edges">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>iter</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Remove" id="remove-edges" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>3.- Add Graph (Sum)</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-sum">
|
||||
<option>fade:seq</option>
|
||||
<option>fade:con</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Sum" id="sum" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>4.- Morph</h4>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
type:
|
||||
</td>
|
||||
<td>
|
||||
<select id="select-type-morph">
|
||||
<option>fade:con</option>
|
||||
<option>replot</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Morph" id="morph" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,617 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
"id": "190_0",
|
||||
"name": "Pearl Jam",
|
||||
"children": [{
|
||||
"id": "306208_1",
|
||||
"name": "Pearl Jam & Cypress Hill",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": [{
|
||||
"id": "84_2",
|
||||
"name": "Cypress Hill",
|
||||
"data": {
|
||||
"band": "Pearl Jam & Cypress Hill",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "107877_3",
|
||||
"name": "Neil Young & Pearl Jam",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": [{
|
||||
"id": "964_4",
|
||||
"name": "Neil Young",
|
||||
"data": {
|
||||
"band": "Neil Young & Pearl Jam",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236797_5",
|
||||
"name": "Jeff Ament",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_6",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "14581_7",
|
||||
"name": "Mother Love Bone",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "50188_8",
|
||||
"name": "Green River",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_9",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "115632_10",
|
||||
"name": "Three Fish",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_11",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Jeff Ament",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "41529_12",
|
||||
"name": "Stone Gossard",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_13",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "14581_14",
|
||||
"name": "Mother Love Bone",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "24119_15",
|
||||
"name": "Brad",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "50188_16",
|
||||
"name": "Green River",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_17",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Stone Gossard",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "131161_18",
|
||||
"name": "Eddie Vedder",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1756_19",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "72007_20",
|
||||
"name": "Eddie Vedder & Zeke",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "236657_21",
|
||||
"name": "Bad Radio",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "432176_22",
|
||||
"name": "Beck & Eddie Vedder",
|
||||
"data": {
|
||||
"band": "Eddie Vedder",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236583_23",
|
||||
"name": "Mike McCready",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1744_24",
|
||||
"name": "Mad Season",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1756_25",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "43661_26",
|
||||
"name": "$10,000 Gold Chain",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_27",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "153766_28",
|
||||
"name": "The Rockfords",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "346850_29",
|
||||
"name": "Gossman Project",
|
||||
"data": {
|
||||
"band": "Mike McCready",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236585_30",
|
||||
"name": "Matt Cameron",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "1111_31",
|
||||
"name": "Soundgarden",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "1756_32",
|
||||
"name": "Temple of the Dog",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "9570_33",
|
||||
"name": "Eleven",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "supporting musician"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "11783_34",
|
||||
"name": "Queens of the Stone Age",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "61972_35",
|
||||
"name": "Wellwater Conspiracy",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "65452_36",
|
||||
"name": "M.A.C.C.",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "collaboration"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "353097_37",
|
||||
"name": "Tone Dogs",
|
||||
"data": {
|
||||
"band": "Matt Cameron",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236594_38",
|
||||
"name": "Dave Krusen",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "2092_39",
|
||||
"name": "Candlebox",
|
||||
"data": {
|
||||
"band": "Dave Krusen",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236022_40",
|
||||
"name": "Matt Chamberlain",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "54761_41",
|
||||
"name": "Critters Buggin",
|
||||
"data": {
|
||||
"band": "Matt Chamberlain",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "92043_42",
|
||||
"name": "Edie Brickell and New Bohemians",
|
||||
"data": {
|
||||
"band": "Matt Chamberlain",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236611_43",
|
||||
"name": "Dave Abbruzzese",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "276933_44",
|
||||
"name": "Green Romance Orchestra",
|
||||
"data": {
|
||||
"band": "Dave Abbruzzese",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}, {
|
||||
"id": "236612_45",
|
||||
"name": "Jack Irons",
|
||||
"data": {
|
||||
"band": "Pearl Jam",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": [{
|
||||
"id": "4619_46",
|
||||
"name": "Redd Kross",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "9570_47",
|
||||
"name": "Eleven",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "12389_48",
|
||||
"name": "Red Hot Chili Peppers",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "114288_49",
|
||||
"name": "Anthym",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"id": "240013_50",
|
||||
"name": "What Is This?",
|
||||
"data": {
|
||||
"band": "Jack Irons",
|
||||
"relation": "member of band"
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}],
|
||||
"data": []
|
||||
};
|
||||
|
||||
var graph = '[{id:"190_0", adjacencies:["node0"]}, {id:"node0", name:"node0 name", data:{"some other key":"some other value"}, adjacencies:["node1", "node2", "node3", "node4", "node5"]}, {id:"node1", name:"node1 name", data:{"some other key":"some other value"}, adjacencies:["node0", "node2", "node3", "node4", "node5"]}, {id:"node2", name:"node2 name", data:{"some other key":"some other value"}, adjacencies:["node0", "node1", "node3", "node4", "node5"]}, {id:"node3", name:"node3 name", data:{"some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node4", "node5"]}, {id:"node4", name:"node4 name", data:{"some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node3", "node5"]}, {id:"node5", name:"node5 name", data:{"some other key":"some other value"}, adjacencies:["node0", "node1", "node2", "node3", "node4"]}, {id:"4619_46", adjacencies:["190_0"]}, {id:"236585_30", adjacencies:["190_0"]}, {id:"131161_18", adjacencies:["190_0"]}, {id:"41529_12", adjacencies:["190_0"]}]';
|
||||
//end
|
||||
//init RGraph
|
||||
var rgraph = new $jit.RGraph({
|
||||
'injectInto': 'infovis',
|
||||
//Optional: Create a background canvas
|
||||
//for painting concentric circles.
|
||||
'background': {
|
||||
'CanvasStyles': {
|
||||
'strokeStyle': '#555',
|
||||
'shadowBlur': 50,
|
||||
'shadowColor': '#ccc'
|
||||
}
|
||||
},
|
||||
//Set Edge and Node colors.
|
||||
Node: {
|
||||
color: '#ddeeff',
|
||||
overridable:true
|
||||
},
|
||||
|
||||
Edge: {
|
||||
overridable:true,
|
||||
color: '#C17878',
|
||||
lineWidth:1.5
|
||||
},
|
||||
//Add the node's name into the label
|
||||
//This method is called only once, on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
},
|
||||
|
||||
//Change the node's style based on its position.
|
||||
//This method is called each time a label is rendered/positioned
|
||||
//during an animation.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ccc";
|
||||
|
||||
} else if(node._depth == 2){
|
||||
style.fontSize = "0.7em";
|
||||
style.color = "#494949";
|
||||
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
rgraph.loadJSON(json);
|
||||
|
||||
//add some extra edges to the tree
|
||||
//to make it a graph (just for fun)
|
||||
rgraph.graph.addAdjacence({
|
||||
'id': '236585_30'
|
||||
}, {
|
||||
'id': '236583_23'
|
||||
}, null);
|
||||
rgraph.graph.addAdjacence({
|
||||
'id': '236585_30'
|
||||
}, {
|
||||
'id': '4619_46'
|
||||
}, null);
|
||||
|
||||
//Compute positions and plot
|
||||
rgraph.refresh();
|
||||
//end
|
||||
|
||||
//Global Options
|
||||
//Define a function that returns the selected duration
|
||||
function getDuration() {
|
||||
var sduration = document.getElementById('select-duration');
|
||||
var sdindex = sduration.selectedIndex;
|
||||
return parseInt(sduration.options[sdindex].text);
|
||||
}
|
||||
//Define a function that returns the selected fps
|
||||
function getFPS() {
|
||||
var fpstype = document.getElementById('select-fps');
|
||||
var fpsindex = fpstype.selectedIndex;
|
||||
return parseInt(fpstype.options[fpsindex].text);
|
||||
}
|
||||
//Define a function that returns whether you have to
|
||||
//hide labels during the animation or not.
|
||||
function hideLabels() {
|
||||
return document.getElementById('hide-labels').checked;
|
||||
}
|
||||
|
||||
//init handlers
|
||||
//Add event handlers to the right column controls.
|
||||
|
||||
//Remove Nodes
|
||||
var button = $jit.id('remove-nodes');
|
||||
button.onclick = function() {
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-remove-nodes');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//get node ids to be removed.
|
||||
var n = rgraph.graph.getNode('236797_5');
|
||||
if(!n) return;
|
||||
var subnodes = n.getSubnodes(0);
|
||||
var map = [];
|
||||
for (var i = 0; i < subnodes.length; i++) {
|
||||
map.push(subnodes[i].id);
|
||||
}
|
||||
//perform node-removing animation.
|
||||
rgraph.op.removeNode(map.reverse(), {
|
||||
type: type,
|
||||
duration: getDuration(),
|
||||
fps: getFPS(),
|
||||
hideLabels:hideLabels()
|
||||
});
|
||||
};
|
||||
|
||||
//Remove edges
|
||||
button = $jit.id('remove-edges');
|
||||
button.onclick = function() {
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-remove-edges');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform edge removing animation.
|
||||
rgraph.op.removeEdge([['236585_30', "190_0"], ['236585_30', '4619_46']], {
|
||||
type: type,
|
||||
duration: getDuration(),
|
||||
fps: getFPS(),
|
||||
hideLabels: hideLabels()
|
||||
});
|
||||
};
|
||||
|
||||
//Add a Graph (Sum)
|
||||
button = $jit.id('sum');
|
||||
button.onclick = function(){
|
||||
//get graph to add.
|
||||
var trueGraph = eval('(' + graph + ')');
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-sum');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform sum animation.
|
||||
rgraph.op.sum(trueGraph, {
|
||||
type: type,
|
||||
fps: getFPS(),
|
||||
duration: getDuration(),
|
||||
hideLabels: hideLabels(),
|
||||
onComplete: function(){
|
||||
Log.write("sum complete!");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Morph
|
||||
button = $jit.id('morph');
|
||||
button.onclick = function(){
|
||||
//get graph to morph to.
|
||||
var trueGraph = eval('(' + graph + ')');
|
||||
//get animation type.
|
||||
var stype = $jit.id('select-type-morph');
|
||||
var sindex = stype.selectedIndex;
|
||||
var type = stype.options[sindex].text;
|
||||
//perform morphing animation.
|
||||
rgraph.op.morph(trueGraph, {
|
||||
type: type,
|
||||
fps: getFPS(),
|
||||
duration: getDuration(),
|
||||
hideLabels: hideLabels(),
|
||||
onComplete: function(){
|
||||
Log.write("morph complete!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>RGraph - Node Events</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example4.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Node Events
|
||||
</h4>
|
||||
|
||||
This example shows how to add node events to the visualization.<br /><br />
|
||||
This example uses native canvas text for drawing the labels.<br /><br />
|
||||
<b>Drag and drop</b> nodes around.
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example4.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,568 +0,0 @@
|
|||
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(){
|
||||
// init data
|
||||
var json = {
|
||||
id: "190_0",
|
||||
name: "Pearl Jam",
|
||||
children: [
|
||||
{
|
||||
id: "306208_1",
|
||||
name: "Pearl Jam & Cypress Hill",
|
||||
data: {
|
||||
relation: "<h4>Pearl Jam & Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: collaboration)</div></li><li>Cypress Hill <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "84_2",
|
||||
name: "Cypress Hill",
|
||||
data: {
|
||||
relation: "<h4>Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam & Cypress Hill <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "107877_3",
|
||||
name: "Neil Young & Pearl Jam",
|
||||
data: {
|
||||
relation: "<h4>Neil Young & Pearl Jam</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: collaboration)</div></li><li>Neil Young <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "964_4",
|
||||
name: "Neil Young",
|
||||
data: {
|
||||
relation: "<h4>Neil Young</h4><b>Connections:</b><ul><li>Neil Young & Pearl Jam <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236797_5",
|
||||
name: "Jeff Ament",
|
||||
data: {
|
||||
relation: "<h4>Jeff Ament</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Mother Love Bone <div>(relation: member of band)</div></li><li>Green River <div>(relation: member of band)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>Three Fish <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "1756_6",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "14581_7",
|
||||
name: "Mother Love Bone",
|
||||
data: {
|
||||
relation: "<h4>Mother Love Bone</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "50188_8",
|
||||
name: "Green River",
|
||||
data: {
|
||||
relation: "<h4>Green River</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "65452_9",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "115632_10",
|
||||
name: "Three Fish",
|
||||
data: {
|
||||
relation: "<h4>Three Fish</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "346850_11",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Jeff Ament <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "41529_12",
|
||||
name: "Stone Gossard",
|
||||
data: {
|
||||
relation: "<h4>Stone Gossard</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Mother Love Bone <div>(relation: member of band)</div></li><li>Brad <div>(relation: member of band)</div></li><li>Green River <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "1756_13",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "14581_14",
|
||||
name: "Mother Love Bone",
|
||||
data: {
|
||||
relation: "<h4>Mother Love Bone</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "24119_15",
|
||||
name: "Brad",
|
||||
data: {
|
||||
relation: "<h4>Brad</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "50188_16",
|
||||
name: "Green River",
|
||||
data: {
|
||||
relation: "<h4>Green River</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "346850_17",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Stone Gossard <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "131161_18",
|
||||
name: "Eddie Vedder",
|
||||
data: {
|
||||
relation: "<h4>Eddie Vedder</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Eddie Vedder & Zeke <div>(relation: collaboration)</div></li><li>Bad Radio <div>(relation: member of band)</div></li><li>Beck & Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "1756_19",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "72007_20",
|
||||
name: "Eddie Vedder & Zeke",
|
||||
data: {
|
||||
relation: "<h4>Eddie Vedder & Zeke</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "236657_21",
|
||||
name: "Bad Radio",
|
||||
data: {
|
||||
relation: "<h4>Bad Radio</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "432176_22",
|
||||
name: "Beck & Eddie Vedder",
|
||||
data: {
|
||||
relation: "<h4>Beck & Eddie Vedder</h4><b>Connections:</b><ul><li>Eddie Vedder <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236583_23",
|
||||
name: "Mike McCready",
|
||||
data: {
|
||||
relation: "<h4>Mike McCready</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Mad Season <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>$10,000 Gold Chain <div>(relation: collaboration)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>The Rockfords <div>(relation: member of band)</div></li><li>Gossman Project <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "1744_24",
|
||||
name: "Mad Season",
|
||||
data: {
|
||||
relation: "<h4>Mad Season</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "1756_25",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "43661_26",
|
||||
name: "$10,000 Gold Chain",
|
||||
data: {
|
||||
relation: "<h4>$10,000 Gold Chain</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "65452_27",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "153766_28",
|
||||
name: "The Rockfords",
|
||||
data: {
|
||||
relation: "<h4>The Rockfords</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "346850_29",
|
||||
name: "Gossman Project",
|
||||
data: {
|
||||
relation: "<h4>Gossman Project</h4><b>Connections:</b><ul><li>Mike McCready <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236585_30",
|
||||
name: "Matt Cameron",
|
||||
data: {
|
||||
relation: "<h4>Matt Cameron</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Soundgarden <div>(relation: member of band)</div></li><li>Temple of the Dog <div>(relation: member of band)</div></li><li>Eleven <div>(relation: supporting musician)</div></li><li>Queens of the Stone Age <div>(relation: member of band)</div></li><li>Wellwater Conspiracy <div>(relation: member of band)</div></li><li>M.A.C.C. <div>(relation: collaboration)</div></li><li>Tone Dogs <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "1111_31",
|
||||
name: "Soundgarden",
|
||||
data: {
|
||||
relation: "<h4>Soundgarden</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "1756_32",
|
||||
name: "Temple of the Dog",
|
||||
data: {
|
||||
relation: "<h4>Temple of the Dog</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "9570_33",
|
||||
name: "Eleven",
|
||||
data: {
|
||||
relation: "<h4>Eleven</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: supporting musician)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "11783_34",
|
||||
name: "Queens of the Stone Age",
|
||||
data: {
|
||||
relation: "<h4>Queens of the Stone Age</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "61972_35",
|
||||
name: "Wellwater Conspiracy",
|
||||
data: {
|
||||
relation: "<h4>Wellwater Conspiracy</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "65452_36",
|
||||
name: "M.A.C.C.",
|
||||
data: {
|
||||
relation: "<h4>M.A.C.C.</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: collaboration)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "353097_37",
|
||||
name: "Tone Dogs",
|
||||
data: {
|
||||
relation: "<h4>Tone Dogs</h4><b>Connections:</b><ul><li>Matt Cameron <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236594_38",
|
||||
name: "Dave Krusen",
|
||||
data: {
|
||||
relation: "<h4>Dave Krusen</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Candlebox <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "2092_39",
|
||||
name: "Candlebox",
|
||||
data: {
|
||||
relation: "<h4>Candlebox</h4><b>Connections:</b><ul><li>Dave Krusen <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236022_40",
|
||||
name: "Matt Chamberlain",
|
||||
data: {
|
||||
relation: "<h4>Matt Chamberlain</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Critters Buggin <div>(relation: member of band)</div></li><li>Edie Brickell and New Bohemians <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "54761_41",
|
||||
name: "Critters Buggin",
|
||||
data: {
|
||||
relation: "<h4>Critters Buggin</h4><b>Connections:</b><ul><li>Matt Chamberlain <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "92043_42",
|
||||
name: "Edie Brickell and New Bohemians",
|
||||
data: {
|
||||
relation: "<h4>Edie Brickell and New Bohemians</h4><b>Connections:</b><ul><li>Matt Chamberlain <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236611_43",
|
||||
name: "Dave Abbruzzese",
|
||||
data: {
|
||||
relation: "<h4>Dave Abbruzzese</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Green Romance Orchestra <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "276933_44",
|
||||
name: "Green Romance Orchestra",
|
||||
data: {
|
||||
relation: "<h4>Green Romance Orchestra</h4><b>Connections:</b><ul><li>Dave Abbruzzese <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "236612_45",
|
||||
name: "Jack Irons",
|
||||
data: {
|
||||
relation: "<h4>Jack Irons</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: member of band)</div></li><li>Redd Kross <div>(relation: member of band)</div></li><li>Eleven <div>(relation: member of band)</div></li><li>Red Hot Chili Peppers <div>(relation: member of band)</div></li><li>Anthym <div>(relation: member of band)</div></li><li>What Is This? <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: "4619_46",
|
||||
name: "Redd Kross",
|
||||
data: {
|
||||
relation: "<h4>Redd Kross</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "9570_47",
|
||||
name: "Eleven",
|
||||
data: {
|
||||
relation: "<h4>Eleven</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "12389_48",
|
||||
name: "Red Hot Chili Peppers",
|
||||
data: {
|
||||
relation: "<h4>Red Hot Chili Peppers</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "114288_49",
|
||||
name: "Anthym",
|
||||
data: {
|
||||
relation: "<h4>Anthym</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "240013_50",
|
||||
name: "What Is This?",
|
||||
data: {
|
||||
relation: "<h4>What Is This?</h4><b>Connections:</b><ul><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
data: {
|
||||
relation: "<h4>Pearl Jam</h4><b>Connections:</b><ul><li>Pearl Jam & Cypress Hill <div>(relation: collaboration)</div></li><li>Neil Young & Pearl Jam <div>(relation: collaboration)</div></li><li>Jeff Ament <div>(relation: member of band)</div></li><li>Stone Gossard <div>(relation: member of band)</div></li><li>Eddie Vedder <div>(relation: member of band)</div></li><li>Mike McCready <div>(relation: member of band)</div></li><li>Matt Cameron <div>(relation: member of band)</div></li><li>Dave Krusen <div>(relation: member of band)</div></li><li>Matt Chamberlain <div>(relation: member of band)</div></li><li>Dave Abbruzzese <div>(relation: member of band)</div></li><li>Jack Irons <div>(relation: member of band)</div></li></ul>"
|
||||
}
|
||||
};
|
||||
// end
|
||||
// init RGraph
|
||||
var rgraph = new $jit.RGraph({
|
||||
// Where to append the visualization
|
||||
injectInto: 'infovis',
|
||||
// Optional: create a background canvas and plot
|
||||
// concentric circles in it.
|
||||
background: {
|
||||
CanvasStyles: {
|
||||
strokeStyle: '#555',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#ccc'
|
||||
}
|
||||
},
|
||||
// Set Edge and Node styles
|
||||
Node: {
|
||||
overridable: true,
|
||||
color: '#ccddee',
|
||||
dim: 12
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#C17878',
|
||||
lineWidth: 1.5
|
||||
},
|
||||
// Use native canvas text
|
||||
Label: {
|
||||
type: labelType,
|
||||
size: 11,
|
||||
family: 'Verdana',
|
||||
color: '#fff'
|
||||
},
|
||||
//Add events for Dragging and dropping nodes
|
||||
Events: {
|
||||
enable: true,
|
||||
type: 'Native',
|
||||
onMouseEnter: function(node, eventInfo, e){
|
||||
rgraph.canvas.getElement().style.cursor = 'move';
|
||||
},
|
||||
onMouseLeave: function(node, eventInfo, e){
|
||||
rgraph.canvas.getElement().style.cursor = '';
|
||||
},
|
||||
onDragMove: function(node, eventInfo, e){
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
rgraph.plot();
|
||||
},
|
||||
onDragEnd: function(node, eventInfo, e){
|
||||
rgraph.compute('end');
|
||||
rgraph.fx.animate( {
|
||||
modes: [
|
||||
'linear'
|
||||
],
|
||||
duration: 700,
|
||||
transition: $jit.Trans.Elastic.easeOut
|
||||
});
|
||||
},
|
||||
//touch events
|
||||
onTouchStart: function(node, eventInfo, e) {
|
||||
//stop the default event
|
||||
$jit.util.event.stop(e);
|
||||
},
|
||||
onTouchMove: function(node, eventInfo, e){
|
||||
//stop the default event
|
||||
$jit.util.event.stop(e);
|
||||
var pos = eventInfo.getPos();
|
||||
node.pos.setc(pos.x, pos.y);
|
||||
rgraph.plot();
|
||||
},
|
||||
onTouchEnd: function(node, eventInfo, e){
|
||||
//stop the default event
|
||||
$jit.util.event.stop(e);
|
||||
rgraph.compute('end');
|
||||
rgraph.fx.animate( {
|
||||
modes: [
|
||||
'linear'
|
||||
],
|
||||
duration: 700,
|
||||
transition: $jit.Trans.Elastic.easeOut
|
||||
});
|
||||
}
|
||||
},
|
||||
//Add the name of the node in the correponding label
|
||||
//and a click handler to move the graph.
|
||||
//This method is called once, on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
},
|
||||
//Change some label dom properties.
|
||||
//This method is called each time a label is plotted.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ccc";
|
||||
|
||||
} else if(node._depth == 2){
|
||||
style.fontSize = "0.7em";
|
||||
style.color = "#494949";
|
||||
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
});
|
||||
// load JSON data
|
||||
rgraph.loadJSON(json);
|
||||
// compute positions and make the first plot
|
||||
rgraph.refresh();
|
||||
// end
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Spacetree - Tree Animation</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Tree Animation
|
||||
</h4>
|
||||
|
||||
A static JSON Tree structure is used as input for this animation.<br /><br />
|
||||
<b>Click</b> on a node to select it.<br /><br />
|
||||
You can <b>select the tree orientation</b> by changing the select box in the right column.<br /><br />
|
||||
You can <b>change the selection mode</b> from <em>Normal</em> selection (i.e. center the selected node) to
|
||||
<em>Set as Root</em>.<br /><br />
|
||||
<b>Drag and Drop the canvas</b> to do some panning.<br /><br />
|
||||
Leaves color depend on the number of children they actually have.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Tree Orientation</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Left </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-top">Top </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-top" name="orientation" value="top" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-bottom">Bottom </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-bottom" name="orientation" value="bottom" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-right">Right </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-right" name="orientation" value="right" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>Selection Mode</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="s-normal">Normal </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="s-normal" name="selection" checked="checked" value="normal" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="s-root">Set as Root </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="s-root" name="selection" value="root" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,899 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
id: "node02",
|
||||
name: "0.2",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node13",
|
||||
name: "1.3",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node24",
|
||||
name: "2.4",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node35",
|
||||
name: "3.5",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node46",
|
||||
name: "4.6",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node37",
|
||||
name: "3.7",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node48",
|
||||
name: "4.8",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node49",
|
||||
name: "4.9",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node410",
|
||||
name: "4.10",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node411",
|
||||
name: "4.11",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node312",
|
||||
name: "3.12",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node413",
|
||||
name: "4.13",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node314",
|
||||
name: "3.14",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node415",
|
||||
name: "4.15",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node416",
|
||||
name: "4.16",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node417",
|
||||
name: "4.17",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node418",
|
||||
name: "4.18",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node319",
|
||||
name: "3.19",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node420",
|
||||
name: "4.20",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node421",
|
||||
name: "4.21",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node222",
|
||||
name: "2.22",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node323",
|
||||
name: "3.23",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node424",
|
||||
name: "4.24",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node125",
|
||||
name: "1.25",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node226",
|
||||
name: "2.26",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node327",
|
||||
name: "3.27",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node428",
|
||||
name: "4.28",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node429",
|
||||
name: "4.29",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node330",
|
||||
name: "3.30",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node431",
|
||||
name: "4.31",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node332",
|
||||
name: "3.32",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node433",
|
||||
name: "4.33",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node434",
|
||||
name: "4.34",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node435",
|
||||
name: "4.35",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node436",
|
||||
name: "4.36",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node237",
|
||||
name: "2.37",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node338",
|
||||
name: "3.38",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node439",
|
||||
name: "4.39",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node440",
|
||||
name: "4.40",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node441",
|
||||
name: "4.41",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node342",
|
||||
name: "3.42",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node443",
|
||||
name: "4.43",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node344",
|
||||
name: "3.44",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node445",
|
||||
name: "4.45",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node446",
|
||||
name: "4.46",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node447",
|
||||
name: "4.47",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node348",
|
||||
name: "3.48",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node449",
|
||||
name: "4.49",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node450",
|
||||
name: "4.50",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node451",
|
||||
name: "4.51",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node452",
|
||||
name: "4.52",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node453",
|
||||
name: "4.53",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node354",
|
||||
name: "3.54",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node455",
|
||||
name: "4.55",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node456",
|
||||
name: "4.56",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node457",
|
||||
name: "4.57",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node258",
|
||||
name: "2.58",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node359",
|
||||
name: "3.59",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node460",
|
||||
name: "4.60",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node461",
|
||||
name: "4.61",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node462",
|
||||
name: "4.62",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node463",
|
||||
name: "4.63",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node464",
|
||||
name: "4.64",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node165",
|
||||
name: "1.65",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node266",
|
||||
name: "2.66",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node367",
|
||||
name: "3.67",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node468",
|
||||
name: "4.68",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node469",
|
||||
name: "4.69",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node470",
|
||||
name: "4.70",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node471",
|
||||
name: "4.71",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node372",
|
||||
name: "3.72",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node473",
|
||||
name: "4.73",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node474",
|
||||
name: "4.74",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node475",
|
||||
name: "4.75",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node476",
|
||||
name: "4.76",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node377",
|
||||
name: "3.77",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node478",
|
||||
name: "4.78",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node479",
|
||||
name: "4.79",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node380",
|
||||
name: "3.80",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node481",
|
||||
name: "4.81",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node482",
|
||||
name: "4.82",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node283",
|
||||
name: "2.83",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node384",
|
||||
name: "3.84",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node485",
|
||||
name: "4.85",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node386",
|
||||
name: "3.86",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node487",
|
||||
name: "4.87",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node488",
|
||||
name: "4.88",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node489",
|
||||
name: "4.89",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node490",
|
||||
name: "4.90",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node491",
|
||||
name: "4.91",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node392",
|
||||
name: "3.92",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node493",
|
||||
name: "4.93",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node494",
|
||||
name: "4.94",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node495",
|
||||
name: "4.95",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node496",
|
||||
name: "4.96",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node397",
|
||||
name: "3.97",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node498",
|
||||
name: "4.98",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node399",
|
||||
name: "3.99",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4100",
|
||||
name: "4.100",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4101",
|
||||
name: "4.101",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4102",
|
||||
name: "4.102",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4103",
|
||||
name: "4.103",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2104",
|
||||
name: "2.104",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3105",
|
||||
name: "3.105",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4106",
|
||||
name: "4.106",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4107",
|
||||
name: "4.107",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4108",
|
||||
name: "4.108",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2109",
|
||||
name: "2.109",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3110",
|
||||
name: "3.110",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4111",
|
||||
name: "4.111",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4112",
|
||||
name: "4.112",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3113",
|
||||
name: "3.113",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4114",
|
||||
name: "4.114",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4115",
|
||||
name: "4.115",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4116",
|
||||
name: "4.116",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3117",
|
||||
name: "3.117",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4118",
|
||||
name: "4.118",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4119",
|
||||
name: "4.119",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4120",
|
||||
name: "4.120",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4121",
|
||||
name: "4.121",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3122",
|
||||
name: "3.122",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4123",
|
||||
name: "4.123",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4124",
|
||||
name: "4.124",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2125",
|
||||
name: "2.125",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3126",
|
||||
name: "3.126",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4127",
|
||||
name: "4.127",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4128",
|
||||
name: "4.128",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4129",
|
||||
name: "4.129",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node1130",
|
||||
name: "1.130",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node2131",
|
||||
name: "2.131",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3132",
|
||||
name: "3.132",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4133",
|
||||
name: "4.133",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4134",
|
||||
name: "4.134",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4135",
|
||||
name: "4.135",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4136",
|
||||
name: "4.136",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4137",
|
||||
name: "4.137",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2138",
|
||||
name: "2.138",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3139",
|
||||
name: "3.139",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4140",
|
||||
name: "4.140",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4141",
|
||||
name: "4.141",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3142",
|
||||
name: "3.142",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4143",
|
||||
name: "4.143",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4144",
|
||||
name: "4.144",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4145",
|
||||
name: "4.145",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4146",
|
||||
name: "4.146",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4147",
|
||||
name: "4.147",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
//end
|
||||
//init Spacetree
|
||||
//Create a new ST instance
|
||||
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
|
||||
},
|
||||
//set node and edge styles
|
||||
//set overridable=true for styling individual
|
||||
//nodes or edges
|
||||
Node: {
|
||||
height: 20,
|
||||
width: 60,
|
||||
type: 'rectangle',
|
||||
color: '#aaa',
|
||||
overridable: true
|
||||
},
|
||||
|
||||
Edge: {
|
||||
type: 'bezier',
|
||||
overridable: true
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("loading " + 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(){
|
||||
if(normal.checked) {
|
||||
st.onClick(node.id);
|
||||
} else {
|
||||
st.setRoot(node.id, 'animate');
|
||||
}
|
||||
};
|
||||
//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;
|
||||
}
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(json);
|
||||
//compute node positions and layout
|
||||
st.compute();
|
||||
//optional: make a translation of the tree
|
||||
st.geom.translate(new $jit.Complex(-200, 0), "current");
|
||||
//emulate a click on the root node.
|
||||
st.onClick(st.root);
|
||||
//end
|
||||
//Add event handlers to switch spacetree orientation.
|
||||
var top = $jit.id('r-top'),
|
||||
left = $jit.id('r-left'),
|
||||
bottom = $jit.id('r-bottom'),
|
||||
right = $jit.id('r-right'),
|
||||
normal = $jit.id('s-normal');
|
||||
|
||||
|
||||
function changeHandler() {
|
||||
if(this.checked) {
|
||||
top.disabled = bottom.disabled = right.disabled = left.disabled = true;
|
||||
st.switchPosition(this.value, "animate", {
|
||||
onComplete: function(){
|
||||
top.disabled = bottom.disabled = right.disabled = left.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
|
||||
//end
|
||||
|
||||
}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<!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">
|
||||
<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="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
SpaceTree with on-demand nodes
|
||||
</h4>
|
||||
|
||||
This example shows how you can use the <b>request</b> controller method to create a SpaceTree with <b>on demand</b> nodes<br /><br />
|
||||
The basic JSON Tree structure is cloned and appended on demand on each node to create an <b>infinite large SpaceTree</b><br /><br />
|
||||
You can select the <b>tree orientation</b> by changing the select box in the right column.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Change Tree Orientation</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">left </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-top">top </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-top" name="orientation" value="top" />
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-bottom">bottom </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-bottom" name="orientation" value="bottom" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-right">right </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-right" name="orientation" value="right" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,75 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Spacetree - Add/Remove Subtrees</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Add/Remove Subtrees
|
||||
</h4>
|
||||
|
||||
This example shows how to add/remove subtrees with the SpaceTree.<br /><br />
|
||||
<b>Add</b> a subtree by clicking on the <em>Add</em> button located in the right column.<br /><br />
|
||||
<b>Remove</b> a subtree by clicking on a red colored node
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Add Subtrees</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Animate:
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="animate" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" id="addSubtree" value="Add" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,865 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
id: "node02",
|
||||
name: "0.2",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node13",
|
||||
name: "1.3",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node24",
|
||||
name: "2.4",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node35",
|
||||
name: "3.5",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node46",
|
||||
name: "4.6",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node37",
|
||||
name: "3.7",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node48",
|
||||
name: "4.8",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node49",
|
||||
name: "4.9",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node410",
|
||||
name: "4.10",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node411",
|
||||
name: "4.11",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node312",
|
||||
name: "3.12",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node413",
|
||||
name: "4.13",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node314",
|
||||
name: "3.14",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node415",
|
||||
name: "4.15",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node416",
|
||||
name: "4.16",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node417",
|
||||
name: "4.17",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node418",
|
||||
name: "4.18",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node319",
|
||||
name: "3.19",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node420",
|
||||
name: "4.20",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node421",
|
||||
name: "4.21",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node222",
|
||||
name: "2.22",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node323",
|
||||
name: "3.23",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node424",
|
||||
name: "4.24",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node125",
|
||||
name: "1.25",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node226",
|
||||
name: "2.26",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node327",
|
||||
name: "3.27",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node428",
|
||||
name: "4.28",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node429",
|
||||
name: "4.29",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node330",
|
||||
name: "3.30",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node431",
|
||||
name: "4.31",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node332",
|
||||
name: "3.32",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node433",
|
||||
name: "4.33",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node434",
|
||||
name: "4.34",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node435",
|
||||
name: "4.35",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node436",
|
||||
name: "4.36",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node237",
|
||||
name: "2.37",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node338",
|
||||
name: "3.38",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node439",
|
||||
name: "4.39",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node440",
|
||||
name: "4.40",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node441",
|
||||
name: "4.41",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node342",
|
||||
name: "3.42",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node443",
|
||||
name: "4.43",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node344",
|
||||
name: "3.44",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node445",
|
||||
name: "4.45",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node446",
|
||||
name: "4.46",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node447",
|
||||
name: "4.47",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node348",
|
||||
name: "3.48",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node449",
|
||||
name: "4.49",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node450",
|
||||
name: "4.50",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node451",
|
||||
name: "4.51",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node452",
|
||||
name: "4.52",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node453",
|
||||
name: "4.53",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node354",
|
||||
name: "3.54",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node455",
|
||||
name: "4.55",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node456",
|
||||
name: "4.56",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node457",
|
||||
name: "4.57",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node258",
|
||||
name: "2.58",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node359",
|
||||
name: "3.59",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node460",
|
||||
name: "4.60",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node461",
|
||||
name: "4.61",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node462",
|
||||
name: "4.62",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node463",
|
||||
name: "4.63",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node464",
|
||||
name: "4.64",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node165",
|
||||
name: "1.65",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node266",
|
||||
name: "2.66",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node367",
|
||||
name: "3.67",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node468",
|
||||
name: "4.68",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node469",
|
||||
name: "4.69",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node470",
|
||||
name: "4.70",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node471",
|
||||
name: "4.71",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node372",
|
||||
name: "3.72",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node473",
|
||||
name: "4.73",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node474",
|
||||
name: "4.74",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node475",
|
||||
name: "4.75",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node476",
|
||||
name: "4.76",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node377",
|
||||
name: "3.77",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node478",
|
||||
name: "4.78",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node479",
|
||||
name: "4.79",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node380",
|
||||
name: "3.80",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node481",
|
||||
name: "4.81",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node482",
|
||||
name: "4.82",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node283",
|
||||
name: "2.83",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node384",
|
||||
name: "3.84",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node485",
|
||||
name: "4.85",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node386",
|
||||
name: "3.86",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node487",
|
||||
name: "4.87",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node488",
|
||||
name: "4.88",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node489",
|
||||
name: "4.89",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node490",
|
||||
name: "4.90",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node491",
|
||||
name: "4.91",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node392",
|
||||
name: "3.92",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node493",
|
||||
name: "4.93",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node494",
|
||||
name: "4.94",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node495",
|
||||
name: "4.95",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node496",
|
||||
name: "4.96",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node397",
|
||||
name: "3.97",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node498",
|
||||
name: "4.98",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node399",
|
||||
name: "3.99",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4100",
|
||||
name: "4.100",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4101",
|
||||
name: "4.101",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4102",
|
||||
name: "4.102",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4103",
|
||||
name: "4.103",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2104",
|
||||
name: "2.104",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3105",
|
||||
name: "3.105",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4106",
|
||||
name: "4.106",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4107",
|
||||
name: "4.107",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4108",
|
||||
name: "4.108",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2109",
|
||||
name: "2.109",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3110",
|
||||
name: "3.110",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4111",
|
||||
name: "4.111",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4112",
|
||||
name: "4.112",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3113",
|
||||
name: "3.113",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4114",
|
||||
name: "4.114",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4115",
|
||||
name: "4.115",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4116",
|
||||
name: "4.116",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3117",
|
||||
name: "3.117",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4118",
|
||||
name: "4.118",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4119",
|
||||
name: "4.119",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4120",
|
||||
name: "4.120",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4121",
|
||||
name: "4.121",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3122",
|
||||
name: "3.122",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4123",
|
||||
name: "4.123",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4124",
|
||||
name: "4.124",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2125",
|
||||
name: "2.125",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3126",
|
||||
name: "3.126",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4127",
|
||||
name: "4.127",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4128",
|
||||
name: "4.128",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4129",
|
||||
name: "4.129",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node1130",
|
||||
name: "1.130",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node2131",
|
||||
name: "2.131",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3132",
|
||||
name: "3.132",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4133",
|
||||
name: "4.133",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4134",
|
||||
name: "4.134",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4135",
|
||||
name: "4.135",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4136",
|
||||
name: "4.136",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4137",
|
||||
name: "4.137",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2138",
|
||||
name: "2.138",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3139",
|
||||
name: "3.139",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4140",
|
||||
name: "4.140",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4141",
|
||||
name: "4.141",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3142",
|
||||
name: "3.142",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4143",
|
||||
name: "4.143",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4144",
|
||||
name: "4.144",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4145",
|
||||
name: "4.145",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4146",
|
||||
name: "4.146",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4147",
|
||||
name: "4.147",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
var subtree = json.children.pop();
|
||||
//end
|
||||
var removing = false;
|
||||
//init Spacetree
|
||||
//Create a new ST instance
|
||||
var st = new $jit.ST({
|
||||
'injectInto': 'infovis',
|
||||
//add styles/shapes/colors
|
||||
//to nodes and edges
|
||||
|
||||
//set overridable=true if you want
|
||||
//to set styles for nodes individually
|
||||
Node: {
|
||||
overridable: true,
|
||||
width: 60,
|
||||
height: 20,
|
||||
color: '#ccc'
|
||||
},
|
||||
//change the animation/transition effect
|
||||
transition: $jit.Trans.Quart.easeOut,
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("loading " + node.name);
|
||||
},
|
||||
|
||||
onAfterCompute: function(node){
|
||||
Log.write("done");
|
||||
},
|
||||
|
||||
//This method is triggered on label
|
||||
//creation. This means that for each node
|
||||
//this method is triggered only once.
|
||||
//This method is useful for adding event
|
||||
//handlers to each node label.
|
||||
onCreateLabel: function(label, node){
|
||||
//add some styles to the node label
|
||||
var style = label.style;
|
||||
label.id = node.id;
|
||||
style.color = '#333';
|
||||
style.fontSize = '0.8em';
|
||||
style.textAlign = 'center';
|
||||
style.width = "60px";
|
||||
style.height = "20px";
|
||||
label.innerHTML = node.name;
|
||||
//Delete the specified subtree
|
||||
//when clicking on a label.
|
||||
//Only apply this method for nodes
|
||||
//in the first level of the tree.
|
||||
if(node._depth == 1) {
|
||||
style.cursor = 'pointer';
|
||||
label.onclick = function() {
|
||||
if(!removing) {
|
||||
removing = true;
|
||||
Log.write("removing subtree...");
|
||||
//remove the subtree
|
||||
st.removeSubtree(label.id, true, 'animate', {
|
||||
hideLabels: false,
|
||||
onAfterCompute: function() {
|
||||
removing = false;
|
||||
Log.write("subtree removed");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
//This method is triggered right before plotting a node.
|
||||
//This method is useful for adding style
|
||||
//to a node before it's being rendered.
|
||||
onBeforePlotNode: function(node) {
|
||||
if (node._depth == 1) {
|
||||
node.data.$color = '#f77';
|
||||
}
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(json);
|
||||
//compute node positions and layout
|
||||
st.compute();
|
||||
//optional: make a translation of the tree
|
||||
st.geom.translate(new $jit.Complex(-200, 0), "current");
|
||||
//Emulate a click on the root node.
|
||||
st.onClick(st.root);
|
||||
//end
|
||||
|
||||
//init handler
|
||||
//Add an event handler to the add button for
|
||||
//adding a subtree.
|
||||
var animate = document.getElementById('animate');
|
||||
var addButton = document.getElementById('addSubtree');
|
||||
addButton.onclick = function() {
|
||||
var type = animate.checked? "animate" : "replot";
|
||||
subtree.id = "node02";
|
||||
Log.write("adding subtree...");
|
||||
//add the subtree
|
||||
st.addSubtree(subtree, type, {
|
||||
hideLabels: false,
|
||||
onAfterCompute: function() {
|
||||
Log.write("subtree added");
|
||||
}
|
||||
});
|
||||
};
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Spacetree - MultiTree</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example4.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
MultiTree
|
||||
</h4>
|
||||
|
||||
A static JSON Tree structure is used as input for this animation.<br /><br />
|
||||
By setting the specific orientation for nodes we can create a multitree structure.<br /><br />
|
||||
Nodes and Edges are styled with canvas specific styles like shadows.<br /><br />
|
||||
<b>Click</b> on a node to select it.<br /><br />
|
||||
You can <b>change the selection mode</b> from <em>Normal</em> selection (i.e. center the selected node) to
|
||||
<em>Set as Root</em>.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example4.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Selection Mode</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="s-normal">Normal </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="s-normal" name="selection" value="normal" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="s-root">Set as Root </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="s-root" name="selection" checked="checked" value="root" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,899 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
id: "node02",
|
||||
name: "0.2",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node13",
|
||||
name: "1.3",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node24",
|
||||
name: "2.4",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node35",
|
||||
name: "3.5",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node46",
|
||||
name: "4.6",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node37",
|
||||
name: "3.7",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node48",
|
||||
name: "4.8",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node49",
|
||||
name: "4.9",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node410",
|
||||
name: "4.10",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node411",
|
||||
name: "4.11",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node312",
|
||||
name: "3.12",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node413",
|
||||
name: "4.13",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node314",
|
||||
name: "3.14",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node415",
|
||||
name: "4.15",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node416",
|
||||
name: "4.16",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node417",
|
||||
name: "4.17",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node418",
|
||||
name: "4.18",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node319",
|
||||
name: "3.19",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node420",
|
||||
name: "4.20",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node421",
|
||||
name: "4.21",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node222",
|
||||
name: "2.22",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node323",
|
||||
name: "3.23",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node424",
|
||||
name: "4.24",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node125",
|
||||
name: "1.25",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node226",
|
||||
name: "2.26",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node327",
|
||||
name: "3.27",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node428",
|
||||
name: "4.28",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node429",
|
||||
name: "4.29",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node330",
|
||||
name: "3.30",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node431",
|
||||
name: "4.31",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node332",
|
||||
name: "3.32",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node433",
|
||||
name: "4.33",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node434",
|
||||
name: "4.34",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node435",
|
||||
name: "4.35",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node436",
|
||||
name: "4.36",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node237",
|
||||
name: "2.37",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node338",
|
||||
name: "3.38",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node439",
|
||||
name: "4.39",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node440",
|
||||
name: "4.40",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node441",
|
||||
name: "4.41",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node342",
|
||||
name: "3.42",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node443",
|
||||
name: "4.43",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node344",
|
||||
name: "3.44",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node445",
|
||||
name: "4.45",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node446",
|
||||
name: "4.46",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node447",
|
||||
name: "4.47",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node348",
|
||||
name: "3.48",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node449",
|
||||
name: "4.49",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node450",
|
||||
name: "4.50",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node451",
|
||||
name: "4.51",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node452",
|
||||
name: "4.52",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node453",
|
||||
name: "4.53",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node354",
|
||||
name: "3.54",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node455",
|
||||
name: "4.55",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node456",
|
||||
name: "4.56",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node457",
|
||||
name: "4.57",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node258",
|
||||
name: "2.58",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node359",
|
||||
name: "3.59",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node460",
|
||||
name: "4.60",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node461",
|
||||
name: "4.61",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node462",
|
||||
name: "4.62",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node463",
|
||||
name: "4.63",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node464",
|
||||
name: "4.64",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node165",
|
||||
name: "1.65",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node266",
|
||||
name: "2.66",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node367",
|
||||
name: "3.67",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node468",
|
||||
name: "4.68",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node469",
|
||||
name: "4.69",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node470",
|
||||
name: "4.70",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node471",
|
||||
name: "4.71",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node372",
|
||||
name: "3.72",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node473",
|
||||
name: "4.73",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node474",
|
||||
name: "4.74",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node475",
|
||||
name: "4.75",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node476",
|
||||
name: "4.76",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node377",
|
||||
name: "3.77",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node478",
|
||||
name: "4.78",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node479",
|
||||
name: "4.79",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node380",
|
||||
name: "3.80",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node481",
|
||||
name: "4.81",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node482",
|
||||
name: "4.82",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node283",
|
||||
name: "2.83",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node384",
|
||||
name: "3.84",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node485",
|
||||
name: "4.85",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node386",
|
||||
name: "3.86",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node487",
|
||||
name: "4.87",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node488",
|
||||
name: "4.88",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node489",
|
||||
name: "4.89",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node490",
|
||||
name: "4.90",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node491",
|
||||
name: "4.91",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node392",
|
||||
name: "3.92",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node493",
|
||||
name: "4.93",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node494",
|
||||
name: "4.94",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node495",
|
||||
name: "4.95",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node496",
|
||||
name: "4.96",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node397",
|
||||
name: "3.97",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node498",
|
||||
name: "4.98",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node399",
|
||||
name: "3.99",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4100",
|
||||
name: "4.100",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4101",
|
||||
name: "4.101",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4102",
|
||||
name: "4.102",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4103",
|
||||
name: "4.103",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2104",
|
||||
name: "2.104",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3105",
|
||||
name: "3.105",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4106",
|
||||
name: "4.106",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4107",
|
||||
name: "4.107",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4108",
|
||||
name: "4.108",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2109",
|
||||
name: "2.109",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3110",
|
||||
name: "3.110",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4111",
|
||||
name: "4.111",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4112",
|
||||
name: "4.112",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3113",
|
||||
name: "3.113",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4114",
|
||||
name: "4.114",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4115",
|
||||
name: "4.115",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4116",
|
||||
name: "4.116",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3117",
|
||||
name: "3.117",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4118",
|
||||
name: "4.118",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4119",
|
||||
name: "4.119",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4120",
|
||||
name: "4.120",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4121",
|
||||
name: "4.121",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3122",
|
||||
name: "3.122",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4123",
|
||||
name: "4.123",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4124",
|
||||
name: "4.124",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2125",
|
||||
name: "2.125",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3126",
|
||||
name: "3.126",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4127",
|
||||
name: "4.127",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4128",
|
||||
name: "4.128",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4129",
|
||||
name: "4.129",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node1130",
|
||||
name: "1.130",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node2131",
|
||||
name: "2.131",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3132",
|
||||
name: "3.132",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4133",
|
||||
name: "4.133",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4134",
|
||||
name: "4.134",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4135",
|
||||
name: "4.135",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4136",
|
||||
name: "4.136",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4137",
|
||||
name: "4.137",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: "node2138",
|
||||
name: "2.138",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node3139",
|
||||
name: "3.139",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4140",
|
||||
name: "4.140",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4141",
|
||||
name: "4.141",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}, {
|
||||
id: "node3142",
|
||||
name: "3.142",
|
||||
data: {},
|
||||
children: [{
|
||||
id: "node4143",
|
||||
name: "4.143",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4144",
|
||||
name: "4.144",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4145",
|
||||
name: "4.145",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4146",
|
||||
name: "4.146",
|
||||
data: {},
|
||||
children: []
|
||||
}, {
|
||||
id: "node4147",
|
||||
name: "4.147",
|
||||
data: {},
|
||||
children: []
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
//preprocess subtrees orientation
|
||||
var arr = json.children, len = arr.length;
|
||||
for(var i=0; i < len; i++) {
|
||||
//split half left orientation
|
||||
if(i < len / 2) {
|
||||
arr[i].data.$orn = 'left';
|
||||
$jit.json.each(arr[i], function(n) {
|
||||
n.data.$orn = 'left';
|
||||
});
|
||||
} else {
|
||||
//half right
|
||||
arr[i].data.$orn = 'right';
|
||||
$jit.json.each(arr[i], function(n) {
|
||||
n.data.$orn = 'right';
|
||||
});
|
||||
}
|
||||
}
|
||||
//end
|
||||
//grab radio button
|
||||
var normal = $jit.id('s-normal');
|
||||
//init Spacetree
|
||||
//Create a new ST instance
|
||||
var st = new $jit.ST({
|
||||
//id of viz container element
|
||||
injectInto: 'infovis',
|
||||
//multitree
|
||||
multitree: true,
|
||||
//set duration for the animation
|
||||
duration: 800,
|
||||
//set animation transition type
|
||||
transition: $jit.Trans.Quart.easeInOut,
|
||||
//set distance between node and its children
|
||||
levelDistance: 40,
|
||||
//sibling and subtrees offsets
|
||||
siblingOffset: 0,
|
||||
subtreeOffset: 0,
|
||||
//set node and edge styles
|
||||
//set overridable=true for styling individual
|
||||
//nodes or edges
|
||||
Node: {
|
||||
height: 35,
|
||||
width: 50,
|
||||
type: 'ellipse',
|
||||
color: '#aaa',
|
||||
overridable: true,
|
||||
//set canvas specific styles
|
||||
//like shadows
|
||||
CanvasStyles: {
|
||||
shadowColor: '#ccc',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
Edge: {
|
||||
type: 'line',
|
||||
overridable: true
|
||||
},
|
||||
|
||||
onBeforeCompute: function(node){
|
||||
Log.write("loading " + 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(){
|
||||
if(normal.checked) {
|
||||
st.onClick(node.id);
|
||||
} else {
|
||||
st.setRoot(node.id, 'animate');
|
||||
}
|
||||
};
|
||||
//set label styles
|
||||
var style = label.style;
|
||||
style.width = 50 + 'px';
|
||||
style.height = 35 + 'px';
|
||||
style.cursor = 'pointer';
|
||||
style.color = '#333';
|
||||
style.fontSize = '0.8em';
|
||||
style.textAlign= 'center';
|
||||
style.paddingTop = '10px';
|
||||
},
|
||||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(json);
|
||||
//compute node positions and layout
|
||||
st.compute('end');
|
||||
st.select(st.root);
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Spacetree - Style Animations</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example5.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Style Animations
|
||||
</h4>
|
||||
|
||||
This Advanced Example shows how Node, Edge, Label and Canvas specific style animations can be triggered for this
|
||||
visualization.<br /><br />
|
||||
<b>Select</b> the styles to be animated in the right column and hit the <em>Morph Styles</em> button. This will
|
||||
set random values for these properties and animate them.<br /><br />
|
||||
Click on <em>Restore Styles</em> to set the default styles.<br /><br />
|
||||
Other styles like alpha and shadows can also be triggered.<br /><br />
|
||||
This example also implements a custom node rendering function for Stroke + Fill rectangles.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example5.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<h4>Actions</h4>
|
||||
<a id="update" href="#" class="theme button white">Morph Styles</a>
|
||||
<a id="restore" href="#" class="theme button white">Restore Styles</a>
|
||||
|
||||
<h4>Node Styles</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Width </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="n-width" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Height </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="n-height" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Color </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="n-color" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Border Color </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="n-border-color" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Border Width </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="n-border-width" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Select All" id="select-all-nodes" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Select None" id="select-none-nodes" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>Edge Styles</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Line Width </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="e-line-width" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Line Color </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="e-line-color" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Select All" id="select-all-edges" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Select None" id="select-none-edges" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>Label Styles</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Font Size </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="l-font-size" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-left">Font Color </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" id="l-font-color" checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="button" value="Select All" id="select-all-labels" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="button" value="Select None" id="select-none-labels" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,303 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
id: "node02",
|
||||
name: "0.2",
|
||||
children: [{
|
||||
id: "node13",
|
||||
name: "1.3",
|
||||
children: [{
|
||||
id: "node24",
|
||||
name: "2.4"
|
||||
}, {
|
||||
id: "node222",
|
||||
name: "2.22"
|
||||
}]
|
||||
}, {
|
||||
id: "node125",
|
||||
name: "1.25",
|
||||
children: [{
|
||||
id: "node226",
|
||||
name: "2.26"
|
||||
}, {
|
||||
id: "node237",
|
||||
name: "2.37"
|
||||
}, {
|
||||
id: "node258",
|
||||
name: "2.58"
|
||||
}]
|
||||
}, {
|
||||
id: "node165",
|
||||
name: "1.65",
|
||||
children: [{
|
||||
id: "node266",
|
||||
name: "2.66"
|
||||
}, {
|
||||
id: "node283",
|
||||
name: "2.83"
|
||||
}, {
|
||||
id: "node2104",
|
||||
name: "2.104"
|
||||
}, {
|
||||
id: "node2109",
|
||||
name: "2.109"
|
||||
}, {
|
||||
id: "node2125",
|
||||
name: "2.125"
|
||||
}]
|
||||
}, {
|
||||
id: "node1130",
|
||||
name: "1.130",
|
||||
children: [{
|
||||
id: "node2131",
|
||||
name: "2.131"
|
||||
}, {
|
||||
id: "node2138",
|
||||
name: "2.138"
|
||||
}]
|
||||
}]
|
||||
};
|
||||
//end
|
||||
//init Node Types
|
||||
//Create a node rendering function that plots a fill
|
||||
//rectangle and a stroke rectangle for borders
|
||||
$jit.ST.Plot.NodeTypes.implement({
|
||||
'stroke-rect': {
|
||||
'render': function(node, canvas) {
|
||||
var width = node.getData('width'),
|
||||
height = node.getData('height'),
|
||||
pos = this.getAlignedPos(node.pos.getc(true), width, height),
|
||||
posX = pos.x + width/2,
|
||||
posY = pos.y + height/2;
|
||||
this.nodeHelper.rectangle.render('fill', {x: posX, y: posY}, width, height, canvas);
|
||||
this.nodeHelper.rectangle.render('stroke', {x: posX, y: posY}, width, height, canvas);
|
||||
}
|
||||
}
|
||||
});
|
||||
//end
|
||||
//init Spacetree
|
||||
//Create a new ST instance
|
||||
var st = new $jit.ST({
|
||||
//id of viz container element
|
||||
injectInto: 'infovis',
|
||||
//set distance between node and its children
|
||||
levelDistance: 50,
|
||||
//set an X offset
|
||||
offsetX: 130,
|
||||
//set node, edge and label styles
|
||||
//set overridable=true for styling individual
|
||||
//nodes or edges
|
||||
Node: {
|
||||
overridable: true,
|
||||
type: 'stroke-rect',
|
||||
height: 20,
|
||||
width: 60,
|
||||
//canvas specific styles
|
||||
CanvasStyles: {
|
||||
fillStyle: '#daa',
|
||||
strokeStyle: '#ffc',
|
||||
lineWidth: 2
|
||||
}
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
type: 'line',
|
||||
color: '#ffc',
|
||||
lineWidth: 1
|
||||
},
|
||||
Label: {
|
||||
type: labelType,
|
||||
style: 'bold',
|
||||
size: 10,
|
||||
color: '#333'
|
||||
},
|
||||
//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.innerHTML = node.name;
|
||||
//set label styles
|
||||
var style = label.style;
|
||||
style.width = 60 + 'px';
|
||||
style.height = 17 + 'px';
|
||||
style.color = '#333';
|
||||
style.fontSize = '0.8em';
|
||||
style.textAlign= 'center';
|
||||
style.paddingTop = '3px';
|
||||
},
|
||||
onPlaceLabel: function(label, node) {
|
||||
var style = label.style;
|
||||
style.width = node.getData('width') + 'px';
|
||||
style.height = node.getData('height') + 'px';
|
||||
style.color = node.getLabelData('color');
|
||||
style.fontSize = node.getLabelData('size') + 'px';
|
||||
style.textAlign= 'center';
|
||||
style.paddingTop = '3px';
|
||||
}
|
||||
});
|
||||
//load json data
|
||||
st.loadJSON(json);
|
||||
//compute node positions and layout
|
||||
st.compute();
|
||||
//emulate a click on the root node.
|
||||
st.onClick(st.root);
|
||||
//end
|
||||
|
||||
//Add Select All/None actions
|
||||
var nodeAll = $jit.id('select-all-nodes'),
|
||||
nodeNone = $jit.id('select-none-nodes'),
|
||||
edgeAll = $jit.id('select-all-edges'),
|
||||
edgeNone = $jit.id('select-none-edges'),
|
||||
labelAll = $jit.id('select-all-labels'),
|
||||
labelNone = $jit.id('select-none-labels');
|
||||
$jit.util.each([nodeAll, edgeAll, labelAll], function(elem) {
|
||||
elem.onclick = function() {
|
||||
var pn = elem.parentNode.parentNode.parentNode; //table
|
||||
var inputs = pn.getElementsByTagName('input');
|
||||
for(var i=0, l=inputs.length; i<l; i++) {
|
||||
if(inputs[i].type == 'checkbox') {
|
||||
inputs[i].checked = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
$jit.util.each([nodeNone, edgeNone, labelNone], function(elem) {
|
||||
elem.onclick = function() {
|
||||
var pn = elem.parentNode.parentNode.parentNode; //table
|
||||
var inputs = pn.getElementsByTagName('input');
|
||||
for(var i=0, l=inputs.length; i<l; i++) {
|
||||
if(inputs[i].type == 'checkbox') {
|
||||
inputs[i].checked = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
//get checkboxes
|
||||
var nWidth = $jit.id('n-width'),
|
||||
nHeight = $jit.id('n-height'),
|
||||
nColor = $jit.id('n-color'),
|
||||
nBorderColor = $jit.id('n-border-color'),
|
||||
nBorderWidth = $jit.id('n-border-width'),
|
||||
eLineWidth = $jit.id('e-line-width'),
|
||||
eLineColor = $jit.id('e-line-color'),
|
||||
lFontSize = $jit.id('l-font-size'),
|
||||
lFontColor = $jit.id('l-font-color');
|
||||
|
||||
//init Morphing Animations
|
||||
var button = $jit.id('update'),
|
||||
restore = $jit.id('restore'),
|
||||
rand = Math.random,
|
||||
floor = Math.floor,
|
||||
colors = ['#33a', '#55b', '#77c', '#99d', '#aae', '#bf0', '#cf5',
|
||||
'#dfa', '#faccff', '#ffccff', '#CCC', '#C37'],
|
||||
colorLength = colors.length;
|
||||
//add click event for restore
|
||||
$jit.util.addEvent(restore, 'click', function() {
|
||||
if(init.busy) return;
|
||||
init.busy = true;
|
||||
|
||||
st.graph.eachNode(function(n) {
|
||||
//restore width and height node styles
|
||||
n.setDataset('end', {
|
||||
width: 60,
|
||||
height: 20
|
||||
});
|
||||
//restore canvas specific styles
|
||||
n.setCanvasStyles('end', {
|
||||
fillStyle: '#daa',
|
||||
strokeStyle: '#ffc',
|
||||
lineWidth: 2
|
||||
});
|
||||
//restore font styles
|
||||
n.setLabelDataset('end', {
|
||||
size: 10,
|
||||
color: '#333'
|
||||
});
|
||||
//set adjacencies styles
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 1,
|
||||
color: '#ffc'
|
||||
});
|
||||
});
|
||||
});
|
||||
st.compute('end');
|
||||
st.geom.translate({x:-130, y:0}, 'end');
|
||||
st.fx.animate({
|
||||
modes: ['linear',
|
||||
'node-property:width:height',
|
||||
'edge-property:lineWidth:color',
|
||||
'label-property:size:color',
|
||||
'node-style:fillStyle:strokeStyle:lineWidth'],
|
||||
duration: 1500,
|
||||
onComplete: function() {
|
||||
init.busy = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
//add click event for updating styles
|
||||
$jit.util.addEvent(button, 'click', function() {
|
||||
if(init.busy) return;
|
||||
init.busy = true;
|
||||
|
||||
st.graph.eachNode(function(n) {
|
||||
//set random width and height node styles
|
||||
nWidth.checked && n.setData('width', floor(rand() * 40 + 20), 'end');
|
||||
nHeight.checked && n.setData('height', floor(rand() * 40 + 20), 'end');
|
||||
//set random canvas specific styles
|
||||
nColor.checked && n.setCanvasStyle('fillStyle', colors[floor(colorLength * rand())], 'end');
|
||||
nBorderColor.checked && n.setCanvasStyle('strokeStyle', colors[floor(colorLength * rand())], 'end');
|
||||
nBorderWidth.checked && n.setCanvasStyle('lineWidth', 10 * rand() + 1, 'end');
|
||||
//set label styles
|
||||
lFontSize.checked && n.setLabelData('size', 20 * rand() + 1, 'end');
|
||||
lFontColor.checked && n.setLabelData('color', colors[floor(colorLength * rand())], 'end');
|
||||
//set adjacency styles
|
||||
n.eachAdjacency(function(adj) {
|
||||
eLineWidth.checked && adj.setData('lineWidth', 10 * rand() + 1, 'end');
|
||||
eLineColor.checked && adj.setData('color', colors[floor(colorLength * rand())], 'end');
|
||||
});
|
||||
});
|
||||
st.compute('end');
|
||||
st.geom.translate({x:-130, y:0}, 'end');
|
||||
st.fx.animate({
|
||||
modes: ['linear',
|
||||
'node-property:width:height',
|
||||
'edge-property:lineWidth:color',
|
||||
'label-property:size:color',
|
||||
'node-style:fillStyle:strokeStyle:lineWidth'],
|
||||
duration: 1500,
|
||||
onComplete: function() {
|
||||
init.busy = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Sunburst - Connected Sunburst</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Sunburst.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Connected Sunburst
|
||||
</h4>
|
||||
|
||||
A static JSON Graph structure is used as input for this visualization.<br /><br />
|
||||
This example shows how properties such as color, height, angular width and line width
|
||||
can be customized per node and per edge in the JSON structure.<br /><br />
|
||||
<b>Left click</b> to select a node and show its relations.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = [
|
||||
//"root" node is invisible
|
||||
{
|
||||
"id": "node0",
|
||||
"name": "",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
},
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "node1",
|
||||
"data": {
|
||||
'$type': 'none'
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node2",
|
||||
"data": {
|
||||
'$type': 'none'
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
'$type': 'none'
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node4",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node6",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node7",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node8",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node9",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node10",
|
||||
"data": {
|
||||
"$type": "none"
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"id": "node1",
|
||||
"name": "node 1",
|
||||
"data": {
|
||||
"$angularWidth": 13.00,
|
||||
"$color": "#33a",
|
||||
"$height": 70
|
||||
},
|
||||
"adjacencies": [
|
||||
{
|
||||
"nodeTo": "node3",
|
||||
"data": {
|
||||
"$color": "#ddaacc",
|
||||
"$lineWidth": 4
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node5",
|
||||
"data": {
|
||||
"$color": "#ccffdd",
|
||||
"$lineWidth": 4
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node7",
|
||||
"data": {
|
||||
"$color": "#dd99dd",
|
||||
"$lineWidth": 4
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node8",
|
||||
"data": {
|
||||
"$color": "#dd99dd",
|
||||
"$lineWidth": 4
|
||||
}
|
||||
}, {
|
||||
"nodeTo": "node10",
|
||||
"data": {
|
||||
"$color": "#ddaacc",
|
||||
"$lineWidth": 4
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"id": "node2",
|
||||
"name": "node 2",
|
||||
"data": {
|
||||
"$angularWidth": 24.90,
|
||||
"$color": "#55b",
|
||||
"$height": 73
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node3",
|
||||
"name": "node 3",
|
||||
"data": {
|
||||
"$angularWidth": 10.50,
|
||||
"$color": "#77c",
|
||||
"$height": 75
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node4",
|
||||
"name": "node 4",
|
||||
"data": {
|
||||
"$angularWidth": 5.40,
|
||||
"$color": "#99d",
|
||||
"$height": 75
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node5",
|
||||
"name": "node 5",
|
||||
"data": {
|
||||
"$angularWidth": 32.26,
|
||||
"$color": "#aae",
|
||||
"$height": 80
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node6",
|
||||
"name": "node 6",
|
||||
"data": {
|
||||
"$angularWidth": 24.90,
|
||||
"$color": "#bf0",
|
||||
"$height": 85
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node7",
|
||||
"name": "node 7",
|
||||
"data": {
|
||||
"$angularWidth": 14.90,
|
||||
"$color": "#cf5",
|
||||
"$height": 85
|
||||
},
|
||||
"adjacencies": [
|
||||
"node8", "node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node8",
|
||||
"name": "node 8",
|
||||
"data": {
|
||||
"$angularWidth": 34.90,
|
||||
"$color": "#dfa",
|
||||
"$height": 80
|
||||
},
|
||||
"adjacencies": [
|
||||
"node9", "node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node9",
|
||||
"name": "node 9",
|
||||
"data": {
|
||||
"$angularWidth": 42.90,
|
||||
"$color": "#CCC",
|
||||
"$height": 75
|
||||
},
|
||||
"adjacencies": [
|
||||
"node10"
|
||||
]
|
||||
}, {
|
||||
"id": "node10",
|
||||
"name": "node 10",
|
||||
"data": {
|
||||
"$angularWidth": 100.90,
|
||||
"$color": "#C37",
|
||||
"$height": 70
|
||||
},
|
||||
"adjacencies": []
|
||||
}
|
||||
];
|
||||
//end
|
||||
//init Sunburst
|
||||
var sb = new $jit.Sunburst({
|
||||
//id container for the visualization
|
||||
injectInto: 'infovis',
|
||||
//Change node and edge styles such as
|
||||
//color, width, lineWidth and edge types
|
||||
Node: {
|
||||
overridable: true,
|
||||
type: useGradients? 'gradient-multipie' : 'multipie'
|
||||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
type: 'hyperline',
|
||||
lineWidth: 2,
|
||||
color: '#777'
|
||||
},
|
||||
//Draw canvas text. Can also be
|
||||
//'HTML' or 'SVG' to draw DOM labels
|
||||
Label: {
|
||||
type: nativeTextSupport? 'Native' : 'SVG'
|
||||
},
|
||||
//Add animations when hovering and clicking nodes
|
||||
NodeStyles: {
|
||||
enable: true,
|
||||
type: 'Native',
|
||||
stylesClick: {
|
||||
'color': '#33dddd'
|
||||
},
|
||||
stylesHover: {
|
||||
'color': '#dd3333'
|
||||
},
|
||||
duration: 700
|
||||
},
|
||||
Events: {
|
||||
enable: true,
|
||||
type: 'Native',
|
||||
//List node connections onClick
|
||||
onClick: function(node, eventInfo, e){
|
||||
if (!node) return;
|
||||
var html = "<h4>" + node.name + " connections</h4><ul><li>", ans = [];
|
||||
node.eachAdjacency(function(adj){
|
||||
// if on the same level i.e siblings
|
||||
if (adj.nodeTo._depth == node._depth) {
|
||||
ans.push(adj.nodeTo.name);
|
||||
}
|
||||
});
|
||||
$jit.id('inner-details').innerHTML = html + ans.join("</li><li>") + "</li></ul>";
|
||||
}
|
||||
},
|
||||
levelDistance: 190,
|
||||
// Only used when Label type is 'HTML' or 'SVG'
|
||||
// Add text to the labels.
|
||||
// This method is only triggered on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
var labels = sb.config.Label.type;
|
||||
if (labels === 'HTML') {
|
||||
domElement.innerHTML = node.name;
|
||||
} else if (labels === 'SVG') {
|
||||
domElement.firstChild.appendChild(document.createTextNode(node.name));
|
||||
}
|
||||
},
|
||||
// Only used when Label type is 'HTML' or 'SVG'
|
||||
// Change node styles when labels are placed
|
||||
// or moved.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var labels = sb.config.Label.type;
|
||||
if (labels === 'SVG') {
|
||||
var fch = domElement.firstChild;
|
||||
var style = fch.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
style.fontSize = "0.8em";
|
||||
fch.setAttribute('fill', "#fff");
|
||||
} else if (labels === 'HTML') {
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
if (node._depth <= 1) {
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ddd";
|
||||
}
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
}
|
||||
});
|
||||
// load JSON data.
|
||||
sb.loadJSON(json);
|
||||
// compute positions and plot.
|
||||
sb.refresh();
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Sunburst - Sunburst of a Directory Tree</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Sunburst.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Sunburst of a Directory Tree
|
||||
</h4>
|
||||
|
||||
A static JSON Tree structure is used as input for this visualization.<br /><br />
|
||||
Tips are used to describe the file size and its last modified date.<br /><br />
|
||||
<b>Left click</b> to rotate the Sunburst to the selected node and see its details.
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list"></div>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,772 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
"children": [
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 7490,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 7490
|
||||
},
|
||||
"id": "Source/Coordinates/Complex.js",
|
||||
"name": "Complex.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Fixed polar interpolation problem when theta = pi",
|
||||
"$angularWidth": 6390,
|
||||
"days": 2,
|
||||
"$color": "#B0AAF6",
|
||||
"size": 6390
|
||||
},
|
||||
"id": "Source/Coordinates/Polar.js",
|
||||
"name": "Polar.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Fixed polar interpolation problem when theta = pi",
|
||||
"$color": "#B0AAF6",
|
||||
"days": 2,
|
||||
"$angularWidth": 1000,
|
||||
"size": 13880
|
||||
},
|
||||
"id": "Source/Coordinates",
|
||||
"name": "Coordinates"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Scaling done right :)",
|
||||
"$angularWidth": 14952,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 14952
|
||||
},
|
||||
"id": "Source/Core/Canvas.js",
|
||||
"name": "Canvas.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 14759,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 14759
|
||||
},
|
||||
"id": "Source/Core/Core.js",
|
||||
"name": "Core.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 5838,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 5838
|
||||
},
|
||||
"id": "Source/Core/Fx.js",
|
||||
"name": "Fx.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$color": "#B2ABF4",
|
||||
"days": 3,
|
||||
"$angularWidth": 1000,
|
||||
"size": 35549
|
||||
},
|
||||
"id": "Source/Core",
|
||||
"name": "Core"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Merge remote branch 'woot/bugfixes_docnet' into sunburst_fixes",
|
||||
"$angularWidth": 18672,
|
||||
"days": 1,
|
||||
"$color": "#AEA9F8",
|
||||
"size": 18672
|
||||
},
|
||||
"id": "Source/Extras/Extras.js",
|
||||
"name": "Extras.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Merge remote branch 'woot/bugfixes_docnet' into sunburst_fixes",
|
||||
"$color": "#AEA9F8",
|
||||
"days": 1,
|
||||
"$angularWidth": 1000,
|
||||
"size": 18672
|
||||
},
|
||||
"id": "Source/Extras",
|
||||
"name": "Extras"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 1652,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 1652
|
||||
},
|
||||
"id": "Source/Graph/Graph.Geom.js",
|
||||
"name": "Graph.Geom.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 27921,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 27921
|
||||
},
|
||||
"id": "Source/Graph/Graph.js",
|
||||
"name": "Graph.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added new Canvas class with zoom/pan options",
|
||||
"$angularWidth": 9512,
|
||||
"days": 5,
|
||||
"$color": "#B6AEEF",
|
||||
"size": 9512
|
||||
},
|
||||
"id": "Source/Graph/Graph.Label.js",
|
||||
"name": "Graph.Label.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Change the way edges where stored and used in Graph.js. This is how Graph.js internally handles nodes. The user API should remain the same.",
|
||||
"$angularWidth": 22838,
|
||||
"days": 26,
|
||||
"$color": "#E0C7C0",
|
||||
"size": 22838
|
||||
},
|
||||
"id": "Source/Graph/Graph.Op.js",
|
||||
"name": "Graph.Op.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Bug Fix Extras + Tweaking examples",
|
||||
"$angularWidth": 18950,
|
||||
"days": 19,
|
||||
"$color": "#D2BFD0",
|
||||
"size": 18950
|
||||
},
|
||||
"id": "Source/Graph/Graph.Plot.js",
|
||||
"name": "Graph.Plot.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "(Re)-Implemented nodeTypes using node/edgeHelpers\n \n Code is cleaner and NodeTypes are now easier to implement.",
|
||||
"$angularWidth": 6947,
|
||||
"days": 32,
|
||||
"$color": "#ECCFB3",
|
||||
"size": 6947
|
||||
},
|
||||
"id": "Source/Graph/Helpers.js",
|
||||
"name": "Helpers.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$color": "#B2ABF4",
|
||||
"days": 3,
|
||||
"$angularWidth": 1000,
|
||||
"size": 87820
|
||||
},
|
||||
"id": "Source/Graph",
|
||||
"name": "Graph"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 4064,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 4064
|
||||
},
|
||||
"id": "Source/Layouts/Layouts.ForceDirected.js",
|
||||
"name": "Layouts.ForceDirected.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 2198,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 2198
|
||||
},
|
||||
"id": "Source/Layouts/Layouts.js",
|
||||
"name": "Layouts.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 4372,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 4372
|
||||
},
|
||||
"id": "Source/Layouts/Layouts.Radial.js",
|
||||
"name": "Layouts.Radial.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 15570,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 15570
|
||||
},
|
||||
"id": "Source/Layouts/Layouts.TM.js",
|
||||
"name": "Layouts.TM.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 6696,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 6696
|
||||
},
|
||||
"id": "Source/Layouts/Layouts.Tree.js",
|
||||
"name": "Layouts.Tree.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$color": "#B2ABF4",
|
||||
"days": 3,
|
||||
"$angularWidth": 1000,
|
||||
"size": 32900
|
||||
},
|
||||
"id": "Source/Layouts",
|
||||
"name": "Layouts"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Fixed passing of general Label object",
|
||||
"$angularWidth": 8079,
|
||||
"days": 26,
|
||||
"$color": "#E0C7C0",
|
||||
"size": 8079
|
||||
},
|
||||
"id": "Source/Loader/Loader.js",
|
||||
"name": "Loader.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Fixed passing of general Label object",
|
||||
"$color": "#E0C7C0",
|
||||
"days": 26,
|
||||
"$angularWidth": 1000,
|
||||
"size": 8079
|
||||
},
|
||||
"id": "Source/Loader",
|
||||
"name": "Loader"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Small tweaks on Tips and Selected nodes in Charts",
|
||||
"$angularWidth": 348,
|
||||
"days": 33,
|
||||
"$color": "#EED0B0",
|
||||
"size": 348
|
||||
},
|
||||
"id": "Source/Options/Options.AreaChart.js",
|
||||
"name": "Options.AreaChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added gradients to AreaChart",
|
||||
"$angularWidth": 386,
|
||||
"days": 37,
|
||||
"$color": "#F6D5A7",
|
||||
"size": 386
|
||||
},
|
||||
"id": "Source/Options/Options.BarChart.js",
|
||||
"name": "Options.BarChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Add label types in Label configuration object.\n \n Add calls to getLabelData in plotLabel.",
|
||||
"$angularWidth": 392,
|
||||
"days": 26,
|
||||
"$color": "#E0C7C0",
|
||||
"size": 392
|
||||
},
|
||||
"id": "Source/Options/Options.Canvas.js",
|
||||
"name": "Options.Canvas.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Organizing sources and build",
|
||||
"$angularWidth": 3856,
|
||||
"days": 112,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 3856
|
||||
},
|
||||
"id": "Source/Options/Options.Controller.js",
|
||||
"name": "Options.Controller.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added raw Canvas options + and animations\n \n Added the CanvasStyles object in Node/Edge properties to define raw\n canvas properties before plotting a node or edge. For example\n \n Node: {\n overridable: true,\n dim: 4,\n color: \"#fff\",\n CanvasStyles: {\n shadowBlur: 10,\n shadowColor: '#ccc',\n shadowOffsetY: 5,\n shadowOffsetX: 5\n }\n }\n \n These properties can also be animated and accessed just like dataset\n properties.\n \n Also there are new APIs for setting multiple properties at the same\n time. setDataset and setCanvasStyles have been added and can be used\n like this:\n \n node.setCanvasStyle('shadowBlur', 100, 'end');\n \n //will perform various node.setCanvasStyle\n node.setCanvasStyles(['current', 'end'], {\n 'shadowBlur': [100, 5],\n 'shadowOffsetX': [200, 3]\n });\n \n node.setData('width', 100, 'end');\n \n //will perform various node.setData\n node.setDataset('end', {\n 'width': 100,\n 'color: '#ccc'\n });\n \n For more information take a look at test1.js for the ForceDirected\n visualization.",
|
||||
"$angularWidth": 1475,
|
||||
"days": 31,
|
||||
"$color": "#EACDB5",
|
||||
"size": 1475
|
||||
},
|
||||
"id": "Source/Options/Options.Edge.js",
|
||||
"name": "Options.Edge.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Extras.Events bug fixes",
|
||||
"$angularWidth": 312,
|
||||
"days": 20,
|
||||
"$color": "#D4C0CE",
|
||||
"size": 312
|
||||
},
|
||||
"id": "Source/Options/Options.Events.js",
|
||||
"name": "Options.Events.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "$jit namespace and $jit() for append vis to Global\n \n Example:\n \n new $jit.Hypertree({\n 'injectInto': 'myvisContainer'\n });",
|
||||
"$angularWidth": 749,
|
||||
"days": 111,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 749
|
||||
},
|
||||
"id": "Source/Options/Options.Fx.js",
|
||||
"name": "Options.Fx.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Revisiting Extras.js Redesigning MouseEventManager and registered\n classes to automatically use DOM elements via event delegation or canvas\n based events.",
|
||||
"$angularWidth": 530,
|
||||
"days": 25,
|
||||
"$color": "#DEC6C2",
|
||||
"size": 530
|
||||
},
|
||||
"id": "Source/Options/Options.js",
|
||||
"name": "Options.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Add label types in Label configuration object.\n \n Add calls to getLabelData in plotLabel.",
|
||||
"$angularWidth": 203,
|
||||
"days": 26,
|
||||
"$color": "#E0C7C0",
|
||||
"size": 203
|
||||
},
|
||||
"id": "Source/Options/Options.Label.js",
|
||||
"name": "Options.Label.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "* Ignore panning if Options.Navigation.panning = false\n * Add 'avoid nodes' panning option for panning only when the cursor does not match a nodes position",
|
||||
"$angularWidth": 137,
|
||||
"days": 1,
|
||||
"$color": "#AEA9F8",
|
||||
"size": 137
|
||||
},
|
||||
"id": "Source/Options/Options.Navigation.js",
|
||||
"name": "Options.Navigation.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added raw Canvas options + and animations\n \n Added the CanvasStyles object in Node/Edge properties to define raw\n canvas properties before plotting a node or edge. For example\n \n Node: {\n overridable: true,\n dim: 4,\n color: \"#fff\",\n CanvasStyles: {\n shadowBlur: 10,\n shadowColor: '#ccc',\n shadowOffsetY: 5,\n shadowOffsetX: 5\n }\n }\n \n These properties can also be animated and accessed just like dataset\n properties.\n \n Also there are new APIs for setting multiple properties at the same\n time. setDataset and setCanvasStyles have been added and can be used\n like this:\n \n node.setCanvasStyle('shadowBlur', 100, 'end');\n \n //will perform various node.setCanvasStyle\n node.setCanvasStyles(['current', 'end'], {\n 'shadowBlur': [100, 5],\n 'shadowOffsetX': [200, 3]\n });\n \n node.setData('width', 100, 'end');\n \n //will perform various node.setData\n node.setDataset('end', {\n 'width': 100,\n 'color: '#ccc'\n });\n \n For more information take a look at test1.js for the ForceDirected\n visualization.",
|
||||
"$angularWidth": 2083,
|
||||
"days": 31,
|
||||
"$color": "#EACDB5",
|
||||
"size": 2083
|
||||
},
|
||||
"id": "Source/Options/Options.Node.js",
|
||||
"name": "Options.Node.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Bug Fix Extras + Tweaking examples",
|
||||
"$angularWidth": 583,
|
||||
"days": 19,
|
||||
"$color": "#D2BFD0",
|
||||
"size": 583
|
||||
},
|
||||
"id": "Source/Options/Options.NodeStyles.js",
|
||||
"name": "Options.NodeStyles.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Add an option to resize labels according to its pie slice",
|
||||
"$angularWidth": 380,
|
||||
"days": 1,
|
||||
"$color": "#AEA9F8",
|
||||
"size": 380
|
||||
},
|
||||
"id": "Source/Options/Options.PieChart.js",
|
||||
"name": "Options.PieChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Revisiting Extras.js Redesigning MouseEventManager and registered\n classes to automatically use DOM elements via event delegation or canvas\n based events.",
|
||||
"$angularWidth": 1120,
|
||||
"days": 25,
|
||||
"$color": "#DEC6C2",
|
||||
"size": 1120
|
||||
},
|
||||
"id": "Source/Options/Options.Tips.js",
|
||||
"name": "Options.Tips.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Organizing sources and build",
|
||||
"$angularWidth": 1021,
|
||||
"days": 112,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 1021
|
||||
},
|
||||
"id": "Source/Options/Options.Tree.js",
|
||||
"name": "Options.Tree.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Add an option to resize labels according to its pie slice",
|
||||
"$color": "#AEA9F8",
|
||||
"days": 1,
|
||||
"$angularWidth": 1000,
|
||||
"size": 13575
|
||||
},
|
||||
"id": "Source/Options",
|
||||
"name": "Options"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Fixing AreaCharts for IE",
|
||||
"$angularWidth": 13636,
|
||||
"days": 19,
|
||||
"$color": "#D2BFD0",
|
||||
"size": 13636
|
||||
},
|
||||
"id": "Source/Visualizations/AreaChart.js",
|
||||
"name": "AreaChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Append utils, id and Class objects to $jit. Add legends to Bar/Pie/AreaChart examples.",
|
||||
"$angularWidth": 12608,
|
||||
"days": 15,
|
||||
"$color": "#CABAD9",
|
||||
"size": 12608
|
||||
},
|
||||
"id": "Source/Visualizations/BarChart.js",
|
||||
"name": "BarChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added new Canvas class with zoom/pan options",
|
||||
"$angularWidth": 16954,
|
||||
"days": 5,
|
||||
"$color": "#B6AEEF",
|
||||
"size": 16954
|
||||
},
|
||||
"id": "Source/Visualizations/ForceDirected.js",
|
||||
"name": "ForceDirected.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added new Canvas class with zoom/pan options",
|
||||
"$angularWidth": 23448,
|
||||
"days": 5,
|
||||
"$color": "#B6AEEF",
|
||||
"size": 23448
|
||||
},
|
||||
"id": "Source/Visualizations/Hypertree.js",
|
||||
"name": "Hypertree.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Adding $jit as Namespace + Build Refactor + Config (part I)",
|
||||
"$angularWidth": 0,
|
||||
"days": 112,
|
||||
"$color": "#FCD9A1",
|
||||
"size": 0
|
||||
},
|
||||
"id": "Source/Visualizations/Icicle.js",
|
||||
"name": "Icicle.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Add an option to resize labels according to its pie slice",
|
||||
"$angularWidth": 10762,
|
||||
"days": 1,
|
||||
"$color": "#AEA9F8",
|
||||
"size": 10762
|
||||
},
|
||||
"id": "Source/Visualizations/PieChart.js",
|
||||
"name": "PieChart.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Added new Canvas class with zoom/pan options",
|
||||
"$angularWidth": 18010,
|
||||
"days": 5,
|
||||
"$color": "#B6AEEF",
|
||||
"size": 18010
|
||||
},
|
||||
"id": "Source/Visualizations/RGraph.js",
|
||||
"name": "RGraph.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 52895,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 52895
|
||||
},
|
||||
"id": "Source/Visualizations/Spacetree.js",
|
||||
"name": "Spacetree.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Adding new JSON data to the Sunburst and already finding some bugs :S",
|
||||
"$angularWidth": 21436,
|
||||
"days": 2,
|
||||
"$color": "#B0AAF6",
|
||||
"size": 21436
|
||||
},
|
||||
"id": "Source/Visualizations/Sunburst.js",
|
||||
"name": "Sunburst.js"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"description": "Animated TreeMaps",
|
||||
"$angularWidth": 16472,
|
||||
"days": 3,
|
||||
"$color": "#B2ABF4",
|
||||
"size": 16472
|
||||
},
|
||||
"id": "Source/Visualizations/Treemap.js",
|
||||
"name": "Treemap.js"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"description": "Merge remote branch 'woot/bugfixes_docnet' into sunburst_fixes",
|
||||
"$color": "#AEA9F8",
|
||||
"days": 1,
|
||||
"$angularWidth": 1000,
|
||||
"size": 186221
|
||||
},
|
||||
"id": "Source/Visualizations",
|
||||
"name": "Visualizations"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"$type": "none"
|
||||
},
|
||||
"id": "Source",
|
||||
"name": "Source"
|
||||
};
|
||||
//end
|
||||
//init Sunburst
|
||||
var sb = new $jit.Sunburst({
|
||||
//id container for the visualization
|
||||
injectInto: 'infovis',
|
||||
//Distance between levels
|
||||
levelDistance: 90,
|
||||
//Change node and edge styles such as
|
||||
//color, width and dimensions.
|
||||
Node: {
|
||||
overridable: true,
|
||||
type: useGradients? 'gradient-multipie' : 'multipie'
|
||||
},
|
||||
//Select canvas labels
|
||||
//'HTML', 'SVG' and 'Native' are possible options
|
||||
Label: {
|
||||
type: labelType
|
||||
},
|
||||
//Change styles when hovering and clicking nodes
|
||||
NodeStyles: {
|
||||
enable: true,
|
||||
type: 'Native',
|
||||
stylesClick: {
|
||||
'color': '#33dddd'
|
||||
},
|
||||
stylesHover: {
|
||||
'color': '#dd3333'
|
||||
}
|
||||
},
|
||||
//Add tooltips
|
||||
Tips: {
|
||||
enable: true,
|
||||
onShow: function(tip, node) {
|
||||
var html = "<div class=\"tip-title\">" + node.name + "</div>";
|
||||
var data = node.data;
|
||||
if("days" in data) {
|
||||
html += "<b>Last modified:</b> " + data.days + " days ago";
|
||||
}
|
||||
if("size" in data) {
|
||||
html += "<br /><b>File size:</b> " + Math.round(data.size / 1024) + "KB";
|
||||
}
|
||||
tip.innerHTML = html;
|
||||
}
|
||||
},
|
||||
//implement event handlers
|
||||
Events: {
|
||||
enable: true,
|
||||
onClick: function(node) {
|
||||
if(!node) return;
|
||||
//Build detailed information about the file/folder
|
||||
//and place it in the right column.
|
||||
var html = "<h4>" + node.name + "</h4>", data = node.data;
|
||||
if("days" in data) {
|
||||
html += "<b>Last modified:</b> " + data.days + " days ago";
|
||||
}
|
||||
if("size" in data) {
|
||||
html += "<br /><br /><b>File size:</b> " + Math.round(data.size / 1024) + "KB";
|
||||
}
|
||||
if("description" in data) {
|
||||
html += "<br /><br /><b>Last commit was:</b><br /><pre>" + data.description + "</pre>";
|
||||
}
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
//hide tip
|
||||
sb.tips.hide();
|
||||
//rotate
|
||||
sb.rotate(node, animate? 'animate' : 'replot', {
|
||||
duration: 1000,
|
||||
transition: $jit.Trans.Quart.easeInOut
|
||||
});
|
||||
}
|
||||
},
|
||||
// Only used when Label type is 'HTML' or 'SVG'
|
||||
// Add text to the labels.
|
||||
// This method is only triggered on label creation
|
||||
onCreateLabel: function(domElement, node){
|
||||
var labels = sb.config.Label.type,
|
||||
aw = node.getData('angularWidth');
|
||||
if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
|
||||
domElement.innerHTML = node.name;
|
||||
} else if (labels === 'SVG' && (node._depth < 2 || aw > 2000)) {
|
||||
domElement.firstChild.appendChild(document.createTextNode(node.name));
|
||||
}
|
||||
},
|
||||
// Only used when Label type is 'HTML' or 'SVG'
|
||||
// Change node styles when labels are placed
|
||||
// or moved.
|
||||
onPlaceLabel: function(domElement, node){
|
||||
var labels = sb.config.Label.type;
|
||||
if (labels === 'SVG') {
|
||||
var fch = domElement.firstChild;
|
||||
var style = fch.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
style.fontSize = "0.8em";
|
||||
fch.setAttribute('fill', "#fff");
|
||||
} else if (labels === 'HTML') {
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.cursor = 'pointer';
|
||||
style.fontSize = "0.8em";
|
||||
style.color = "#ddd";
|
||||
var left = parseInt(style.left);
|
||||
var w = domElement.offsetWidth;
|
||||
style.left = (left - w / 2) + 'px';
|
||||
}
|
||||
}
|
||||
});
|
||||
//load JSON data.
|
||||
sb.loadJSON(json);
|
||||
//compute positions and plot.
|
||||
sb.refresh();
|
||||
//end
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Treemap - Animated Squarified, SliceAndDice and Strip TreeMaps</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Treemap.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example1.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Animated Squarified, SliceAndDice and Strip TreeMaps
|
||||
</h4>
|
||||
|
||||
In this example a static JSON tree is loaded into a Squarified Treemap.<br /><br />
|
||||
<b>Left click</b> to set a node as root for the visualization.<br /><br />
|
||||
<b>Right click</b> to set the parent node as root for the visualization.<br /><br />
|
||||
You can <b>choose a different tiling algorithm</b> below:
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sq">Squarified </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-st">Strip </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-st" name="layout" value="top" />
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sd">SliceAndDice </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sd" name="layout" value="bottom" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a id="back" href="#" class="theme button white">Go to Parent</a>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,977 +0,0 @@
|
|||
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(){
|
||||
//init data
|
||||
var json = {
|
||||
"children": [
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "276",
|
||||
"$color": "#8E7032",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/11403219.jpg",
|
||||
"$area": 276
|
||||
},
|
||||
"id": "album-Thirteenth Step",
|
||||
"name": "Thirteenth Step"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "271",
|
||||
"$color": "#906E32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/11393921.jpg",
|
||||
"$area": 271
|
||||
},
|
||||
"id": "album-Mer De Noms",
|
||||
"name": "Mer De Noms"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 547,
|
||||
"$area": 547
|
||||
},
|
||||
"id": "artist_A Perfect Circle",
|
||||
"name": "A Perfect Circle"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "209",
|
||||
"$color": "#AA5532",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32349839.jpg",
|
||||
"$area": 209
|
||||
},
|
||||
"id": "album-Above",
|
||||
"name": "Above"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 209,
|
||||
"$area": 209
|
||||
},
|
||||
"id": "artist_Mad Season",
|
||||
"name": "Mad Season"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "260",
|
||||
"$color": "#956932",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/38753425.jpg",
|
||||
"$area": 260
|
||||
},
|
||||
"id": "album-Tiny Music... Songs From the Vatican Gift Shop",
|
||||
"name": "Tiny Music... Songs From the Vatican Gift Shop"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "254",
|
||||
"$color": "#976732",
|
||||
"image": "http://images.amazon.com/images/P/B000002IU3.01.LZZZZZZZ.jpg",
|
||||
"$area": 254
|
||||
},
|
||||
"id": "album-Core",
|
||||
"name": "Core"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 514,
|
||||
"$area": 514
|
||||
},
|
||||
"id": "artist_Stone Temple Pilots",
|
||||
"name": "Stone Temple Pilots"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "181",
|
||||
"$color": "#B54932",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8673371.jpg",
|
||||
"$area": 181
|
||||
},
|
||||
"id": "album-The Science of Things",
|
||||
"name": "The Science of Things"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 181,
|
||||
"$area": 181
|
||||
},
|
||||
"id": "artist_Bush",
|
||||
"name": "Bush"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "229",
|
||||
"$color": "#A15D32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32579429.jpg",
|
||||
"$area": 229
|
||||
},
|
||||
"id": "album-Echoes, Silence, Patience & Grace",
|
||||
"name": "Echoes, Silence, Patience & Grace"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "185",
|
||||
"$color": "#B34B32",
|
||||
"image": "http://images.amazon.com/images/P/B0009HLDFU.01.MZZZZZZZ.jpg",
|
||||
"$area": 185
|
||||
},
|
||||
"id": "album-In Your Honor (disc 2)",
|
||||
"name": "In Your Honor (disc 2)"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 414,
|
||||
"$area": 414
|
||||
},
|
||||
"id": "artist_Foo Fighters",
|
||||
"name": "Foo Fighters"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "398",
|
||||
"$color": "#5DA132",
|
||||
"image": "http://images.amazon.com/images/P/B00005LNP5.01._SCMZZZZZZZ_.jpg",
|
||||
"$area": 398
|
||||
},
|
||||
"id": "album-Elija Y Gane",
|
||||
"name": "Elija Y Gane"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "203",
|
||||
"$color": "#AC5232",
|
||||
"image": "http://images.amazon.com/images/P/B0000B193V.01._SCMZZZZZZZ_.jpg",
|
||||
"$area": 203
|
||||
},
|
||||
"id": "album-Para los Arboles",
|
||||
"name": "Para los Arboles"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 601,
|
||||
"$area": 601
|
||||
},
|
||||
"id": "artist_Luis Alberto Spinetta",
|
||||
"name": "Luis Alberto Spinetta"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "224",
|
||||
"$color": "#A35B32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/26497553.jpg",
|
||||
"$area": 224
|
||||
},
|
||||
"id": "album-Music Bank",
|
||||
"name": "Music Bank"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "217",
|
||||
"$color": "#A65832",
|
||||
"image": "http://images.amazon.com/images/P/B0000296JW.01.MZZZZZZZ.jpg",
|
||||
"$area": 217
|
||||
},
|
||||
"id": "album-Music Bank (disc 1)",
|
||||
"name": "Music Bank (disc 1)"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "215",
|
||||
"$color": "#A75732",
|
||||
"image": "http://images.amazon.com/images/P/B0000296JW.01.MZZZZZZZ.jpg",
|
||||
"$area": 215
|
||||
},
|
||||
"id": "album-Music Bank (disc 2)",
|
||||
"name": "Music Bank (disc 2)"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "181",
|
||||
"$color": "#B54932",
|
||||
"image": "http://images.amazon.com/images/P/B0000296JW.01.MZZZZZZZ.jpg",
|
||||
"$area": 181
|
||||
},
|
||||
"id": "album-Music Bank (disc 3)",
|
||||
"name": "Music Bank (disc 3)"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 837,
|
||||
"$area": 837
|
||||
},
|
||||
"id": "artist_Alice in Chains",
|
||||
"name": "Alice in Chains"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "627",
|
||||
"$color": "#00FF32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8480501.jpg",
|
||||
"$area": 627
|
||||
},
|
||||
"id": "album-10,000 Days",
|
||||
"name": "10,000 Days"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 627,
|
||||
"$area": 627
|
||||
},
|
||||
"id": "artist_Tool",
|
||||
"name": "Tool"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "261",
|
||||
"$color": "#946A32",
|
||||
"image": "http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_medium.png",
|
||||
"$area": 261
|
||||
},
|
||||
"id": "album-2006-09-07: O-Bar, Stockholm, Sweden",
|
||||
"name": "2006-09-07: O-Bar, Stockholm, Sweden"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "211",
|
||||
"$color": "#A95532",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/25402479.jpg",
|
||||
"$area": 211
|
||||
},
|
||||
"id": "album-Lost and Found",
|
||||
"name": "Lost and Found"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 472,
|
||||
"$area": 472
|
||||
},
|
||||
"id": "artist_Chris Cornell",
|
||||
"name": "Chris Cornell"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "197",
|
||||
"$color": "#AE5032",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8634627.jpg",
|
||||
"$area": 197
|
||||
},
|
||||
"id": "album-The Sickness",
|
||||
"name": "The Sickness"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 197,
|
||||
"$area": 197
|
||||
},
|
||||
"id": "artist_Disturbed",
|
||||
"name": "Disturbed"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "493",
|
||||
"$color": "#36C832",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8591345.jpg",
|
||||
"$area": 493
|
||||
},
|
||||
"id": "album-Mama's Gun",
|
||||
"name": "Mama's Gun"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 493,
|
||||
"$area": 493
|
||||
},
|
||||
"id": "artist_Erykah Badu",
|
||||
"name": "Erykah Badu"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "249",
|
||||
"$color": "#996532",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32070871.jpg",
|
||||
"$area": 249
|
||||
},
|
||||
"id": "album-Audioslave",
|
||||
"name": "Audioslave"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 249,
|
||||
"$area": 249
|
||||
},
|
||||
"id": "artist_Audioslave",
|
||||
"name": "Audioslave"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "359",
|
||||
"$color": "#6C9232",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/15858421.jpg",
|
||||
"$area": 359
|
||||
},
|
||||
"id": "album-Comfort y M\u00fasica Para Volar",
|
||||
"name": "Comfort y M\u00fasica Para Volar"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 359,
|
||||
"$area": 359
|
||||
},
|
||||
"id": "artist_Soda Stereo",
|
||||
"name": "Soda Stereo"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "302",
|
||||
"$color": "#847A32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8776205.jpg",
|
||||
"$area": 302
|
||||
},
|
||||
"id": "album-Clearing the Channel",
|
||||
"name": "Clearing the Channel"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 302,
|
||||
"$area": 302
|
||||
},
|
||||
"id": "artist_Sinch",
|
||||
"name": "Sinch"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "177",
|
||||
"$color": "#B74732",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32457599.jpg",
|
||||
"$area": 177
|
||||
},
|
||||
"id": "album-Crash",
|
||||
"name": "Crash"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 177,
|
||||
"$area": 177
|
||||
},
|
||||
"id": "artist_Dave Matthews Band",
|
||||
"name": "Dave Matthews Band"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "207",
|
||||
"$color": "#AA5432",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/30352203.jpg",
|
||||
"$area": 207
|
||||
},
|
||||
"id": "album-Vs.",
|
||||
"name": "Vs."
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 207,
|
||||
"$area": 207
|
||||
},
|
||||
"id": "artist_Pearl Jam",
|
||||
"name": "Pearl Jam"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "486",
|
||||
"$color": "#39C532",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/26053425.jpg",
|
||||
"$area": 486
|
||||
},
|
||||
"id": "album-It All Makes Sense Now",
|
||||
"name": "It All Makes Sense Now"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "251",
|
||||
"$color": "#986632",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/9658733.jpg",
|
||||
"$area": 251
|
||||
},
|
||||
"id": "album-Air",
|
||||
"name": "Air"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 737,
|
||||
"$area": 737
|
||||
},
|
||||
"id": "artist_Kr\u00f8m",
|
||||
"name": "Kr\u00f8m"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "345",
|
||||
"$color": "#728C32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8605651.jpg",
|
||||
"$area": 345
|
||||
},
|
||||
"id": "album-Temple Of The Dog",
|
||||
"name": "Temple Of The Dog"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 345,
|
||||
"$area": 345
|
||||
},
|
||||
"id": "artist_Temple of the Dog",
|
||||
"name": "Temple of the Dog"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "318",
|
||||
"$color": "#7D8132",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/29274729.jpg",
|
||||
"$area": 318
|
||||
},
|
||||
"id": "album-And All That Could Have Been (Still)",
|
||||
"name": "And All That Could Have Been (Still)"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 318,
|
||||
"$area": 318
|
||||
},
|
||||
"id": "artist_Nine Inch Nails",
|
||||
"name": "Nine Inch Nails"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "256",
|
||||
"$color": "#966832",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32595059.jpg",
|
||||
"$area": 256
|
||||
},
|
||||
"id": "album-Mamagubida",
|
||||
"name": "Mamagubida"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "220",
|
||||
"$color": "#A55932",
|
||||
"image": "http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_medium.png",
|
||||
"$area": 220
|
||||
},
|
||||
"id": "album-Reggae \u00e0 Coup de Cirque",
|
||||
"name": "Reggae \u00e0 Coup de Cirque"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "181",
|
||||
"$color": "#B54932",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/16799743.jpg",
|
||||
"$area": 181
|
||||
},
|
||||
"id": "album-Grain de sable",
|
||||
"name": "Grain de sable"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 657,
|
||||
"$area": 657
|
||||
},
|
||||
"id": "artist_Tryo",
|
||||
"name": "Tryo"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "258",
|
||||
"$color": "#966832",
|
||||
"image": "http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_medium.png",
|
||||
"$area": 258
|
||||
},
|
||||
"id": "album-Best Of",
|
||||
"name": "Best Of"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "176",
|
||||
"$color": "#B74732",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/5264426.jpg",
|
||||
"$area": 176
|
||||
},
|
||||
"id": "album-Robbin' The Hood",
|
||||
"name": "Robbin' The Hood"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 434,
|
||||
"$area": 434
|
||||
},
|
||||
"id": "artist_Sublime",
|
||||
"name": "Sublime"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "418",
|
||||
"$color": "#55AA32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8590493.jpg",
|
||||
"$area": 418
|
||||
},
|
||||
"id": "album-One Hot Minute",
|
||||
"name": "One Hot Minute"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 418,
|
||||
"$area": 418
|
||||
},
|
||||
"id": "artist_Red Hot Chili Peppers",
|
||||
"name": "Red Hot Chili Peppers"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "275",
|
||||
"$color": "#8F6F32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/17597653.jpg",
|
||||
"$area": 275
|
||||
},
|
||||
"id": "album-Chinese Democracy",
|
||||
"name": "Chinese Democracy"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "203",
|
||||
"$color": "#AC5232",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/15231979.jpg",
|
||||
"$area": 203
|
||||
},
|
||||
"id": "album-Use Your Illusion II",
|
||||
"name": "Use Your Illusion II"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 478,
|
||||
"$area": 478
|
||||
},
|
||||
"id": "artist_Guns N' Roses",
|
||||
"name": "Guns N' Roses"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "208",
|
||||
"$color": "#AA5432",
|
||||
"image": "http://images.amazon.com/images/P/B0007LCNNE.01.MZZZZZZZ.jpg",
|
||||
"$area": 208
|
||||
},
|
||||
"id": "album-Tales of the Forgotten Melodies",
|
||||
"name": "Tales of the Forgotten Melodies"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 208,
|
||||
"$area": 208
|
||||
},
|
||||
"id": "artist_Wax Tailor",
|
||||
"name": "Wax Tailor"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "208",
|
||||
"$color": "#AA5432",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/7862623.png",
|
||||
"$area": 208
|
||||
},
|
||||
"id": "album-In Rainbows",
|
||||
"name": "In Rainbows"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 208,
|
||||
"$area": 208
|
||||
},
|
||||
"id": "artist_Radiohead",
|
||||
"name": "Radiohead"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "317",
|
||||
"$color": "#7E8032",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8600371.jpg",
|
||||
"$area": 317
|
||||
},
|
||||
"id": "album-Down On The Upside",
|
||||
"name": "Down On The Upside"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "290",
|
||||
"$color": "#897532",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8590515.jpg",
|
||||
"$area": 290
|
||||
},
|
||||
"id": "album-Superunknown",
|
||||
"name": "Superunknown"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 607,
|
||||
"$area": 607
|
||||
},
|
||||
"id": "artist_Soundgarden",
|
||||
"name": "Soundgarden"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "247",
|
||||
"$color": "#9A6432",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/15113951.jpg",
|
||||
"$area": 247
|
||||
},
|
||||
"id": "album-Nico",
|
||||
"name": "Nico"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "218",
|
||||
"$color": "#A65832",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/45729417.jpg",
|
||||
"$area": 218
|
||||
},
|
||||
"id": "album-Soup",
|
||||
"name": "Soup"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "197",
|
||||
"$color": "#AE5032",
|
||||
"image": "http://images.amazon.com/images/P/B00005V5PW.01.MZZZZZZZ.jpg",
|
||||
"$area": 197
|
||||
},
|
||||
"id": "album-Classic Masters",
|
||||
"name": "Classic Masters"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "194",
|
||||
"$color": "#B04E32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/15157989.jpg",
|
||||
"$area": 194
|
||||
},
|
||||
"id": "album-Blind Melon",
|
||||
"name": "Blind Melon"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 856,
|
||||
"$area": 856
|
||||
},
|
||||
"id": "artist_Blind Melon",
|
||||
"name": "Blind Melon"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "537",
|
||||
"$color": "#24DA32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/17594883.jpg",
|
||||
"$area": 537
|
||||
},
|
||||
"id": "album-Make Yourself",
|
||||
"name": "Make Yourself"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "258",
|
||||
"$color": "#966832",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/31550385.jpg",
|
||||
"$area": 258
|
||||
},
|
||||
"id": "album-Light Grenades",
|
||||
"name": "Light Grenades"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "181",
|
||||
"$color": "#B54932",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/32309285.jpg",
|
||||
"$area": 181
|
||||
},
|
||||
"id": "album-Morning View",
|
||||
"name": "Morning View"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 976,
|
||||
"$area": 976
|
||||
},
|
||||
"id": "artist_Incubus",
|
||||
"name": "Incubus"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "198",
|
||||
"$color": "#AE5032",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/8599099.jpg",
|
||||
"$area": 198
|
||||
},
|
||||
"id": "album-On And On",
|
||||
"name": "On And On"
|
||||
},
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "186",
|
||||
"$color": "#B34B32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/30082075.jpg",
|
||||
"$area": 186
|
||||
},
|
||||
"id": "album-Brushfire Fairytales",
|
||||
"name": "Brushfire Fairytales"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 384,
|
||||
"$area": 384
|
||||
},
|
||||
"id": "artist_Jack Johnson",
|
||||
"name": "Jack Johnson"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"children": [],
|
||||
"data": {
|
||||
"playcount": "349",
|
||||
"$color": "#718D32",
|
||||
"image": "http://userserve-ak.last.fm/serve/300x300/21881921.jpg",
|
||||
"$area": 349
|
||||
},
|
||||
"id": "album-Mother Love Bone",
|
||||
"name": "Mother Love Bone"
|
||||
}
|
||||
],
|
||||
"data": {
|
||||
"playcount": 349,
|
||||
"$area": 349
|
||||
},
|
||||
"id": "artist_Mother Love Bone",
|
||||
"name": "Mother Love Bone"
|
||||
}
|
||||
],
|
||||
"data": {},
|
||||
"id": "root",
|
||||
"name": "Top Albums"
|
||||
};
|
||||
//end
|
||||
//init TreeMap
|
||||
var tm = new $jit.TM.Squarified({
|
||||
//where to inject the visualization
|
||||
injectInto: 'infovis',
|
||||
//parent box title heights
|
||||
titleHeight: 15,
|
||||
//enable animations
|
||||
animate: animate,
|
||||
//box offsets
|
||||
offset: 1,
|
||||
//Attach left and right click events
|
||||
Events: {
|
||||
enable: true,
|
||||
onClick: function(node) {
|
||||
if(node) tm.enter(node);
|
||||
},
|
||||
onRightClick: function() {
|
||||
tm.out();
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
//Enable tips
|
||||
Tips: {
|
||||
enable: true,
|
||||
//add positioning offsets
|
||||
offsetX: 20,
|
||||
offsetY: 20,
|
||||
//implement the onShow method to
|
||||
//add content to the tooltip when a node
|
||||
//is hovered
|
||||
onShow: function(tip, node, isLeaf, domElement) {
|
||||
var html = "<div class=\"tip-title\">" + node.name
|
||||
+ "</div><div class=\"tip-text\">";
|
||||
var data = node.data;
|
||||
if(data.playcount) {
|
||||
html += "play count: " + data.playcount;
|
||||
}
|
||||
if(data.image) {
|
||||
html += "<img src=\""+ data.image +"\" class=\"album\" />";
|
||||
}
|
||||
tip.innerHTML = html;
|
||||
}
|
||||
},
|
||||
//Add the name of the node in the correponding label
|
||||
//This method is called once, on label creation.
|
||||
onCreateLabel: function(domElement, node){
|
||||
domElement.innerHTML = node.name;
|
||||
var style = domElement.style;
|
||||
style.display = '';
|
||||
style.border = '1px solid transparent';
|
||||
domElement.onmouseover = function() {
|
||||
style.border = '1px solid #9FD4FF';
|
||||
};
|
||||
domElement.onmouseout = function() {
|
||||
style.border = '1px solid transparent';
|
||||
};
|
||||
}
|
||||
});
|
||||
tm.loadJSON(json);
|
||||
tm.refresh();
|
||||
//end
|
||||
//add events to radio buttons
|
||||
var sq = $jit.id('r-sq'),
|
||||
st = $jit.id('r-st'),
|
||||
sd = $jit.id('r-sd');
|
||||
var util = $jit.util;
|
||||
util.addEvent(sq, 'change', function() {
|
||||
if(!sq.checked) return;
|
||||
util.extend(tm, new $jit.Layouts.TM.Squarified);
|
||||
tm.refresh();
|
||||
});
|
||||
util.addEvent(st, 'change', function() {
|
||||
if(!st.checked) return;
|
||||
util.extend(tm, new $jit.Layouts.TM.Strip);
|
||||
tm.layout.orientation = "v";
|
||||
tm.refresh();
|
||||
});
|
||||
util.addEvent(sd, 'change', function() {
|
||||
if(!sd.checked) return;
|
||||
util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
|
||||
tm.layout.orientation = "v";
|
||||
tm.refresh();
|
||||
});
|
||||
//add event to the back button
|
||||
var back = $jit.id('back');
|
||||
$jit.util.addEvent(back, 'click', function() {
|
||||
tm.out();
|
||||
});
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Treemap - TreeMap with on-demand nodes</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Treemap.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
TreeMap with on-demand nodes
|
||||
</h4>
|
||||
|
||||
This example shows how you can use the <b>request</b> controller method to create a TreeMap with on demand nodes<br /><br />
|
||||
This example makes use of native Canvas text and shadows, but can be easily adapted to use HTML like the other examples.<br /><br />
|
||||
There should be only one level shown at a time.<br /><br />
|
||||
Clicking on a band should show a new TreeMap with its most listened albums.<br /><br />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sq">Squarified </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-st">Strip </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-st" name="layout" value="top" />
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sd">SliceAndDice </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sd" name="layout" value="bottom" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a id="back" href="#" class="theme button white">Go to Parent</a>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,87 +0,0 @@
|
|||
<!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">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Treemap - Cushion TreeMaps</title>
|
||||
|
||||
<!-- CSS Files -->
|
||||
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||||
<link type="text/css" href="../css/Treemap.css" rel="stylesheet" />
|
||||
|
||||
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||||
|
||||
<!-- JIT Library File -->
|
||||
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||||
|
||||
<!-- Example File -->
|
||||
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div id="container">
|
||||
|
||||
<div id="left-container">
|
||||
|
||||
|
||||
|
||||
<div class="text">
|
||||
<h4>
|
||||
Cushion TreeMaps
|
||||
</h4>
|
||||
|
||||
In this example a static JSON tree is loaded into a Cushion Treemap.<br /><br />
|
||||
<b>Left click</b> to set a node as root for the visualization.<br /><br />
|
||||
<b>Right click</b> to set the parent node as root for the visualization.<br /><br />
|
||||
You can <b>choose a different tiling algorithm</b> below:
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="id-list">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sq">Squarified </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-st">Strip </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-st" name="layout" value="top" />
|
||||
</td>
|
||||
<tr>
|
||||
<td>
|
||||
<label for="r-sd">SliceAndDice </label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" id="r-sd" name="layout" value="bottom" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a id="back" href="#" class="theme button white">Go to Parent</a>
|
||||
|
||||
|
||||
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||||
</div>
|
||||
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
|
||||
<div id="right-container">
|
||||
|
||||
<div id="inner-details"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,114 +0,0 @@
|
|||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#id-list {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
margin:10px 20px 0 20px;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
text-indent:2px;
|
||||
}
|
||||
|
||||
#id-list li {
|
||||
list-style: none;
|
||||
margin-bottom:3px;
|
||||
|
||||
}
|
||||
|
||||
.query-color {
|
||||
border:1px solid #999999;
|
||||
float:left;
|
||||
height:10px;
|
||||
margin:3px 3px 0 0;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
#update, #restore {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin:10px 35px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* gray */
|
||||
.gray {
|
||||
color: #e9e9e9;
|
||||
border: solid 1px #555;
|
||||
background: #6e6e6e;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
|
||||
background: -moz-linear-gradient(top, #888, #575757);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
|
||||
}
|
||||
|
||||
.gray:hover {
|
||||
background: #616161;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
|
||||
background: -moz-linear-gradient(top, #757575, #4b4b4b);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
|
||||
}
|
||||
|
||||
.gray:active {
|
||||
color: #afafaf;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
|
||||
background: -moz-linear-gradient(top, #575757, #888);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#id-list {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
margin:10px 20px 0 20px;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
text-indent:2px;
|
||||
}
|
||||
|
||||
#id-list li {
|
||||
list-style: none;
|
||||
margin-bottom:3px;
|
||||
|
||||
}
|
||||
|
||||
.query-color {
|
||||
border:1px solid #999999;
|
||||
float:left;
|
||||
height:10px;
|
||||
margin:3px 3px 0 0;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
#update {
|
||||
margin:10px 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* gray */
|
||||
.gray {
|
||||
color: #e9e9e9;
|
||||
border: solid 1px #555;
|
||||
background: #6e6e6e;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
|
||||
background: -moz-linear-gradient(top, #888, #575757);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
|
||||
}
|
||||
|
||||
.gray:hover {
|
||||
background: #616161;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
|
||||
background: -moz-linear-gradient(top, #757575, #4b4b4b);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
|
||||
}
|
||||
|
||||
.gray:active {
|
||||
color: #afafaf;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
|
||||
background: -moz-linear-gradient(top, #575757, #888);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
#inner-details {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
span.close {
|
||||
color:#FF5555;
|
||||
cursor:pointer;
|
||||
font-weight:bold;
|
||||
margin-left:3px;
|
||||
}
|
||||
|
||||
span.name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*TOOLTIPS*/
|
||||
.tip {
|
||||
text-align: left;
|
||||
width:auto;
|
||||
max-width:500px;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-size: 11px;
|
||||
text-align:center;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#infovis-canvaswidget {
|
||||
margin:25px 0 0 25px;
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
#update {
|
||||
margin:10px 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
||||
|
||||
.tip {
|
||||
text-align: left;
|
||||
width:auto;
|
||||
max-width:500px;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-size: 11px;
|
||||
text-align:center;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
#right-container {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
background-color:#1a1a1a;
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#id-list {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
margin:10px 20px 0 20px;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
text-indent:2px;
|
||||
}
|
||||
|
||||
#id-list li {
|
||||
list-style: none;
|
||||
margin-bottom:3px;
|
||||
|
||||
}
|
||||
|
||||
.query-color {
|
||||
border:1px solid #999999;
|
||||
float:left;
|
||||
height:10px;
|
||||
margin:3px 3px 0 0;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
#update {
|
||||
margin:10px 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* gray */
|
||||
.gray {
|
||||
color: #e9e9e9;
|
||||
border: solid 1px #555;
|
||||
background: #6e6e6e;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
|
||||
background: -moz-linear-gradient(top, #888, #575757);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
|
||||
}
|
||||
|
||||
.gray:hover {
|
||||
background: #616161;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
|
||||
background: -moz-linear-gradient(top, #757575, #4b4b4b);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
|
||||
}
|
||||
|
||||
.gray:active {
|
||||
color: #afafaf;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
|
||||
background: -moz-linear-gradient(top, #575757, #888);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.jit-autoadjust-label {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#update, #restore {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
margin:0px 35px 10px 35px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/*TOOLTIPS*/
|
||||
#inner-details {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
text-align: left;
|
||||
width:auto;
|
||||
max-width:500px;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
font-size: 11px;
|
||||
text-align:center;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
font-size:10px;
|
||||
margin:5px auto;
|
||||
padding:5px;
|
||||
width:170px;
|
||||
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -webkit-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
/*height: 250px;*/
|
||||
}
|
||||
|
||||
#id-list {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
margin:10px 20px 0 20px;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
text-indent:2px;
|
||||
}
|
||||
|
||||
#id-list li {
|
||||
list-style: none;
|
||||
margin-bottom:3px;
|
||||
|
||||
}
|
||||
|
||||
.query-color {
|
||||
border:1px solid #999999;
|
||||
float:left;
|
||||
height:10px;
|
||||
margin:3px 3px 0 0;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
#update {
|
||||
margin:10px 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* gray */
|
||||
.gray {
|
||||
color: #e9e9e9;
|
||||
border: solid 1px #555;
|
||||
background: #6e6e6e;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
|
||||
background: -moz-linear-gradient(top, #888, #575757);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
|
||||
}
|
||||
|
||||
.gray:hover {
|
||||
background: #616161;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
|
||||
background: -moz-linear-gradient(top, #757575, #4b4b4b);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
|
||||
}
|
||||
|
||||
.gray:active {
|
||||
color: #afafaf;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
|
||||
background: -moz-linear-gradient(top, #575757, #888);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
#right-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
#infovis {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
.node {
|
||||
color:#fff;
|
||||
font-size:9px;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
/*
|
||||
text-shadow:2px 2px 5px #000;
|
||||
-o-text-shadow:2px 2px 5px #000;
|
||||
-webkit-text-shadow:2px 2px 5px #000;
|
||||
-moz-text-shadow:2px 2px 5px #000;
|
||||
*/
|
||||
}
|
||||
|
||||
/*TOOLTIPS*/
|
||||
.tip {
|
||||
color: #fff;
|
||||
width: 139px;
|
||||
background-color: black;
|
||||
opacity:0.9;
|
||||
filter:alpha(opacity=90);
|
||||
font-size:10px;
|
||||
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
|
||||
padding:7px;
|
||||
}
|
||||
|
||||
.album {
|
||||
width:100px;
|
||||
margin:3px;
|
||||
}
|
||||
|
||||
#id-list {
|
||||
background-color:#EEEEEE;
|
||||
border:1px solid #CCCCCC;
|
||||
margin:10px 20px 0 20px;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
text-indent:2px;
|
||||
}
|
||||
|
||||
#id-list table {
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
#back {
|
||||
margin:10px 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 14px / 100% Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em 1em 0.55em;
|
||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* white */
|
||||
.white {
|
||||
color: #606060;
|
||||
border: solid 1px #b7b7b7;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
||||
background: -moz-linear-gradient(top, #fff, #ededed);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
||||
}
|
||||
|
||||
.white:hover {
|
||||
background: #ededed;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
||||
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
||||
}
|
||||
|
||||
.white:active {
|
||||
color: #999;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
||||
background: -moz-linear-gradient(top, #ededed, #fff);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
||||
}
|
||||
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
html, body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: "Lucida Grande", Verdana;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
background-color:#F2F2F2;
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-size:0.9em;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-top:-10px;
|
||||
margin-left:7px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size:1.1em;
|
||||
text-decoration:none;
|
||||
font-weight:normal;
|
||||
color:#23A4FF;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#23A4FF;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#left-container,
|
||||
#right-container,
|
||||
#center-container {
|
||||
height:600px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
|
||||
#left-container, #right-container {
|
||||
width:200px;
|
||||
color:#686c70;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
background-color:#fff;
|
||||
background-repeat:no-repeat;
|
||||
border-bottom:1px solid #ddd;
|
||||
}
|
||||
|
||||
#left-container {
|
||||
left:0;
|
||||
background-image:url('col2.png');
|
||||
background-position:center right;
|
||||
border-left:1px solid #ddd;
|
||||
|
||||
}
|
||||
|
||||
#right-container {
|
||||
right:0;
|
||||
background-image:url('col1.png');
|
||||
background-position:center left;
|
||||
border-right:1px solid #ddd;
|
||||
}
|
||||
|
||||
#right-container h4{
|
||||
text-indent:8px;
|
||||
}
|
||||
|
||||
#center-container {
|
||||
width:600px;
|
||||
left:200px;
|
||||
background-color:#1a1a1a;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
#inner-details {
|
||||
font-size:0.8em;
|
||||
list-style:none;
|
||||
margin:7px;
|
||||
}
|
||||
|
||||
#log {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
font-size:1.0em;
|
||||
font-weight:bold;
|
||||
color:#23A4FF;
|
||||
}
|
||||
|
||||
|
||||
#infovis {
|
||||
position:relative;
|
||||
width:600px;
|
||||
height:600px;
|
||||
margin:auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/*TOOLTIPS*/
|
||||
.tip {
|
||||
color: #111;
|
||||
width: 139px;
|
||||
background-color: white;
|
||||
border:1px solid #ccc;
|
||||
-moz-box-shadow:#555 2px 2px 8px;
|
||||
-webkit-box-shadow:#555 2px 2px 8px;
|
||||
-o-box-shadow:#555 2px 2px 8px;
|
||||
box-shadow:#555 2px 2px 8px;
|
||||
opacity:0.9;
|
||||
filter:alpha(opacity=90);
|
||||
font-size:10px;
|
||||
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
|
||||
padding:7px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -13,10 +13,9 @@
|
|||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require_tree .
|
||||
//= require Jit/jit
|
||||
//= require Jit/jit-yc
|
||||
//= require Jit/excanvas
|
||||
//= require Jit/Examples/ForceDirected/example1
|
||||
//= require Jit/ForceDirected/metamap
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.nodemargin').css('padding-top',$('.focus').css('height'));
|
||||
|
|
|
|||
5
test/fixtures/groupgroups.yml
vendored
5
test/fixtures/groupgroups.yml
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
group_id: 1
|
||||
parent_group_id: 1
|
||||
5
test/fixtures/groupitems.yml
vendored
5
test/fixtures/groupitems.yml
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
group_id: 980190962
|
||||
item_id: 980190962
|
||||
5
test/fixtures/grouppeople.yml
vendored
5
test/fixtures/grouppeople.yml
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
group_id: 980190962
|
||||
person_id: 980190962
|
||||
11
test/fixtures/groups.yml
vendored
11
test/fixtures/groups.yml
vendored
|
|
@ -1,11 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
name: Emerging Leader Labs
|
||||
desc: post-monetary social incubator
|
||||
link: http://emergingleaderlabs.org
|
||||
|
||||
two:
|
||||
name: Household-As-Ecology
|
||||
desc: Humanity 3.0 intentional household
|
||||
link: http://householdasecology.org
|
||||
3
test/fixtures/itemitems.yml
vendored
3
test/fixtures/itemitems.yml
vendored
|
|
@ -1,3 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
|
||||
6
test/fixtures/items.yml
vendored
6
test/fixtures/items.yml
vendored
|
|
@ -1,6 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
name: Sacred Economics
|
||||
desc: A clear outline of our necessity for remodeling our economic thinking to a more holistic perspective. Well-written and nice storytelling.
|
||||
link: http://sacred-economics.com/
|
||||
11
test/fixtures/people.yml
vendored
11
test/fixtures/people.yml
vendored
|
|
@ -1,11 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
name: Venessa Miemis
|
||||
desc: Culture hacker.
|
||||
link: http://emergentbydesign.com
|
||||
|
||||
two:
|
||||
name: Seb Paquet
|
||||
desc: Culture hacker.
|
||||
link: http://emergentcities.sebpaquet.net/
|
||||
5
test/fixtures/personitems.yml
vendored
5
test/fixtures/personitems.yml
vendored
|
|
@ -1,5 +0,0 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
person_id: 980190962
|
||||
item_id: 980190962
|
||||
Loading…
Reference in a new issue