globi-data
Version:
Find out who eats who in the world: what do rats (Rattus rattus) eat?, or what do hardhead catfish (Ariopsis felis) eat?. Data provided via Global Biotic Interactions (GloBI, https://globalbioticinteractions.org) .
59 lines (54 loc) • 2.94 kB
HTML
<html>
<head>
<meta charset="utf-8">
<script src="../globi-data-dist.js" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var closeMatchesCallback = function (closeMatches) {
if (closeMatches.length > 0) {
var firstMatch = closeMatches[0];
var englishName = '';
firstMatch.commonNames.forEach(function (element) {
console.log(element.name);
if (element.lang.contains('en')) {
englishName = element.name;
}
});
var infoCallback = function (taxonInfo) {
var name = englishName + ' (<i>' + firstMatch.scientificName + '</i>)';
var sourceDiv = document.getElementById('sourceTaxon');
sourceDiv.innerHTML = '<table class="image"><caption align="bottom">' + name + '</caption>'
+ '<tr><td><img src="' + taxonInfo.thumbnailURL + '"/></td></tr></table>';
};
globiData.findTaxonInfo(firstMatch.scientificName, infoCallback);
var interactionType = 'preysOn';
var interElem = document.getElementById('interaction');
interElem.innerHTML = interactionType
var interactionsCallback = function (interactions) {
interactions.forEach(function (element) {
var preyInfoCallback = function (taxonInfo) {
var targetDiv = document.getElementById('targetTaxa');
var preyDiv = document.createElement('div');
var preyName = taxonInfo.commonName + ' (<i>' + taxonInfo.scientificName + '</i>)';
preyDiv.innerHTML = '<table class="image"><caption align="bottom">' + preyName + '</caption>'
+ '<tr><td><a href="' + taxonInfo.infoURL + '"><img src="' + taxonInfo.thumbnailURL + '"/></a></td></tr></table>';
targetDiv.appendChild(preyDiv);
};
globiData.findTaxonInfo(element.target.name, preyInfoCallback);
});
};
var search = {sourceTaxonScientificName: firstMatch.scientificName, interactionType: interactionType};
globiData.findSpeciesInteractions(search, interactionsCallback);
}
};
globiData.findCloseTaxonMatches('sea otter', closeMatchesCallback);
};
</script>
</head>
<body>
<div id='sourceTaxon'></div>
<div id='interaction'></div>
<div id='targetTaxa'></div>
</body>