paco
root
@@ -0,0 +1,25 @@
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
|
||||
table { border-collapse:collapse; border-spacing:0; }
|
||||
fieldset,img { border:0; }
|
||||
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
|
||||
caption,th { text-align:left; }
|
||||
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
|
||||
q:before,q:after { content:''; }
|
||||
abbr,acronym { border:0; }
|
||||
|
||||
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
|
||||
/* optional Container STYLES */
|
||||
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
|
||||
|
||||
.evolution-tree {
|
||||
padding: 2px;
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; }
|
||||
.evolution-tree img { margin-right: 10px; float: none !important; }
|
||||
|
||||
.evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; }
|
||||
.evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; }
|
||||
@@ -0,0 +1,263 @@
|
||||
var tree_structure = {
|
||||
chart: {
|
||||
container: "#OrganiseChart6",
|
||||
levelSeparation: 25,
|
||||
siblingSeparation: 70,
|
||||
subTeeSeparation: 70,
|
||||
nodeAlign: "BOTTOM",
|
||||
scrollbar: "fancy",
|
||||
padding: 35,
|
||||
node: { HTMLclass: "evolution-tree" },
|
||||
connectors: {
|
||||
type: "curve",
|
||||
style: {
|
||||
"stroke-width": 2,
|
||||
"stroke-linecap": "round",
|
||||
"stroke": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
nodeStructure: {
|
||||
text: { name: "LIFE" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "true bacteria" },
|
||||
image: "img/truebacteria.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "archea bacteria" },
|
||||
image: "img/archaebacteria.png"
|
||||
},
|
||||
{
|
||||
text: { name: "EUKARYOTES" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "protocists" },
|
||||
image: "img/protoctis.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "PLANTS" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "flowering seed plants" },
|
||||
image: "img/cvijece2.png"
|
||||
},
|
||||
{
|
||||
text: { name: "non-flowering seed plants" },
|
||||
image: "img/ne_cvijece.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: { name: "ferns and fern allies" },
|
||||
image: "img/ferns.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: { name: "mosses and allies" },
|
||||
image: "img/mosses.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: { name: "green algae" },
|
||||
image: "img/greenalgae.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "fungi and lichens" },
|
||||
image: "img/fungi.png"
|
||||
},
|
||||
{
|
||||
text: { name: "ANIMALS" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "sponges" },
|
||||
image: "img/spuzva.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "cnidarians" },
|
||||
image: "img/cnidarians.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
childrenDropLevel: 1,
|
||||
children: [
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "echinoderms" },
|
||||
image: "img/zvezda.png"
|
||||
},
|
||||
{
|
||||
text: { name: "VERTEBRATES" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "cartilaginous fish" },
|
||||
image: "img/cartilaginousfish.png"
|
||||
},
|
||||
{
|
||||
text: { name: "bony fish" },
|
||||
image: "img/bonyfish.png"
|
||||
},
|
||||
{
|
||||
text: { name: "TETRAPODS" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "amphibians" },
|
||||
image: "img/zaba.png"
|
||||
},
|
||||
{
|
||||
text: { name: "AMNIOTES" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "turtles" },
|
||||
image: "img/kornjaca.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "snakes and lizards" },
|
||||
image: "img/zmijurina.png"
|
||||
},
|
||||
{
|
||||
text: { name: "crocodiles and birds" },
|
||||
image: "img/ptica.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: { name: "mammals" },
|
||||
image: "img/slon.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: { name: "ARTHROPODS" },
|
||||
HTMLclass: "the-parent",
|
||||
children: [
|
||||
{
|
||||
text: { name: "chelicerates" },
|
||||
image: "img/chelirates.png"
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
stackChildren: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "crustaceans" },
|
||||
image: "img/rak.png"
|
||||
},
|
||||
{
|
||||
text: { name: "insects and myriapods" },
|
||||
image: "img/insekti.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "flatworms" },
|
||||
image: "img/flatare.png"
|
||||
},
|
||||
{
|
||||
text: { name: "lophophorates" },
|
||||
image: "img/lophoprates.png"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
childrenDropLevel: 1,
|
||||
stackChildren: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "rotifers" },
|
||||
image: "img/rotfiers.png"
|
||||
},
|
||||
{
|
||||
text: { name: "roundworms" },
|
||||
image: "img/roundworms.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
pseudo: true,
|
||||
childrenDropLevel: 1,
|
||||
stackChildren: true,
|
||||
children: [
|
||||
{
|
||||
text: { name: "mollusks" },
|
||||
image: "img/mosculs.png"
|
||||
},
|
||||
{
|
||||
text: { name: "segmented worms" },
|
||||
image: "img/segmentedworms.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 870 B |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 851 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 637 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 881 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 674 B |
|
After Width: | Height: | Size: 938 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 928 B |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 893 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 647 B |
|
After Width: | Height: | Size: 775 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 846 B |
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title> Evolution tree example </title>
|
||||
<link rel="stylesheet" href="../../Treant.css">
|
||||
<link rel="stylesheet" href="example6.css">
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="chart" id="OrganiseChart6"></div>
|
||||
<script src="../../vendor/raphael.js"></script>
|
||||
<script src="../../Treant.js"></script>
|
||||
|
||||
<script src="../../vendor/jquery.min.js"></script>
|
||||
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
|
||||
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
|
||||
<script src="example6.js"></script>
|
||||
|
||||
<script>
|
||||
new Treant( tree_structure );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||