


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

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

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




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



text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  fill: #ccc;
  stroke: #999;
  pointer-events: all;
}

circle.parent {
  fill: #1f77b4;
  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

{#note: June 20, 2016 removed to allow mousetips on all circles #}
{#circle.child {#}
{#  pointer-events: none;#}
{# } #}


circle.child:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
  fill: #eaeaea;
  fill-opacity: .9;
}



</style>


</head>


<body>

	{# VISIBLE PAGE HTML #}

	{# note: showpanel arg is the ID of the div that is showing.. #}

	<h1 class="title">Ontology:&nbsp;<a href="javascript:showpanel('ontoinfo');">{{main_uri}}</a></h1>
	<h3>{{ontology.bestDescription}}</h3>

	<p><small>Ontology documentation automatically generated by <a class="greylink" href="http://ontospy.readthedocs.org/">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 %}



	<hr>
	<small>Documentation automatically generated by <a href="https://github.com/lambdamusic/OntoSpy">OntoSpy</a> on {% now "jS F Y H:i" %}</small>







{# JAVASCRIPT #}

<script type="text/javascript" src="{{STATIC_URL}}libs/d3-v3/d3.min.js"></script>

<script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery.slidereveal.min.js"></script>

<script type="text/javascript">

	var root = {{JSON_DATA_CLASSES|safe}} ;

    var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();

    var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);

    var svg = d3.select("#graph_classes").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");


    var tooltip = d3.select("body")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .style("color", "white")
        .style("padding", "8px")
        .style("background-color", "rgba(0, 0, 0, 0.75)")
        .style("border-radius", "6px")
        .style("font", "12px sans-serif")
        .text("tooltip");


     function doclick(objid){
{#         var win = window.open("http://www.nature.com/subjects/"+objid, '_blank');#}
{#         win.focus();#}
         console.log(objid);
         };

{#    d3.json("flare.json", function(error, root) {#}
    var node = svg.selectAll(".node")
          .data(bubble.nodes(classes(root))
          .filter(function(d) { return !d.children; }))
          .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      node.append("circle")
          .attr("r", function(d) { return d.r; })
          .style("fill", function(d) { return color(d.packageName); })
          .on("mouseover", function(d) {
                  tooltip.text(d.qname + ": " + format(d.realsize) + " subterms");
                  tooltip.style("visibility", "visible");
          })
          .on("mousemove", function() {
              return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
          })
          .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
          .on("click", function(d, i) {
			   doclick(d.objid);
		    });

      node.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .style("pointer-events", "none")
          .text(function(d) { return d.className.substring(0, d.r / 3); });
{#    });#}

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
      var classes = [];

      function recurse(name, node) {
        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
        else classes.push({packageName: name, className: node.name, qname: node.qname, value: node.size, realsize: node.realsize, objid: node.objid});
      }

      recurse(null, root);
      return {children: classes};
    }

    d3.select(self.frameElement).style("height", diameter + "px");






    </script>



</body>
</html>
