Mercurial > hg > NetworkVis

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/main.css">
    <title>ISMI commentary relations</title>
</head>

<body style="background:none;">
<div role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <ul class="nav navbar-nav">
                    <li>
                        <form role="search" class="navbar-form" id="search">
                            <div class="form-group">
                                <input type="text" value="jaghmini" placeholder="Search for person name" class="form-control" name="search">
                            </div>
                            <button class="btn btn-default" type="submit">Search for author name</button>
                        </form>
                    </li>
                </ul>
            </div>
            <div class="navbar-header col-sm-6 col-md-6">
                <div class="logo-well">
                    <a href="//neo4j.com/developer-resources">
                    <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
                    </a>
                </div>
                <div class="navbar-brand">
                    <div class="brand">ISMI Commentary relations between Texts</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>Texts by this author</span>
                <span class="clickhide">(click to hide)</span>
                <span class="clickhide" style="display:none;">(click to show)</span>
            </div>
            <table id="results" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Author (translit)</th>
                    <th>Title (translit)</th>
                    <th>Title (arabic)</th>
                    <th>ismi_id</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-7">
        <div class="panel panel-default">
            <div class="panel-heading">
             <span id="title">Text details</span>
             <span class="clickhide">(click to hide)</span>
             <span class="clickhide" style="display:none;">(click to show)</span>
            </div>
            <div class="row">
                <!-- <div class="col-sm-4 col-md-4">
                    <img src="" class="well" id="poster"/>
                </div> -->
                <div class="col-md-8 col-sm-8">
                    <h4>Details</h4>
                    <ul id="info">
                    </ul>
                    <h4>Commenting on</h4>
                    <ul id="commenting">
                    </ul>
                    <h4>Commentaries</h4>
                    <ul id="commentaries">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span>Graph of commentaries</span>
            <span class="clickhide">(click to hide)</span>
            <span class="clickhide" style="display:none;">(click to show)</span>
        </div>
        <div id="graph">
        </div>
    </div>
</div>

<style type="text/css">
    .node { stroke: #222; stroke-width: 1.5px; }
    .node.TEXT { fill: #888; }
    .node.TEXT.marked { stroke: red; }
    .node.TEXT.selected { fill: red; }
    .link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; }
    .arrowHead { fill: #999 }
    tr.marked {border: 2px solid red;}
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // make panels roll-up
    $(".panel-heading").on("click", function() {
       $(this).find(".clickhide").toggle();
       $(this).next().slideToggle();
    });
    // provide search and graph
    backendApiPrefix = "";
    searchApi = {};
    $(function () {
        function showText(text_id) {
            $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
                    function (data) {
                        if (!data) return;
                        $("#title").text("Title: "+data.title);
                        var $list = $("#info").empty();
                        $list.append($("<li> author: " + data.author + "</li>"));
                        for (var key in data.attrs) {
                            var val = data.attrs[key];
                            if (key === "link") {
                                val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
                            }
                            $list.append($("<li>" + key + ": " + val + "</li>"));
                        };
                        // re-set selected
                        $("#graph .selected").each(function(){this.classList.remove("selected")});
                        $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
                        var $commentaries = $("#commentaries").empty();
                        for (var key in data.commentaries) {
                            var val = data.commentaries[key];
                            $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
                            .click(function() { showText($(this).find("span.text_id").text());}));
                        }
                        var $commenting = $("#commenting").empty();
                        for (var key in data.commenting) {
                            var val = data.commenting[key];
                            $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
                            .click(function() { showText($(this).find("span.text_id").text());}));
                        }
                    }, "json");
            return false;
        }
        function search() {
            var query=$("#search").find("input[name=search]").val();
            $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
                    function (data) {
                        var t = $("table#results tbody").empty();
                        if (!data || data.length == 0) return;
                        // clear all marks
                        $("#graph .marked").each(function(){this.classList.remove("marked")});
                        data.forEach(function (row) {
                            var text = row.text;
                            var author = row.author;
                            var comm = row.is_commentary || row.has_commentaries;
                            var $row = $("<tr><td>" + author.label + "</td><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
                                    .click(function() { showText($(this).find("td.text_id").text());});
                            if (comm) {
                                $row.addClass("marked");
                            }
                            // set mark
                            $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
                        });
                        showText(data[0].text.ismi_id);
                    }, "json");
            return false;
        }
        // export API
        searchApi.showText = showText;
        searchApi.search = search;
        // start search
        $("#search").submit(search);
        search();
    });
</script>

<script type="text/javascript">
    var width = 1400, height = 1400;

    var force = d3.layout.force()
            .charge(-100) // -200
            .linkDistance(20) // 30
            .size([width, height]);

    var svg = d3.select("#graph").append("svg")
            .attr("width", "1400px").attr("height", "1400px")
            .attr("pointer-events", "all");

    // arrow head marker
    var defs = svg.append("defs").append("marker")
                .attr({
                    "id":"arrow",
                    "markerUnits": "strokeWidth",
                    "viewBox":"0 -5 10 10",
                    "refX": 20, // 5
                    "refY":0,
                    "markerWidth":4,
                    "markerHeight":4,
                    "orient":"auto"
                })
                .append("path")
                    .attr("d", "M0,-5 L10,0 L0,5")
                    .attr("class","arrowHead");

    // load graph
    d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
		if (error) return;

        force.nodes(graph.nodes).links(graph.links).start();

        var link = svg.selectAll(".link")
                .data(graph.links).enter()
                .append("line").attr({
                    "class": "link",
                    "marker-end": "url(#arrow)"
                    });

        var node = svg.selectAll(".node")
                .data(graph.nodes).enter()
                .append("circle")
                .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})
                .attr("r", 8) // 10
                .attr("data-ismi_id", function(d) {return d.ismi_id})
                .on("click", function() {
                    console.log("click on ", this);
                    var id = this.getAttribute("data-ismi_id");
                    searchApi.showText(id);
                    })
                .call(force.drag);

        console.log("searchApi:", searchApi);
        // html title attribute
        node.append("title")
                .text(function (d) { return d.title; })

        // force feed algo ticks
        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
        });
    });

</script>
</body>
</html>
author	casties
date	Fri, 11 Dec 2015 13:03:04 -0500
parents	2564732249b3
children	a6b2a09ea413