Skip to content

Instantly share code, notes, and snippets.

@hotzeplotz

hotzeplotz/index.html

Forked from tomhaymore/index.html
Last active December 12, 2015 09:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hotzeplotz/4750550 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hotzeplotz/4750550 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Node-Link Tree</title>
<link href="interactive_tree.css" rel="stylesheet" type="text/css" />
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//d3js.org/d3.layout.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 960,
h = 2000,
i = 0,
duration = 500,
root;
var tree = d3.layout.tree()
.size([h, w - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");
d3.json("math_map_compact.json", function(json) {
json.x0 = 800;
json.y0 = 0;
update(root = json);
});
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
console.log(nodes)
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
//.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:circle")
//.attr("class", "node")
//.attr("cx", function(d) { return source.x0; })
//.attr("cy", function(d) { return source.y0; })
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.on("click", click);
nodeEnter.append("svg:text")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y", 3)
//.attr("fill","#ccc")
//.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.text(function(d) { return d.name; });
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("circle")
//.attr("cx", function(d) { return d.x; })
//.attr("cy", function(d) { return d.y; })
.style("fill", "lightsteelblue");
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 1e-6)
.remove();
/*
var nodeTransition = node.transition()
.duration(duration);
nodeTransition.select("circle")
.attr("cx", function(d) { return d.y; })
.attr("cy", function(d) { return d.x; })
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeTransition.select("text")
.attr("dx", function(d) { return d._children ? -8 : 8; })
.attr("dy", 3)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#5babfc"; });
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit();
nodeExit.select("circle").transition()
.duration(duration)
.attr("cx", function(d) { return source.y; })
.attr("cy", function(d) { return source.x; })
.remove();
nodeExit.select("text").transition()
.duration(duration)
.remove();
*/
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
d3.select(self.frameElement).style("height", "2000px");
</script>
</body>
</html>
Raw
interactive_tree.css
circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
font-size:10px;
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
Raw
math_map_compact.json
{
"sid": 0,
"name": "Guida alle piante del PAM",
"children":
[
{
"sid": 10,
"name": "Le piante sono alberi o arbusti",
"children": [
{
"sid": 200,
"name": "Le piante sono alberi",
"children":
[
{
"sid": 210,
"name": "Foglie aghiformi o squamiformi",
"children": [
{
"sid": 220,
"name": "Foglie ad ago",
"children": [
{
"sid": 230,
"name": "Aghi singoli",
"children": [
{
"sid": 240,
"name": "Aghi piatti",
"children": [
{
"sid": 924010,
"name": "Aghi piatti con due strie bianche nella pagina inferiore"
},
{
"sid": 924020,
"name": "Aghi piatti, flessibili di colore verde scuro ed appuntiti"
}
]
},
{
"sid": 923020,
"name": "Aghi a sezione triangolare"
}
]
},
{
"sid": 250,
"name": "Ciuffi di più aghi",
"children": [
{
"sid": 260,
"name": "Ciuffi di 2 aghi",
"children": [
{
"sid": 926010,
"name": "Foglie più lunghe di 7 cm, corteccia grigia"
},
{
"sid": 926020,
"name": "Foglie lunghe al massimo 7 cm, corteccia rossastra"
}
]
},
{
"sid": 270,
"name": "Ciuffi con più di 2 aghi",
"children": [
{
"sid": 927010,
"name": "Ciuffi con 5 aghi"
},
{
"sid": 927020,
"name": "Ciuffi con 6 o più aghi"
}
]
}
]
}
]
},
{
"sid": 280,
"name": "Foglie squamiformi",
"children": [
{
"sid": 928010,
"name": "Rametti angolosi, disposti in tutti i sensi, pigne sferiche"
},
{
"sid": 928020,
"name": "Rametti appiattiti, disposti sullo stesso piano, pigne ovali"
}
]
}
]
},
{
"sid": 290,
"name": "Foglie a superficie estesa",
"children": [
{
"sid": 300,
"name": "Foglie semplici",
"children": [
{
"sid": 310,
"name": "Foglie più o meno coriacee con la pagina superiore spesso lucida",
"children": [
{
"sid": 330,
"name": "Foglie con margine seghettato",
"children": [
{
"sid": 340,
"name": "Foglie con lamina di forma ovale-ellittica, tonda",
"children": [
{
"sid": 934010,
"name": "Foglie con lamina ovale, verde scuro , pelosa nella pagina inferiore"
},
{
"sid": 934020,
"name": "Foglie con lamina ovale, talvolta ondulata e con apice, lunghe da 6-8 a 15 cm; corteccia con lenticelle disposte ad anelli orizzontali, in età avanzata fessurata e divisa in placche quadrangolari parzialmente distaccate dal fusto"
}
]
},
{
"sid": 350,
"name": "Foglie con lamina diversa",
"children": [
{
"sid": 360,
"name": "Foglie con lamina da ovale a lanceolata",
"children": [
{
"sid": 936010,
"name": "Fusto di modeste dimensioni, alto fino a 8m, corteccia bruno cinerina con rami radi divaricati rosso bruni"
}
]
}
]
}
]
},
{
"sid": 320,
"name": "Foglie con margine intero",
"children": [
{
"sid": 932010,
"name": "Foglie con lamina grande obovata od ellittica , glabre lucenti sulla pagina superiore, verde chiaro talvolta argenteo sulla pagina inferiore"
}
]
}
]
},
{
"sid": 370,
"name": "Foglie di consistenza erbacea",
"children": [
{
"sid": 380,
"name": "Foglie con lamina lanceolata (decisamente più lunghe che larghe)",
"children": [
{
"sid": 938010,
"name": "Foglie adulte più lunghe di 4cm, pagina inferiore ricoperta di peli argentei"
},
{
"sid": 938020,
"name": "Foglie con pagina inferiore priva di peli argentei e margine con denti evidenti"
}
]
},
{
"sid": 390,
"name": "Foglie con lamina di forma ovale ellittica, tonda, triangolare-romboidale, con o senza incisioni",
"children": [
{
"sid": 400,
"name": "Foglie di forma ovale-ellittica, intera o con incisioni",
"children": [
{
"sid": 410,
"name": "Foglie incise da lobi",
"children": [
{
"sid": 420,
"name": "Foglie a margine liscio",
"children": [
{
"sid": 942010,
"name": "Foglie con alla base due vistose orecchiette"
},
{
"sid": 942020,
"name": "Foglie con lamina lobata con 5-8 lobi arrotondati per lato e dentati sulla stessa pianta; foglie con alla base due orecchiette asimmetriche"
}
]
},
{
"sid": 430,
"name": "Foglie a margine dentato o seghettato",
"children": [
{
"sid": 943010,
"name": "Foglie piccole (≤10cm) con pagina inferiore bianca"
},
{
"sid": 440,
"name": "Foglie grandi (>10cm)",
"children": [
{
"sid": 944010,
"name": "Foglie a divise in lobi profondi i cui margini hanno pochi denti grandi e acuti"
},
{
"sid": 944020,
"name": "Foglie divise in 5-7 lobi acuminati con margini seghettati, di colore verde brillante, lunghe da 12 a 15 cm e lungamente picciolate"
},
{
"sid": 944030,
"name": "Foglie divisa in lobi poco profondi, senza peluria bianca sulla pagina inferiore"
},
{
"sid": 944040,
"name": "Foglie divise in 5-7 lobi con nervature evidenti e margini grossolanamente dentati, lunghe da 10 a 23 cm"
}
]
}
]
}
]
},
{
"sid": 450,
"name": "Foglie intere prive di incisioni lobate",
"children": [
{
"sid": 460,
"name": "Foglie a margine dentato e con base simmetrica",
"children": [
{
"sid": 946010,
"name": "Foglie con larghezza massima centrale e pieghettate"
},
{
"sid": 946020,
"name": "Foglie con apice acuto ben evidente e protuberanze rosse alla base del picciolo"
}
]
},
{
"sid": 945020,
"name": "Foglie a margine dentato e con base asimmetrica"
}
]
}
]
},
{
"sid": 470,
"name": "Foglie di forma diversa",
"children": [
{
"sid": 480,
"name": "Foglie con lamina a forma tonda (non a cuore) con o senza apice",
"children": [
{
"sid": 948010,
"name": "Foglie con margine dentato con pochi denti irregolari, distanziati tra loro"
},
{
"sid": 490,
"name": "Foglie con margine dentato con denti fini o grossolani, numerosi e continui",
"children": [
{
"sid": 949010,
"name": "Foglie con apice evidente e larghezza massima nella zona centrale"
},
{
"sid": 949020,
"name": "Foglie con apice tronco e larghezza massima nella zona centrale"
}
]
}
]
},
{
"sid": 500,
"name": "Foglie con lamina a forma diversa",
"children": [
{
"sid": 510,
"name": "Foglie con lamina a forma di cuore",
"children": [
{
"sid": 951010,
"name": "Foglie a base asimmetrica"
},
{
"sid": 951020,
"name": "Foglie a base simmetrica, ruvide sopra, sotto pelosette"
}
]
},
{
"sid": 520,
"name": "Foglie con lamina a forma diversa",
"children": [
{
"sid": 530,
"name": "Foglie con lamina a forma triangolare-romboidale",
"children": [
{
"sid": 953010,
"name": "Foglie con margini a denti arrotondati"
},
{
"sid": 953020,
"name": "Foglie con margini a denti fini"
}
]
},
{
"sid": 540,
"name": "Foglie con lamina di forma diversa",
"children": [
{
"sid": 550,
"name": "Larghezza foglie ≥della lunghezza, divise in 3-5 lobi; lunghezza < 10cm",
"children": [
{
"sid": 955010,
"name": "Foglie con lobo apicale fra due incisioni profonde (~1/2 nervo principale)"
},
{
"sid": 955020,
"name": "Foglie con lobo apicale fra due incisioni poco profonde (1/6-1/3 nervo principale)"
}
]
},
{
"sid": 560,
"name": "Larghezza foglie ≥della lunghezza, divise in3-5 lobi; lunghezza 10-16cm",
"children": [
{
"sid": 956010,
"name": "Foglie con pochi denti laterali ai lobi lunghi fino a 1 cm"
},
{
"sid": 956020,
"name": "Foglie con numerosi denti laterali ai lobi brevi"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"sid": 570,
"name": "Foglie composte",
"children": [
{
"sid": 580,
"name": "Foglie formate da foglioline a margine intero",
"children": [
{
"sid": 958010,
"name": "Foglioline ovali-ellittiche in numero superiore a tre"
},
{
"sid": 958020,
"name": "Foglioline piuttosto grandi, con odore caratteristico"
}
]
},
{
"sid": 590,
"name": "Foglie formate da foglioline a margine non intero",
"children": [
{
"sid": 600,
"name": "Foglie imparipennate formate da foglioline con margine dentato",
"children": [
{
"sid": 960010,
"name": "11-13 foglioline lanceolate con punte evidenti, base stretta, pelosette inferiormente"
}
]
},
{
"sid": 959020,
"name": "Foglie palmato-settate con 5-7 foglioline oblanceolato-acuminati, glabre, sopra più scure e sublucide, sotto opache e più chiare con margine seghettato"
}
]
}
]
}
]
}
]
},
{
"sid": 610,
"name": "Le piante sono arbusti",
"children":
[
{
"sid": 620,
"name": "Foglie semplici",
"children": [
{
"sid": 630,
"name": "Foglie a lamina palmata",
"children": [
{
"sid": 963010,
"name": "Pianta a rami lisci di colore grigio, foglie trilobate con margine seghettato"
},
{
"sid": 963020,
"name": "Pianta rampicante con numerosi rami detti tralci, foglie a 3/5 lobi, lamina cuoriforme"
}
]
},
{
"sid": 640,
"name": "Foglie a lamina diversa",
"children": [
{
"sid": 650,
"name": "Foglie a lamina ovato/lanceolata",
"children": [
{
"sid": 660,
"name": "Foglie a lamina ovata",
"children": [
{
"sid": 966010,
"name": "Foglie a margine seghettato di circa 10 cm, con apice appuntito, disposta in modo alterno sul ramo"
},
{
"sid": 966020,
"name": "Foglie a margine liscio profondamente lobato e inciso, con frutto costituito da piccoli pomi rossastri di 1/2 cm"
}
]
},
{
"sid": 670,
"name": "Foglie a lamina lanceolata",
"children": [
{
"sid": 680,
"name": "Foglie a margine liscio",
"children": [
{
"sid": 968010,
"name": "Pianta con fusto con nodi a cilindro cavo, il fusto presenta internodi cavi e nodi cilindrici molto evidenti dai quali si sviluppano foglie sottili e lanceolate."
},
{
"sid": 690,
"name": "Pianta diversa da sopra",
"children": [
{
"sid": 969010,
"name": "Foglie molto piccole molto distanziate sul ramo, lanceolate, i fiori sono portati a grappoli terminali di colore giallo grigio. Pianta a portamento arbustivo alta da 0,5 a 3m, perenne con fusti lunghi verdi e cilindrici."
},
{
"sid": 969020,
"name": "Foglie di circa 6 cm alterne raccolte in gruppi, foglie persistenti brevemente picciolate. Infiorescenze terminali a pannocchia con fiori bianchi profumati, il frutto è una bacca nera tonda e piccola."
}
]
}
]
},
{
"sid": 700,
"name": "Foglie a margine dentato/seghettato",
"children": [
{
"sid": 970010,
"name": "Foglie a margine dentato, lamina di circa 6-10 cm, apice arrotondato con inserzioni anche alterne, fiore ermafrodita composto da 4 petali e 4 stami; frutto a capsule di 6-10 cm con semi rivestiti da un arillo carnoso rossastro."
},
{
"sid": 710,
"name": "Foglie a margine seghettato",
"children": [
{
"sid": 971010,
"name": "Foglie opposte, a seconda delle specie possono essere caduche o persistenti, brevemente picciolate con margini laminari interi o lievemente seghettati. Il fusto può essere tomentoso (aspetto fioccoso come di cotone) e di sezione quadrangolare. L’altezza varia da pochi metri a qualche decina."
},
{
"sid": 971020,
"name": "Foglie alterne, lamina coriacea di 7-12 cm; fiori a corolla urceolata giallastra di 5-10 mm. Riuniti in pannocchie pendole, frutto a bacca (capsula) tonda e rugosa, gialla e rossastra."
}
]
}
]
}
]
}
]
},
{
"sid": 964020,
"name": "Foglie a lamina obovata di 8/12 cm, apice acuminato a base cordata o tronca leggermente pelose. Il frutto è una noce di 2 cm avvolto da brattee pelose con margine frastagliato"
}
]
}
]
},
{
"sid": 720,
"name": "Foglie composte",
"children": [
{
"sid": 730,
"name": "pianta a fusto spinoso",
"children": [
{
"sid": 973010,
"name": "Foglie a margine dentato con 5/7 foglioline. Le foglie sono assai grandi ovali o ovali ellittiche, foglie glabre o pubescenti, a nervature secondarie e senza ghiandole a denti semplici, o doppi. Fiori rosei o biancastri. Stili pelosi, raramente glabri."
},
{
"sid": 973020,
"name": "Foglie con 3/5 foglioline seghettate. Frutti riuniti in infruttescenze, a sorosio rosse o nere."
}
]
},
{
"sid": 740,
"name": "Pianta a fusto non spinoso",
"children": [
{
"sid": 974010,
"name": "Foglie rossastre sopra d' estate e verde lucido scuro sotto. Pianta rampicante, a foglie decidue, piuttosto rustica. Presenta colori vivaci del fogliame e infiorescenze verdastre inodori. Le foglie sono trilobate ed i frutti sono piccole bacche di colore bluastro"
},
{
"sid": 974020,
"name": "Foglie sopra verde scuro e verde chiaro sotto. Frutti costituiti da drupe nere raccolte in infruttescenza terminali a ombrello."
}
]
}
]
}
]
}
]
},
{
"sid": 20,
"name": "Le piante sono erbacee",
"children": [
{
"sid": 30,
"name": "Foglie semplici con lamina intera o incisa",
"children":
[
{
"sid": 40,
"name": "Foglie con lamina intera",
"children": [
{
"sid": 50,
"name": "Foglie pelose",
"children": [
{
"sid": 60,
"name": "Margine fogliare liscio",
"children": [
{
"sid": 906010,
"name": "Lamina fogliare cuoriforme"
}
]
},
{
"sid": 70,
"name": "Margine fogliare dentato",
"children": [
{
"sid": 907010,
"name": "Lamina fogliare ovale oblunga con base cuoriforme"
},
{
"sid": 907020,
"name": "Lamina fogliare lanceolata, apice acuto"
}
]
}
]
},
{
"sid": 80,
"name": "Foglie non pelose",
"children": [
{
"sid": 908010,
"name": "Lamina fogliare apparentemente bucherellata in controluce per la trasparenza delle ghiandole oleose presenti"
},
{
"sid": 90,
"name": "Lamina fogliare priva di ghiandole oleose",
"children": [
{
"sid": 100,
"name": "Lamina fogliare oblunga, lanceolata o ellittica",
"children": [
{
"sid": 110,
"name": "Lamina fogliare oblunga, lanceolata",
"children": [
{
"sid": 911010,
"name": "Margine fogliare liscio"
},
{
"sid": 120,
"name": "Margine fogliare liscio e bianco",
"children": [
{
"sid": 912010,
"name": "Pagina inferiore della foglia con nervature prominenti rosse"
},
{
"sid": 130,
"name": "Pagina inferiore della foglia senza nervature prominenti",
"children": [
{
"sid": 913010,
"name": "Pianta alta da 8 cm a 50 cm"
},
{
"sid": 913020,
"name": "Pianta alta dai 50 cm ai 2 m"
}
]
}
]
}
]
},
{
"sid": 140,
"name": "Lamina fogliare ellittica",
"children": [
{
"sid": 914010,
"name": "Foglie giovani con superficie pieghettata longitudinalmente, glauche di sotto"
}
]
}
]
},
{
"sid": 909020,
"name": "Lamina fogliare lobata divisa in 4-5 lobi"
}
]
}
]
}
]
},
{
"sid": 150,
"name": "Foglie con lamina incisa per almeno metà",
"children": [
{
"sid": 160,
"name": "Foglie con lamina incisa per almeno metà, pennatopartite",
"children": [
{
"sid": 916010,
"name": "Foglie frastagliate di colore verde intenso sulla pagina superiore, e argenteo biancastra su quella inferiore, sessili le apicali, leggermente picciolate le basali, aromatiche e con margine dentato"
},
{
"sid": 916020,
"name": "Foglie profondamente frastagliate con nervatura biancastra, alla base opposte, alternate man mano che si sale con piccioli alati non aromatiche e con margine intero o dentato"
}
]
},
{
"sid": 915010,
"name": "Foglie con lamina frastagliata e con lobi triangolari"
}
]
}
]
},
{
"sid": 170,
"name": "Foglie composte",
"children":
[
{
"sid": 180,
"name": "Foglie trifogliate",
"children": [
{
"sid": 918010,
"name": "Margine fogliare liscio; foglioline ovali a margine intero, recanti sulla loro faccia superiore una banda a V di colore verde chiaro"
},
{
"sid": 918020,
"name": "Margine fogliare dentato"
}
]
},
{
"sid": 190,
"name": "Foglie non trifogliate",
"children": [
{
"sid": 919010,
"name": "Foglie imparipennate con due-cinque paia di foglioline ovali inegualmente dentate a base cuneata, delle quali la terminale è normalmente più grande delle altre e spesso divisa in tre lobi. Le foglie inferiori e quelle basali hanno un picciolo, le superiori sono sessili; il colore è verde cinereo con la superficie inferiore più chiara"
}
]
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment