
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:vs="http://www.w3.org/2003/06/sw-vocab-status/ns#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:owl="http://www.w3.org/2002/07/owl#"
xmlns:dct="http://purl.org/dc/terms/"
xmlns:dc="http://purl.org/dc/elements/1.1/">

<title>{{ontology.uri}}</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />




<style type="text/css" media="screen">
  	
	

body {
    margin-left: 6em;
    margin-right: 12em;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica;
}

h1, h2, h3, h4, h5, h6 { text-align: left }
/* background should be transparent, but WebTV has a bug */
h1, h2, h3, h4, h5 { color: #000000; background: white }
h2 { font: 140% sans-serif }
h3 { font: 120% sans-serif }
h4 { font: bold 100% sans-serif }
h5 { font: italic 100% sans-serif }
h6 { font: small-caps 100% sans-serif }

.margintop {
	 margin-top: 40px;
}	
	
	
 
 #chart, #header, #footer {
   position: absolute;
   top: 0;
 }

 #header, #footer {
   z-index: 1;
   display: block;
   font-size: 36px;
   font-weight: 300;
   text-shadow: 0 1px 0 #fff;
 }

 #header.inverted, #footer.inverted {
   color: #fff;
   text-shadow: 0 1px 4px #000;
 }

 #header {
   top: 80px;
   left: 140px;
   width: 1000px;
 }

 #footer {
   top: 650px;
   left: 10px;

 }

 rect {
   fill: none;
   pointer-events: all;
 }

 pre {
   font-size: 18px;
 }

 line {
   stroke: #000;
   stroke-width: 1.5px;
 }

 .string, .regexp {
   color: #f39;
 }

 .keyword {
   color: #00c;
 }

 .comment {
   color: #777;
   font-style: oblique;
 }

 .number {
   color: #369;
 }

 .class, .special {
   color: #1181B8;
 }

 a:link, a:visited {
   color: #666;
   text-decoration: none;
 }

 a:hover {
   color: #000
 }

 .hint {
   position: absolute;
   right: 0;
   width: 1280px;
   font-size: 12px;
   color: #999;
 }
 
	/*extra css*/

	.node circle {
	  cursor: pointer;
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 1.5px;
	}

	.node text {
	  font-size: 11px;
	}

	path.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 1.5px;
	}
	
	
	.infoentity {
		background: white;
	}

  </style>
  
  

{# NOTE: if needed, trick to be able to load the json data cross-domain... #}
{# <script type="text/javascript" src="{{STATIC_PATH}}sample.js"></script> #}

{#  #}
{# <script type="text/javascript"> #}
{#   var JSON_DATA = {{JSON_DATA_CLASSES|safe}}; #}
{# </script> #}
{#    #}
{#    #}
  
  

</head>



<body>
	
	
    {# <h1>{{ontology.bestLabel}}</h1> #}
	<h1 class="title">Graph:&nbsp;<a href="{{ontology.uri}}"  target="_blank">{{ontology.uri}}</a></h1>
	<h3>{{ontology.bestDescription}}</h3>
    
	<p><small>Ontology documentation automatically generated by <a class="greylink" href="https://github.com/lambdamusic/Ontospy">Ontospy</a> on {% now "jS F Y H:i" %}</small></p>

	<hr>
	

	{% if TOTAL_CLASSES %}
	<div class="row">
		<h3>Classes ({{TOTAL_CLASSES}})</h3>
		<div class="col-md-12" id="graph_classes">
			

		</div>	

		
	</div>
	{% endif %}
	
	{% if TOTAL_PROPERTIES %}
	<div class="row">
		<h3>Properties ({{TOTAL_PROPERTIES}})</h3>
		<div class="col-md-12" id="graph_properties">
			

		</div>	

		
	</div>
	{% endif %}
	
	
	{% if TOTAL_CONCEPTS %}
	<div class="row">
		<h3>Concepts ({{TOTAL_CONCEPTS}})</h3>
		<div class="col-md-12" id="graph_concepts">
			

		</div>	

		
	</div>
	{% endif %}
	
		
	
	
	
	<hr>
	<small>Documentation automatically generated by <a href="https://github.com/lambdamusic/Ontospy">Ontospy</a> on {% now "jS F Y H:i" %}</small>
	
	
	<script type="text/javascript" src="{{STATIC_PATH}}d3.v2.min.js"></script>

    <script type="text/javascript" src="{{STATIC_PATH}}d3.layout.tree.js"></script>
	




<script type="text/javascript">

//
// CLASSES
//

{% if TOTAL_CLASSES %}

	var json1 = {{JSON_DATA_CLASSES|safe}};

	var m = [20, 120, 100, 120],
	    w = 1680 - m[1] - m[3],
	    h = 800 - m[0] - m[2],
	    i = 0,
	    root_classes;

	var tree1 = d3.layout.tree()
	    .size([h, w]);

	var diagonal1 = d3.svg.diagonal()
	    .projection(function(d) { return [d.y, d.x]; });

	var vis1 = d3.select("#graph_classes").append("svg:svg")
	    .attr("width", w + m[1] + m[3])
	    .attr("height", h + m[0] + m[2])
	  	.append("svg:g")
	    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// d3.json(JSON_FILE, function(json) {
	root_classes = json1;
	root_classes.x0 = h / 2;
	root_classes.y0 = 0;


	{% if TOTAL_CLASSES > 200 %}

		// Initialize the display to show no nodes:
		root_classes.children.forEach(toggleAll);
	{% endif %}


	update(vis1, tree1, diagonal1, root_classes, json1);

{% endif %}




//
// PROPERTIES
//


{% if TOTAL_PROPERTIES %}


	var json2 = {{JSON_DATA_PROPERTIES|safe}};

	var m = [20, 120, 100, 120],
	    w = 1680 - m[1] - m[3],
	    h = 800 - m[0] - m[2],
	    i = 0,
	    root_properties;

	var tree2 = d3.layout.tree()
	    .size([h, w]);

	var diagonal2 = d3.svg.diagonal()
	    .projection(function(d) { return [d.y, d.x]; });

	var vis2 = d3.select("#graph_properties").append("svg:svg")
	    .attr("width", w + m[1] + m[3])
	    .attr("height", h + m[0] + m[2])
	  	.append("svg:g")
	    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// d3.json(JSON_FILE, function(json) {
	root_properties = json2;
	root_properties.x0 = h / 2;
	root_properties.y0 = 0;

	{% if TOTAL_PROPERTIES > 200 %}

		// Initialize the display to show no nodes:
		root_properties.children.forEach(toggleAll);
	{% endif %}


	update(vis2, tree2, diagonal2, root_properties, json2);

{% endif %}





{% if TOTAL_CONCEPTS %}

	var json3 = {{JSON_DATA_CONCEPTS|safe}};

	var m = [20, 120, 100, 120],
	    w = 1680 - m[1] - m[3],
	    h = 800 - m[0] - m[2],
	    i = 0,
	    root_concepts;

	var tre3 = d3.layout.tree()
	    .size([h, w]);

	var diagonal3 = d3.svg.diagonal()
	    .projection(function(d) { return [d.y, d.x]; });

	var vis3 = d3.select("#graph_concepts").append("svg:svg")
	    .attr("width", w + m[1] + m[3])
	    .attr("height", h + m[0] + m[2])
	    .append("svg:g")
	    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	root_concepts = json3;
	root_concepts.x0 = h / 2;
	root_concepts.y0 = 0;



	{% if TOTAL_CONCEPTS > 200 %}
		// Initialize the display to show no nodes:
		root_concepts.children.forEach(toggleAll);
	{% endif %}



	update(vis3, tree3, diagonal3, root_concepts, json3);
  
  
{% endif %}



//
//  SHARED FUNCTIONS
//


// mikele: added more args [vis, tree, diagonal, root] which originally were referenced as a Global var
function update(vis, tree, diagonal, source, root) {
	
  var duration = d3.event && d3.event.altKey ? 5000 : 500;

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse();

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", function(d) { toggle(d); update(vis, tree, diagonal, d, root); }); // note ref to <root>

  nodeEnter.append("svg:circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("svg:text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6)
	  .on("mouseover", function(d, i) {
		  console.log(d.name);
		  label_name.text(d.name);
	  })
	  .on("mouseout", function(d, i) {
		  label_name.text("");
	  });


  var label_name = vis.append("text")
      .attr("x", 100)
      .attr("y", 200)
      .attr("opacity", "1")
	  .style("font-size", "110px")
	  .style("fill", "lightgray")
	  .attr("class", "infoentity")
	  .text("");


  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
    .transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
  
  
}  // end of Update




function toggleAll(d) {
	if (d.children) {
	  d.children.forEach(toggleAll);
	  toggle(d);
	}
}



// Toggle children.
function toggle(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
}


</script>





	
</body>
</html>


