


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



	/*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 {
	    stroke: white;
	    stroke-width: 2.5px;
	    opacity: 0.7;
		background: linen;
		line-height: 0.7em;
	}


	.smalldesc {
		font-size: 20px;
		margin-top: 0px;
		color: black;
	}


	.hidden {
		display: none;
	}

	kbd {
		padding: 2px 4px;
	    font-size: 90%;
	    color: #fff;
	    background-color: #333;
	    border-radius: 3px;
	    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);border-image-outset:
	}

	/*slider*/

	.side-panel{
		background-color: #E6E6E6;
		padding: 10px;
		/*word-wrap: break-word;*/
	    overflow: auto;
	}

	.side-panel-left{
		box-shadow: -5px 0 15px -6px #585858 inset;
	}

	.side-panel-right{
		box-shadow: 5px 0 15px -6px #585858 inset;
	}

	a.class {
		color: darkred;
	}
	a.prop {
		color: darkblue;
	}

	.turtlesource {
		font-size: 12px;
	}

	dt {
		color: darkslategrey;
	}

	.text-muted {
		color: grey;
	}

	hr {
		margin-top: 20px;
	    margin-bottom: 20px;
	}

</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://lambdamusic.github.io/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 %}



	<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_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 data = {{JSON_DATA_CLASSES|safe}};

    var w = 1280,
        h = 800,
        r = 720,
        x = d3.scale.linear().range([0, r]),
        y = d3.scale.linear().range([0, r]),
        node,
        root;

    var pack = d3.layout.pack()
        .sort(d3.descending)
        .size([r, r])
        .value(function(d) { return d.size; });

    var vis = d3.select("#graph_classes").insert("svg:svg", "h2")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");


    var tooltip = d3.select("body")
	    .append("div")
	    .style("position", "absolute")
	    .style("border-radius", "5px")
	    .style("z-index", "100")
	    .style("visibility", "hidden")
	    .style("opacity", ".85")
	    .style("color", "lightsteelblue")
	    .style("background", "white")
	    .style("font-size", "40px")
	    .text("a simple tooltip");


{#    d3.json("flare.json", function(data) {#}
    node = root = data;

    var nodes = pack.nodes(data);

      vis.selectAll("circle")
          .data(nodes)
          .enter().append("svg:circle")
          .attr("class", function(d) { return d.children ? "parent" : "child"; })
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", function(d) { return d.r; })
          .on("mouseover", function(d){
			d3.select(this).attr("fill", "darkorange");
			tooltip.text(d.name);
			tooltip.style("visibility", "visible"); })
          .on("mousemove", function(d){return tooltip.style("top",
		      (d3.event.pageY-100)+"px").style("left",(d3.event.pageX+50)+"px");})
          .on("mouseout", function(d){
                d3.select(this).attr("fill", ""); // default = no stroke
                return tooltip.style("visibility", "hidden");}
                )
          .on("click", function(d) { return zoom(node == d ? root : d); });

      vis.selectAll("text")
          .data(nodes)
          .enter().append("svg:text")
          .attr("class", function(d) { return d.children ? "parent" : "child"; })
          .attr("x", function(d) { return d.x; })
          .attr("y", function(d) {
              if (d.children) {
                  return d.y - (d.r - d.r/20);
              } else {
                  return d.y ;
              };
          })
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
          .text(function(d) { return d.name; });

      d3.select(window).on("click", function() { zoom(root); });

{#    });#}

    function zoom(d, i) {
      var k = r / d.r / 2;
      x.domain([d.x - d.r, d.x + d.r]);
      y.domain([d.y - d.r, d.y + d.r]);

      var t = vis.transition()
          .duration(d3.event.altKey ? 7500 : 750);

      t.selectAll("circle")
          .attr("cx", function(d) { return x(d.x); })
          .attr("cy", function(d) { return y(d.y); })
          .attr("r", function(d) { return k * d.r; });

      t.selectAll("text")
          .attr("x", function(d) { return x(d.x); })
          .attr("y", function(d) {
              if (d.children) {
                  return y(d.y - (d.r - d.r/20));
              } else {
                  return y(d.y) ;
              };
          })
          .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

      node = d;
      d3.event.stopPropagation();
    }


</script>


</body>
</html>
