
<!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" />
  
  

  {# 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|safe}};
</script>
  
  
  <style type="text/css" media="screen">
  	
	
/* tree.css contents */

  body {
/*   overflow: hidden;*/
   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 }
 
 #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: #000;
   text-decoration: none;
 }

 a:hover {
   color: #666;
 }

 .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;
	}

  </style>
  
  
  

    {# <link type="text/css" rel="stylesheet" href="tree.css"/> #}
	


</head>



<body>
	
	
    {# <h1>{{ontology.bestLabel}}</h1> #}
	<h1 class="title">{{ontology.uri}}</h1>
	<h3>{{ontology.bestDescription}}</h3>
    
	<h5>Documentation automatically generated by <a href="https://github.com/lambdamusic/Ontospy">Ontospy</a> on {% now "jS F Y H:i" %}</h5>

	<hr>
	

	
	<div class="row">
		
		<div class="col-md-12" id="graph">
			

		</div>	

		
	</div>
	
		
	
	
	
	<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">


	// var JSON_FILE = "{{ STATIC_URL }}subjectsviz/d3/flare_example.json"

	var json = JSON_DATA;

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

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

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

var vis = d3.select("#graph").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 = json;
  root.x0 = h / 2;
  root.y0 = 0;

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

	{% if total_entities > 300 %}
	
		// Initialize the display to show no nodes:
		root.children.forEach(toggleAll);
	
	{% endif %}



  update(root);
// });

function update(source) {
  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(d); });

  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")
	  .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;
  });
  
  
}

// 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>


