Skip to content

Instantly share code, notes, and snippets.

@andrewdblevins

andrewdblevins/.block

Last active July 20, 2017 01:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewdblevins/7fe0fbfa967263353fed5ecaaa1f1d6b to your computer and use it in GitHub Desktop.
Save andrewdblevins/7fe0fbfa967263353fed5ecaaa1f1d6b to your computer and use it in GitHub Desktop.
Download ZIP
John wilkins beasts
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment