Εβδομάδα 3: Δημιουργία δέντρου δεδομένων

Δημιουργία δέντρου δεδομένων

09/09/2015 - 15/09/2015

---

Το δέντρο δεδομένων είναι μία σειρά από 7 divs, ένα για κάθε βαθμίδα. Ξεκινάει με τα βασίλεια των ζώων και φυτών και ο χρήστης μπορεί να επεκτείνει από εκεί.

<div class="row seven-cols">
    <div class="col-md-1" id="kingdom">

        <div class="thumbnail" id="Animal">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/14/Animal_diversity.png" alt="...">
            <div class="caption">
                Animalia

                <p><a href="#" class="btn btn-primary" role="button">Λεπτομέρειες</a> <a href="#" class="btn btn-primary open" role="button"> Aνοιγμα</a></p>
            </div>
        </div>

        <div class="thumbnail" id="Plantae">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Diversity_of_plants_image_version_5.png/161px-Diversity_of_plants_image_version_5.png" alt="...">
            <div class="caption">
                Plantae

                <p><a href="#" class="btn btn-primary" role="button">Λεπτομέρειες</a><a href="#" class="btn btn-primary open" role="button">Aνοιγμα</a> </p>
            </div>
        </div>

    </div>
    <div class="col-md-1" id="phylum"></div>
    <div class="col-md-1" id="class"></div>
    <div class="col-md-1" id="order"></div>
    <div class="col-md-1" id="family"></div>
    <div class="col-md-1" id="genus"></div>
    <div class="col-md-1" id="species"></div>
</div>

</div>

Η επέκταση γίνεται από το αρχείο tree.js

$(document).on("click", ".open", function() {

    var query = "";
    // var id = this.id;
    var name = $(this).parents('div:eq(1)').attr('id'); //get name of taxon
    var rank = $(this).parents('div:eq(2)').attr('id'); //get rank of taxon
    var next_rank = $("#" + rank).next().attr('id') //get the next rank

    if (rank == "genus")
        query = 'PREFIX db: <http://dbpedia.org/resource/> SELECT ?taxon WHERE { ?taxon  dbp:genus \"' + name + '\"@en .FILTER (?taxon!=dbr:' + name + ')}';
    else
        query = "PREFIX db: <http://dbpedia.org/resource/> SELECT DISTINCT ?taxon WHERE { ?name  dbo:" + rank + " dbr:" + name + ";dbo:" + next_rank + " ?taxon;rdf:type ?type.FILTER (?type=dbo:Animal)  }";


    executeQuery(query, next_rank, name)
});


function executeQuery(query, rank, name) {
    var url = "http://dbpedia.org/sparql";

    var queryUrl = encodeURI(url + "?query=" + query + "&format=json");
    $.ajax({
        dataType: "jsonp",
        url: queryUrl,
        rank: rank,
        success: function(_data) {

            $("#" + rank).nextAll().andSelf().html(""); // clear data of next ranks before adding new data
            var results = _data.results.bindings;

            for (var i in results) {
                var src = results[i].taxon.value;
                var value = src.substring(src.lastIndexOf('/') + 1);
                value = value.replace(/\_/g, ' ');

                var html = '   <div class=\"thumbnail\" id=\"' + value + '\">' +
                    '<img src=\"\" alt=\"...\">' +
                    '<div class=\"caption\">' + value +
                    '<p><a href=\"#\" class=\"btn btn-primary\" role=\"button\">Λεπτομέρειες</a> <a href=\"#\" class=\"btn btn-primary open\" role=\"button\"> Aνοιγμα</a></p>    ' +
                    '</div>   ' +
                    '</div>';

                $("#" + rank).append(html);

            }
        }
    });
}