Skip to content

Commit

Permalink
Merge pull request #4 from gkirtzou/master
Browse files Browse the repository at this point in the history 
Fixed error in visualization in firefox
  • Loading branch information
@gkirtzou
gkirtzou authored Feb 1, 2018
2 parents c49705f + 3df45e1 commit 47c9ca6
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 47 deletions.
41 changes: 30 additions & 11 deletions OnToology/omtd-share-ontology.owl/documentation/index-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,22 @@

<!-- Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="resources/CollapsibleTreeVisualization/d3.v3.min.js" charset="utf-8"></script>
<script src="resources/CollapsibleTreeVisualization/d3.tip.v0.6.7.js"></script>
<script src="resources/CollapsibleTreeVisualization/dndTree.js"></script>
<script src="resources/CollapsibleTreeVisualization/dndTree.js"></script>


<script>
function loadHash() {
jQuery(".markdown").each(function(el){jQuery(this).after(marked(jQuery(this).text())).remove()});
var hash = location.hash;
jQuery(".markdown").each(function(el){jQuery(this).after(marked(jQuery(this).text())).remove()});
var hash = location.hash;
if($(hash).offset()!=null){
$('html, body').animate({scrollTop: $(hash).offset().top}, 0);
}
}
loadTOC();
}
function loadTOC(){
}

function loadTOC(){
//process toc dynamically
var t='<h2>Table of contents</h2><ul>';i = 1;j=0;
jQuery(".list").each(function(){
Expand All @@ -54,17 +56,19 @@
});
t+='</ul>';
$("#toc").html(t);
}
}

$(function(){
$("#abstract").load("sections/abstract-en.html");
$("#introduction").load("sections/introduction-en.html");
$("#overview").load("sections/overview-en.html");
$("#visualization").load("sections/dndTree.html");
$("#description").load("sections/description-en.html");
$("#references").load("sections/references-en.html");
$("#crossref").load("sections/crossref-en.html", null, loadHash);
});
</script>
</script>


</head>

<body>
Expand All @@ -88,8 +92,21 @@ <h1>OMTD-SHARE ontology</h1>
</div>
</div> <div id="abstract"></div>
<div id="toc"></div> <div id="introduction"></div>


<div>
<h2 id="visualization" class="list">OMTD-SHARE ontology: Hierachical Visualization <span class="backlink"> back to <a href="#toc">ToC</a></span></h2>
This section provides an interactive visualization of the class hierachy defined by OMTD-SHARE ontology.
The figure offers the following functionalities :
<ul>
<li>Zoom in by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. </li>
<li>Zoom out by holding shift when double-clicking.</li>
<li>Expanding and collapsing of class-nodes is achieved by clicking on the desired node.</li>
<li>Extra information for each class is provided by hovering the mouse over its node.</li>
</ul>
<div id="tree-container"></div>
</div>
<div id="overview"></div>
<div id="visualization"></div>
<div id="description"></div>
<div id="crossref"></div>
<div id="references"></div>
Expand All @@ -98,5 +115,7 @@ <h2 id="ack" class="list">Acknowledgements <span class="backlink"> back to <a hr
<p>
The authors would like to thank <a href="http://www.essepuntato.it/">Silvio Peroni</a> for developing <a href="http://www.essepuntato.it/lode">LODE</a>, a Live OWL Documentation Environment, which is used for representing the Cross Referencing Section of this document and <a href="https://w3id.org/people/dgarijo">Daniel Garijo</a> for developing <a href="https://github.com/dgarijo/Widoco">Widoco</a>, the program used to create the template used in this documentation.</p>
</div>


</body>
</html>
5 changes: 5 additions & 0 deletions ...omtd-share-ontology.owl/documentation/resources/CollapsibleTreeVisualization/d3.v3.min.js
View file

Large diffs are not rendered by default.

60 changes: 27 additions & 33 deletions ...y/omtd-share-ontology.owl/documentation/resources/CollapsibleTreeVisualization/dndTree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,10 @@ EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.*/




// Get JSON data
// flare.json example file
treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontology-visualization.json", function(error, treeData) {

//"use strict";

// Calculate total nodes, max label length
var totalNodes = 0;
Expand All @@ -49,12 +48,12 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
var root;

// size of the diagram
var margin = {top: 20, right: 120, bottom: 20, left: 120};
var viewerWidth = $(document).width()- margin.right - margin.left;
var viewerHeight = 1000;//$(document).height();
var margin = {top: 20, right: 150, bottom: 20, left: 150};
var treeSvgWidth = $(document).width() - margin.right;
var treeSvgHeight = 600;//$(document).height();

var tree = d3.layout.tree()
.size([viewerHeight, viewerWidth]);
.size([treeSvgHeight, treeSvgWidth]);


// define a d3 diagonal projection for use by the node paths later on.
Expand Down Expand Up @@ -98,7 +97,6 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
sortTree();

// TODO: Pan function, can be better implemented.

function pan(domNode, direction) {
var speed = panSpeed;
if (panTimer) {
Expand Down Expand Up @@ -179,26 +177,25 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo


// Define the tooltip to be displayed
var tip = d3.tip()
var mytooltip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.direction('e')
.html(function(d) {
tooltipText = "<strong>Label:</strong> " + d.name
tooltipText = tooltipText + "<br>IRI: " + d.URI
tooltipText = tooltipText + "<br>Definition: " + d.definition
return tooltipText
var tooltipText = "<strong>Label:</strong> " + d.name;
tooltipText = tooltipText + "<br>IRI: " + d.URI;
tooltipText = tooltipText + "<br>Definition: " + d.definition;
return tooltipText;
})

// define the baseSvg, attaching a class for styling and the zoomListener
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", treeSvgWidth + "px")
.attr("height", treeSvgHeight + "px")
.attr("class", "overlay")
.call(zoomListener)
.call(tip);

// console.log('BaseSVG', baseSvg)
.call(mytooltip);


/*
// Define the drag listeners for drag/drop behaviour of nodes.
Expand Down Expand Up @@ -350,11 +347,11 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
// Function to center node when clicked/dropped so node doesn't get
// lost when collapsing/moving with large amount of children.
function centerNode(source) {
scale = zoomListener.scale();
x = -source.y0;
y = -source.x0;
x = x * scale + viewerWidth / 2;
y = y * scale + viewerHeight / 2;
var scale = zoomListener.scale();
var x = -source.y0;
var y = -source.x0;
x = x * scale + treeSvgWidth / 2;
y = y * scale + treeSvgHeight / 2;
d3.select('g').transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
Expand Down Expand Up @@ -400,7 +397,7 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
};
childCount(0, root);
var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line
tree = tree.size([newHeight, viewerWidth]);
tree = tree.size([newHeight, treeSvgWidth]);

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
Expand All @@ -415,7 +412,7 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
});

// Update the nodes…
node = svgGroup.selectAll("g.node")
var node = svgGroup.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
Expand All @@ -429,8 +426,8 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on('click', click)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
.on('mouseover', mytooltip.show)
.on('mouseout', mytooltip.hide);

nodeEnter.append("circle")
.attr('class', 'nodeCircle')
Expand Down Expand Up @@ -561,16 +558,13 @@ treeJSON = d3.json("resources/CollapsibleTreeVisualization/omtd-share-tdm-ontolo
// Append a group which holds all nodes and which the zoom Listener can act upon.
var svgGroup = baseSvg.append("g");

//console.log('Base svg ', baseSvg);
// Define the root
root = treeData;

root.x0 = viewerHeight / 2;
root.x0 = treeSvgHeight / 2;
root.y0 = 0;

// Layout the tree initially and center on the root node.
update(root);
centerNode(root);
// console.log('Root', root);
// console.log('Base svg ', baseSvg);
});

3 changes: 0 additions & 3 deletions OnToology/omtd-share-ontology.owl/documentation/sections/dndTree.html
View file

This file was deleted.

0 comments on commit 47c9ca6

Please sign in to comment.