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



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

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





	<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 data = {{JSON_DATA_OBJECTS|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("#the_graph").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");


    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>



{% endblock the_javascript %}


