Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
270 lines (219 sloc) 6.75 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taxon Tree</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="resources/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="resources/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="resources/dagre-d3.js"></script>
<script type="text/javascript" src="resources/underscore-min.js"></script>
<script type="text/javascript" src="js/multimap.js"></script>
<script type="text/javascript" src="js/bimap.js"></script>
<script type="text/javascript" src="js/backed_bi_graph.js"></script>
<link rel="stylesheet" type="text/css" href="resources/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/taxtree.css">
</head>
<body>
<div id="attach">
<svg id="svg-canvas" class="main-svg">
<g transform="translate(20, 20)"/>
</svg>
</div>
<div class="detail-bar">
<table class="table">
<tbody>
<tr>
<td>Name</td>
<td id="tx_name"></td>
</tr>
<tr>
<td>Rank</td>
<td id="tx_rank"></td>
</tr>
<tr>
<td>Common Name</td>
<td id="tx_common_name"></td>
</tr>
<tr>
<td>Source Database</td>
<td id="tx_source_database"></td>
</tr>
<tr>
<td>Database Authors</td>
<td id="tx_database_authors"></td>
</tr>
</tbody>
</table>
<footer>
Website by <a href="http://www.bpodgursky.com">Ben Podgursky</a>
Source code on <a href="https://github.com/bpodgursky/taxontree">GitHub</a><br><br>
Data from the <i> Species 2000 & ITIS Catalogue of Life: 2015 Annual Checklist</i>
(<a href="http://www.catalogueoflife.org/">Catalogue of Life</a>)
</footer>
</div>
</body>
<script>
var graph = new BackedBiGraph(
function (id, callback) {
$.ajax({
type: 'GET',
dataType: 'html',
url: "expand_taxon",
data: {
taxon_id: id
},
success: function (response) {
var data = JSON.parse(response);
callback(data.parents, data.children);
}
});
},
function (id, callback) {
$.ajax({
type: 'GET',
dataType: 'html',
url: "find_taxon",
data: {
taxon_id: id
},
success: function (response) {
callback(JSON.parse(response));
}
})
},
function (id, callback) {
$.ajax({
type: 'GET',
dataType: 'html',
url: "detail_taxon",
data: {
taxon_id: id
},
success: function (response) {
callback(JSON.parse(response));
}
})
},
function (record) {
return record.taxonRecord.id.value;
},
renderGraph
);
var g = new dagreD3.graphlib.Graph()
.setGraph({rankdir: 'LR'})
.setDefaultEdgeLabel(function () {
return {};
});
var render = new dagreD3.render();
var svg = d3.select("#svg-canvas");
var svgGroup = d3.select("svg g");
// enable zoom and scrolling
svgGroup.attr("transform", "translate(5, 5)");
svg.call(d3.behavior.zoom().on("zoom", function redraw() {
svgGroup.attr("transform",
"translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}));
function getImg(expanded) {
if (expanded) {
return 'images/collapse-icon.png'
} else {
return 'images/expand-icon.png';
}
}
function getImgClass(expanded) {
if (expanded) {
return 'expanded-img'
} else {
return 'collapsed-img';
}
}
function buildLabel(node, expanded) {
return $("<div class='node-label'></div>")
.append($("<div class='sci-name-element'></div>")
.append(node.scientificNameElementRecord.name_element))
.append($("<div class='expand-toggle'></div>")
.append($("<img src=''>")
.attr('src', getImg(expanded))
.addClass(getImgClass(expanded)))).html();
}
function pad(text){
if(!text){
return "";
}
return text;
}
function renderGraph(diff) {
d3.selectAll(".node").remove();
d3.selectAll(".edgePath").remove();
Object.keys(diff.newNodes).forEach(function (id) {
var node = diff.newNodes[id];
g.setNode(id, {
labelType: "html",
label: buildLabel(node, false),
rx: 5,
ry: 5
});
});
Object.keys(diff.expandedNodes).forEach(function (id) {
var node = g.node(id);
node.label = buildLabel(diff.expandedNodes[id], true);
});
Object.keys(diff.collapsedNodes).forEach(function (id) {
g.node(id).label = buildLabel(diff.collapsedNodes[id], false);
});
if (diff.selected) {
g.node(diff.selected.id).class = 'selected-node';
var detail = diff.selected.detail;
$("#tx_name").text(pad(detail.scientificNameElementRecord.name_element));
$("#tx_rank").text(pad(detail.taxonomicRank.rank));
$("#tx_common_name").text(pad(detail.commonNameElementRecord.name));
$("#tx_source_database").text(pad(detail.sourceDatabase.abbreviated_name));
$("#tx_database_authors").text(pad(detail.sourceDatabase.authors_and_editors));
}
if (diff.unselected) {
var node = g.node(diff.unselected);
node.class = _.without(node.class.split(' '), 'selected-node');
}
Object.keys(diff.removedNodes).forEach(function (id) {
g.removeNode(id);
});
diff.newEdges.forEach(function (e) {
g.setEdge(e.source, e.target, {
lineInterpolate: "basis"
});
});
diff.removedEdges.forEach(function (e) {
g.removeEdge(e.source, e.target);
});
render(svgGroup, g);
$(".sci-name-element").click(function (e) {
e.preventDefault();
});
$(".expand-toggle").click(function (e) {
e.preventDefault();
graph.toggleExpand(e.currentTarget.parentNode.__data__);
});
$(".node").click(function (e) {
e.preventDefault();
graph.select(e.currentTarget.__data__);
});
}
graph.insert(22032961);
graph.insert(22032971);
graph.insert(22033030);
graph.insert(22033098);
graph.insert(22033121);
graph.insert(22033306);
graph.insert(22035319);
graph.insert(22036962);
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42483033-5', 'auto');
ga('send', 'pageview');
</script>
</html>