John wilkins beasts

forked from andrewdblevins's block: John wilkins

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="wilkins_symbol.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text { font: 12px sans-serif; }

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
    .animatedsymb {
  stroke:black;
  stroke-linecap:round;
  stroke-width: 6px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 10s linear forwards;
}
    
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
  </style>
</head>

<body>
  <h3><b> THE ANALYTICAL LANGUAGE OF JOHN WILKINS </b></h3> 
<p>
</body>
  <script>

var data = {
	"name": "Beast",
	"taxtype": "Genus",
	"symbolname": "beast",
	"_children": null,
	"children": [{
		"name": "Whole Hoof",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Horse",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-1-1"
		}, {
			"name": " Donkey",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-1-2"
		}, {
			"name": " Camel",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-1-3"
		}, {
			"name": " Elephant",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-1-4"
		}],
		"symbolname": "beast-1"
	}, {
		"name": " Cloven Hoof",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Cow",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-1"
		}, {
			"name": " Sheep",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-2"
		}, {
			"name": " Elk",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-3"
		}, {
			"name": " Deer",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-4"
		}, {
			"name": " Roebuck",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-5"
		}, {
			"name": " Rhinoceros",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-6"
		}, {
			"name": " Giraffe",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-7"
		}, {
			"name": " Pig",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-2-8"
		}],
		"symbolname": "beast-2"
	}, {
		"name": " Not Rapacious",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Ape",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-1"
		}, {
			"name": " Monkey",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-2"
		}, {
			"name": " Hare",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-3"
		}, {
			"name": " Rabbit",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-4"
		}, {
			"name": " Porcupine",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-5"
		}, {
			"name": " Squirrel",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-6"
		}, {
			"name": " Rat",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-7"
		}, {
			"name": " Mole",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-3-8"
		}],
		"symbolname": "beast-3"
	}, {
		"name": " Feline",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Lion",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-1"
		}, {
			"name": " Tiger",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-2"
		}, {
			"name": " Lynx",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-3"
		}, {
			"name": " Cat",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-4"
		}, {
			"name": " Ferret",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-5"
		}, {
			"name": " Martin",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-6"
		}, {
			"name": " Stoat",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-7"
		}, {
			"name": " Beaver",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-4-8"
		}],
		"symbolname": "beast-4"
	}, {
		"name": " Canine",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Dog",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-1"
		}, {
			"name": " Fox",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-2"
		}, {
			"name": "Seal",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-3"
		}, {
			"name": "Jackal",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-4"
		}, {
			"name": "Anteater",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-5"
		}, {
			"name": "Caraguya",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-5-6"
		}],
		"symbolname": "beast-5"
	}, {
		"name": " Oviparous",
		"taxtype": "Difference",
		"_children": null,
		"children": [{
			"name": "Tortoise",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-1"
		}, {
			"name": "Frog",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-2"
		}, {
			"name": "Crocodile",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-3"
		}, {
			"name": "Lizard",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-4"
		}, {
			"name": "Salamander",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-5"
		}, {
			"name": "Serpent",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-6"
		}, {
			"name": "Snake",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-7"
		}, {
			"name": "Slow worm",
			"taxtype": "Species",
			"_children": null,
			"symbolname": "beast-6-8"
		}],
		"symbolname": "beast-6"
	}]
};

// set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
  width = 660 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
  .size([2 * Math.PI, 500])
   .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

//  assigns the data to a hierarchy using parent-child relationships
  var nodes = d3.hierarchy(data, function(d) {
    return d.children;
    });

// maps the node data to the tree layout
  nodes = treemap(nodes);

// append the svg object to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom),
    g = svg.append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// adds the links between the nodes
  var link = g.selectAll(".link")
    .data( nodes.descendants().slice(1))
    .enter().append("path")
    .attr("class", "link")
    .attr("d", function(d) {
       return "M" + d.y + "," + d.x
       + "C" + (d.y + d.parent.y) / 2 + "," + d.x
       + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
       + " " + d.parent.y + "," + d.parent.x;
       });

// adds each node as a group
  var node = g.selectAll(".node")
    .data(nodes.descendants())
    .enter().append("g")
    .attr("class", function(d) { 
      return "node" + 
      (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) { 
      return "translate(" + d.y + "," + d.x + ")"; });

// adds the circle to the node
  node.append("circle")
    .attr("r", 10);

// adds the text to the node
  node.append("text")
    .attr("dy", ".35em")
    .attr("x", function(d) { return d.children ? -13 : 13; })
    .style("text-anchor", function(d) { 
    return d.children ? "end" : "start"; })
    .text(function(d) { return d.data.name; });

</script>

https://d3js.org/d3.v4.min.js