Mercurial > hg > NetworkVis

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
    <title>Neo4j Editions</title>
</head>

<body>

<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="Matrix" placeholder="Search for Movie Title" class="form-control" name="search">
                            </div>
                            <button class="btn btn-default" type="submit">Search</button>
                        </form>
                    </li>
                </ul>
            </div>
            <div class="navbar-header col-sm-6 col-md-6">
                <div class="logo-well">
                    <a href="http://neo4j.com/developer-resources">
                    <img src="http://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">Neo4j Movies</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">Search Results</div>
            <table id="results" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Nid</th>
                    <th>Title</th>
                    <th>Year</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-7">
        <div class="panel panel-default">
            <div class="panel-heading" id="title">Details</div>
            <div class="row">
                 <div class="col-md-8 col-sm-8">
            <!--        <h4>Name</h4>
                    <ul id="crew">
                    </ul>-->
                    <h4>Name</h4><div id="name">Name</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" id="graph" style="height:500px; width:1000px">
</div>

<div style="visibility:hidden;" id="dataloaderContainerDiv" ></div>
<div id="plotContainerDiv"> </div>
 <div id="tableContainerDiv" style="position:relative;"></div>
 <div id="mapContainerDiv" style="position:relative;"></div>


<style type="text/css">
    .node { stroke: #222; stroke-width: 1.5px; }
    .node.actor { fill: #888; }
    .node.movie { fill: #BBB; }
    .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        function showMovie(title) {
            $.get("/edition/" + encodeURIComponent(title),
                    function (data) {
                        if (!data) return;
                        $("#title").text(data.title);
                        $("#name").text(data.name);
                       // var $list = $("#crew").empty();
                       // data.cast.forEach(function (cast) {
                       //     $list.append($("<li>" + cast.name + " " +cast.job + (cast.job == "acted"?" as " + cast.role : "") + "</li>"));
                       // });
                    }, "json");
            return false;
        }
        function search() {
            var query=$("#search").find("input[name=search]").val();
            $.get("/search?q=" + encodeURIComponent(query),
                    function (data) {
                        var t = $("table#results tbody").empty();
                        if (!data || data.length == 0) return;
                        data.forEach(function (row) {
                            var movie = row.edition;
                            $("<tr><td class='movie'>" + movie.Nid + "</td><td>" + movie.name + "</td><td>" + movie["Year of Publication"] + "</td></tr>").appendTo(t)
                                    .click(function() { showMovie($(this).find("td.movie").text());})
                        });
                        showMovie(data[0].edition.Nid);
                    }, "json");
            return false;
        }

        $("#search").submit(search);
        search();
    })
</script>
<link href="platin/css/platin.css" rel="stylesheet" type="text/css">
<script src="platin/js/Util/Publisher.js"></script>
<script src="platin/js/Build/Loader/DynaJsLoader.js"></script>
<script src="platin/js/Build/Loader/Loader.js"></script>
<script>
Publisher.Subscribe( 'GeoTemCoReady', this, function(){
	var datasets = [];
	var timeDiv = document.getElementById("plotContainerDiv");
	var time = new WidgetWrapper();
	var timeWidget = new FuzzyTimelineWidget(time,timeDiv,{
		timeTitle: "Publication Date"
	});

   var dataloaderDiv = document.getElementById("dataloaderContainerDiv");
   var dataloader = new WidgetWrapper();
   var dataloaderWidget = new DataloaderWidget(dataloader,dataloaderDiv);

	var tableDiv = document.getElementById("tableContainerDiv");
	var table = new WidgetWrapper();
	var tableWidget = new TableWidget(table,tableDiv);

	var mapDiv = document.getElementById("mapContainerDiv");
	var map = new WidgetWrapper();
	var mapWidget = new MapWidget(map,mapDiv,{
		mapTitle: "Publication Place"
	});
	dataloaderWidget.loadFromURL();
//});
//
///script>
//script type="text/javascript">
    var width = 800, height = 800;

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

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

    d3.json("/graph", function(error, graph) {
		if (error) return;


		//DW ADDITIONS for Platin

        var convSet= []

		var resultObjects = graph.nodes;
        for (var i=0;i<resultObjects.length;i++){

        	obj = resultObjects[i];
        	var nob = {};
        	//nob["TimeSpan:end"]=2020 //default
        	for( var x in obj){


        		if (x=="TimeSpan_begin"){
        			nob["TimeSpan:begin"]=obj[x];

        		} else if (x=="TimeSpan_end"){
        		    nob["TimeSpan:end"]=obj[x];
        		} else if (x=="name"){ //name auf name2 kopieren damit es in der tabelle angezeigt wird
        		    nob["name2"]=obj[x];
        		    nob["place"]=obj[x];
        		} else if (x=="time"){ //time auf time2 kopieren damie es in der tabelle angezeigt wird.
        		    nob["time2"]=obj[x];

        		}
        		nob[x]= obj[x];
        	}


        	convSet.push(nob);

        }

        GeoTemConfig.removeAllDatasets();
        var dataSet = new Dataset(GeoTemConfig.loadJson(convSet),"GRAPH");
        GeoTemConfig.addDataset(dataSet);


        //DW ADDITIONS END


        var link = svg.selectAll(".link")
                .data(graph.links).enter()
                .append("line")
        		.attr("class", "link");

        var linklabel = svg.selectAll(".linklabel")
        .data(graph.links).enter()
        .append("text")
        .text("MYTEXT");
       // 	.attr("dx", function(d) { return d.source.x; })
      //		.attr("dy", function(d) { return d.source.y; })
      //		.text("MYTEXT");

        var gnodes = svg.selectAll('g.gnode')
	        .data(graph.nodes)
	        .enter()
	        .append('g')
	        .classed('gnode', true);

        var node = gnodes.append("circle")
               	.attr("class", function (d) { return "node "+d.label })
                .attr("r", 10)
                .call(force.drag);

        var label =gnodes.append("text")
         .text(function(d) { return d.title; })

        // 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; });


            linklabel.attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
            .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })

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

            gnodes.attr("transform", function(d) {
                return 'translate(' + [d.x, d.y] + ')';
            });


        });


    ;

        var linkText = svg.selectAll(".link")
        .data(graph.links)
        .append("text")
        .attr("font-family", "Arial, Helvetica, sans-serif")
        .attr("x",0)
        .attr("y",0)
       // .attr("x", function(d) {
       //     if (d.target.x > d.source.x) {
       //         return (d.source.x + (d.target.x - d.source.x)/2); }
       //    else {
       //         return (d.target.x + (d.source.x - d.target.x)/2); }
      //  })
      //  .attr("y", function(d) {
      //      if (d.target.y > d.source.y) {
      //          return (d.source.y + (d.target.y - d.source.y)/2); }
      //      else {
      //          return (d.target.y + (d.source.y - d.target.y)/2); }
      //  })
        .attr("fill", "Black")
        .style("font", "normal 12px Arial")
        .attr("dy", ".035em")
        .text(function(d) {
        	return "HUHU3"; });


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


    });
});
</script>


</body>
</html>
author	casties
date	Thu, 04 Feb 2016 17:41:49 +0100
parents	18ef6948d689
children