pr3ssh · November 5, 2013 15:39
diff --git a/index.html b/index.html
 <!-- CHECK THIS: http://mbostock.github.io/d3/talk/20111018/tree.html -->


 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  background-color: white;
  text-align: center;
 }

 .node circle {
  cursor: pointer;
  fill: #990000;
  stroke: white;
 }

 .node circle:hover {
  fill: #660000;
 }

 .node text {
  font: 16px sans-serif;
  color: #990000;
  text-anchor: middle;
  font-weight: bolder;
  transform: translate(0px, -12px);
  -ms-transform: translate(0px, -12px);
  -webkit-transform: translate(0px, -12px);
  -moz-transform: translate(0px, -12px);
 }

 path.link {
  fill: none;
  stroke: #AAA;

 }

 path.selected {
  fill: none;
  stroke: #990000;
  stroke-width: 3px;
 }

 #infobox {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50px;
  width: 100%;
  background-color: #990000;
  color: white;
  text-align: center;
  font: 18px sans-serif;
  padding-top: 20px;
 }

 #titlebox {
  position: absolute;
  top: 0;
  right: 0;
  padding: 30px;
 }

 #titlebox h1 {
  color: #990000;
  font: 28px sans-serif;
 }

 select {
  padding: 8px;
  margin: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  color: #990000;
  border: none;
  outline: none;
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
 }

 option:hover {
  background: #990000;
  color: white;
 }

 ::selection {
  background: #990000;
 }
 ::-moz-selection {
  background: #990000;
 }

 </style>
 <body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="http://underscorejs.org/underscore-min.js"></script>
  <script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>

  <div id="titlebox">
    <h1>Schema.org Data Tree</h1>
    <div id="selectbox">
      <select></select>
    </div>
  </div>  

 <script>

  function getElementByParent(data, base) {
      if (!_.isUndefined(base)) {
          var el = new Object();
          el.name = base;
          if (!_.isUndefined(data.types[base])) {
              childrens = data.types[base].subtypes;
              // console.log(el.name + " has " + childrens.length + " childrens.")
              if (childrens.length > 0) {
                  var children_array = [];
                  _.each(childrens, function(key, val) {
                      children_array.push(getElementByParent(data, key));
                  });
                  el.children = children_array;
                  return el;
              }
              else {
                  el.size = Math.floor((Math.random()*1000)+1);
                  return el;
              }
          }
          else {
              console.log("Errro accessing to property " + base)
              return null;
          }
      }
      else {
          return null;
      }
  }
 

 var width = 1100,
    height = 800;

 var canvas = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
            .attr("transform", "translate(50, 50)");

 // Add the clipping path
 canvas.append("svg:clipPath").attr("id", "clipper")
    .append("svg:rect")
    .attr('id', 'clip-rect');

 // set the clipping path
 var animGroup = canvas.append("svg:g")
    .attr("clip-path", "url(#clipper)");

 var tree = d3.layout.tree()
        .size([width-100, height-100]);

 var globalData;
 var nodes;
 var links;
 var diagonal = d3.svg.diagonal(); //.projection(function (d) { return [d.y, d.x]; })
 // CreativeWork.json
 d3.json("http://schema.rdfs.org/all.json", function(data) {

  // Initialize selector
  childrens = data.types["Thing"].subtypes;
  _.each(childrens, function(key) {
    if (key == "CreativeWork") $('#selectbox select').append("<option selected>" + key + "</option>");
    else $('#selectbox select').append("<option>" + key + "</option>");
  });
  
  globalData = data;

  update();

 });

 function clean() {
  // exit and remove
  canvas.selectAll("path").data([]).exit().remove();
  canvas.selectAll("g").data([]).exit().remove();
 }


 function update() {

  // Extract data
  root = getElementByParent(globalData, $('#selectbox select').find(":selected").text());

  nodes = tree.nodes(root);
  links = tree.links(nodes);

  var link = canvas.selectAll("link")
          .data(links)
          .enter()
          .append("path")
          .attr("class", "link")
          .attr("d", diagonal);
  
  var node = canvas.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
                .attr("class", "node")
                .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
                .on("click", click);

  node.append("circle")
          .attr("r", "10");

  // node.append("text")
  //         .text(function(d) { return d.name; });

 }


 function click(d, i) {

  // Walk parent chain
  var ancestors = [];
  var n_ancestors = [];
  var parent = d;
  while (!_.isUndefined(parent)) {
      ancestors.push(parent);
      n_ancestors.unshift(parent.name);
      parent = parent.parent;
  }
  var breadcrumb = '';
  _.each(n_ancestors, function(key, val) {
    if (val < n_ancestors.length -1) breadcrumb += key + ' / ';
    else breadcrumb += key;
  });
  $("#infobox").text(breadcrumb);


  var matchedLinks = [];
  canvas.selectAll('path.link')
      .filter(function(d, i)
      {
          return _.any(ancestors, function(p)
          {
              return p === d.target;
          });
      })
      .each(function(d)
      {
          matchedLinks.push(d);
      });
  
  animateParentChain(matchedLinks);
 }

 function animateParentChain(links) {

    var linkRenderer = d3.svg.diagonal();

    animGroup.selectAll("path.selected")
        .data([])
        .exit().remove();

    animGroup.selectAll("path.selected")
        .data(links)
        .enter().append("svg:path")
        .attr("class", "selected")
        .attr("d", linkRenderer);

    // Animate the clipping path
    var overlayBox = canvas.node().getBBox();

    canvas.select("#clip-rect")
        .attr("x", overlayBox.x + overlayBox.width)
        .attr("y", overlayBox.y)
        .attr("width", 0)
        .attr("height", overlayBox.height)
        .transition().duration(500)
        .attr("x", overlayBox.x)
        .attr("width", overlayBox.width);

 }


 $('#selectbox select').change(function() {
  clean();
  update();
 });

 </script>

  <div id="infobox"><h1></h1><p></p></div>

 </body>
	<!-- CHECK THIS: http://mbostock.github.io/d3/talk/20111018/tree.html -->


	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background-color: white;
	text-align: center;
	}

	.node circle {
	cursor: pointer;
	fill: #990000;
	stroke: white;
	}

	.node circle:hover {
	fill: #660000;
	}

	.node text {
	font: 16px sans-serif;
	color: #990000;
	text-anchor: middle;
	font-weight: bolder;
	transform: translate(0px, -12px);
	-ms-transform: translate(0px, -12px);
	-webkit-transform: translate(0px, -12px);
	-moz-transform: translate(0px, -12px);
	}

	path.link {
	fill: none;
	stroke: #AAA;

	}

	path.selected {
	fill: none;
	stroke: #990000;
	stroke-width: 3px;
	}

	#infobox {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 50px;
	width: 100%;
	background-color: #990000;
	color: white;
	text-align: center;
	font: 18px sans-serif;
	padding-top: 20px;
	}

	#titlebox {
	position: absolute;
	top: 0;
	right: 0;
	padding: 30px;
	}

	#titlebox h1 {
	color: #990000;
	font: 28px sans-serif;
	}

	select {
	padding: 8px;
	margin: 0;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #990000;
	border: none;
	outline: none;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	}

	option:hover {
	background: #990000;
	color: white;
	}

	::selection {
	background: #990000;
	}
	::-moz-selection {
	background: #990000;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="http://underscorejs.org/underscore-min.js"></script>
	<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>

	<div id="titlebox">
	<h1>Schema.org Data Tree</h1>
	<div id="selectbox">
	<select></select>
	</div>
	</div>

	<script>

	function getElementByParent(data, base) {
	if (!_.isUndefined(base)) {
	var el = new Object();
	el.name = base;
	if (!_.isUndefined(data.types[base])) {
	childrens = data.types[base].subtypes;
	// console.log(el.name + " has " + childrens.length + " childrens.")
	if (childrens.length > 0) {
	var children_array = [];
	_.each(childrens, function(key, val) {
	children_array.push(getElementByParent(data, key));
	});
	el.children = children_array;
	return el;
	}
	else {
	el.size = Math.floor((Math.random()*1000)+1);
	return el;
	}
	}
	else {
	console.log("Errro accessing to property " + base)
	return null;
	}
	}
	else {
	return null;
	}
	}


	var width = 1100,
	height = 800;

	var canvas = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(50, 50)");

	// Add the clipping path
	canvas.append("svg:clipPath").attr("id", "clipper")
	.append("svg:rect")
	.attr('id', 'clip-rect');

	// set the clipping path
	var animGroup = canvas.append("svg:g")
	.attr("clip-path", "url(#clipper)");

	var tree = d3.layout.tree()
	.size([width-100, height-100]);

	var globalData;
	var nodes;
	var links;
	var diagonal = d3.svg.diagonal(); //.projection(function (d) { return [d.y, d.x]; })
	// CreativeWork.json
	d3.json("http://schema.rdfs.org/all.json", function(data) {

	// Initialize selector
	childrens = data.types["Thing"].subtypes;
	_.each(childrens, function(key) {
	if (key == "CreativeWork") $('#selectbox select').append("<option selected>" + key + "</option>");
	else $('#selectbox select').append("<option>" + key + "</option>");
	});

	globalData = data;

	update();

	});

	function clean() {
	// exit and remove
	canvas.selectAll("path").data([]).exit().remove();
	canvas.selectAll("g").data([]).exit().remove();
	}


	function update() {

	// Extract data
	root = getElementByParent(globalData, $('#selectbox select').find(":selected").text());

	nodes = tree.nodes(root);
	links = tree.links(nodes);

	var link = canvas.selectAll("link")
	.data(links)
	.enter()
	.append("path")
	.attr("class", "link")
	.attr("d", diagonal);

	var node = canvas.selectAll(".node")
	.data(nodes)
	.enter()
	.append("g")
	.attr("class", "node")
	.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
	.on("click", click);

	node.append("circle")
	.attr("r", "10");

	// node.append("text")
	// .text(function(d) { return d.name; });

	}


	function click(d, i) {

	// Walk parent chain
	var ancestors = [];
	var n_ancestors = [];
	var parent = d;
	while (!_.isUndefined(parent)) {
	ancestors.push(parent);
	n_ancestors.unshift(parent.name);
	parent = parent.parent;
	}
	var breadcrumb = '';
	_.each(n_ancestors, function(key, val) {
	if (val < n_ancestors.length -1) breadcrumb += key + ' / ';
	else breadcrumb += key;
	});
	$("#infobox").text(breadcrumb);


	var matchedLinks = [];
	canvas.selectAll('path.link')
	.filter(function(d, i)
	{
	return _.any(ancestors, function(p)
	{
	return p === d.target;
	});
	})
	.each(function(d)
	{
	matchedLinks.push(d);
	});

	animateParentChain(matchedLinks);
	}

	function animateParentChain(links) {

	var linkRenderer = d3.svg.diagonal();

	animGroup.selectAll("path.selected")
	.data([])
	.exit().remove();

	animGroup.selectAll("path.selected")
	.data(links)
	.enter().append("svg:path")
	.attr("class", "selected")
	.attr("d", linkRenderer);

	// Animate the clipping path
	var overlayBox = canvas.node().getBBox();

	canvas.select("#clip-rect")
	.attr("x", overlayBox.x + overlayBox.width)
	.attr("y", overlayBox.y)
	.attr("width", 0)
	.attr("height", overlayBox.height)
	.transition().duration(500)
	.attr("x", overlayBox.x)
	.attr("width", overlayBox.width);

	}


	$('#selectbox select').change(function() {
	clean();
	update();
	});

	</script>

	<div id="infobox"><h1></h1><p></p></div>

	</body>