{% extends "shared/d3_base.html" %}





{% block custom_css %}


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


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


</style>

{% endblock custom_css %}




  {% block main_content %}


	<div class="row header">
		
		
		
			
		{% if TOTAL_CLASSES %}
			<a href="index.html" class="{% if thispage=="classes" %}active{% endif %}">Classes ({{TOTAL_CLASSES}})</a>&nbsp;&nbsp;
		{% endif %}
		
		{% if TOTAL_PROPERTIES %}
			<a href="properties.html" class="{% if thispage=="properties" %}active{% endif %}">Properties ({{TOTAL_PROPERTIES}})</a>&nbsp;&nbsp;
		{% endif %}
		
		{% if TOTAL_CONCEPTS %}
			<a href="skos.html" class="{% if thispage=="concepts" %}active{% endif %}">Concepts ({{TOTAL_CONCEPTS}})</a>
		{% endif %}
			
			
		

	</div>


	<div class="row">

		<!-- the graph -->
		
		<div class="col-md-12" id="the_graph">


		</div>


	</div>




{% endblock main_content %}






  {% block extra_footer %}

  Visualization developed with <a class="greylink" href="https://github.com/d3/d3">d3.js</a>.
  
  {% endblock extra_footer %}
  
  
  








{% block the_javascript %}



{# 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>





{% include 'shared/js_slidereveal.html' %}





<script type="text/javascript">

	var root = {{JSON_DATA_OBJECTS|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("#the_graph").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){
         console.log(objid);
         showpanel(objid);
         };

    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>



{% endblock the_javascript %}


