John wilkins beasts

forked from andrewdblevins's block: John wilkins

forked from andrewdblevins's block: John wilkins beasts

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-shape.v1.min.js"></script>
    <script src="wilkinssymbol.js"></script>
      <script src="wilkinspronounce.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }

.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: #111;
  stroke-width: 1px;
  opacity:.2;
}
    .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 = 960 - margin.left - margin.right,
  height = 960 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
var treemap = d3.tree()
      .size([2 * Math.PI, height/2- margin.bottom])
    	.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(" + (width / 2 + 80) + "," + (height / 2 + 20)+")");

// adds the links between the nodes
    
  var links = g.selectAll(".link")
    .data(nodes.links())
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.linkRadial()
    .angle(function(d) { return d.x; })
    .radius(function(d) { return d.y; }));

// 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(" +radialPoint(d.x, d.y)+")"; });

// adds the text to the node
  node.append("text")
    .attr("y", function(d) { return d.children ? 30 : 20; })
  	.attr("dy",'.35em')
    .style("text-anchor", function(d) { 
    return d.children ? "middle" : "middle"; })
    .text(function(d) { return d.data.name; });
    
    node.append("text")
    .attr("y", function(d) { return d.children ? 45 : 30; })
  	.attr("dy",'.35em')
    .style("text-anchor", function(d) { 
    return d.children ? "middle" : "middle"; })
    .style("font-style", "italic")
    .text(function(d) { return pronounce(d.data.symbolname); });
    
    node.append("path")
    .attr("d", d=>WilkinsSymbol(d.data.symbolname,400))
    .attr("x", function(d) { return d.children ? -13 : 13; })
    .attr("class","animatedsymb");

function radialPoint(x, y) {
  return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
}
    
  </script>

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

https://d3js.org/d3-shape.v1.min.js