Mercurial > hg > NetworkVis
diff d3s_examples/python-neo4jrestclient/static/index_sphaera.html @ 8:18ef6948d689
new d3s examples
| author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
|---|---|
| date | Thu, 01 Oct 2015 17:17:27 +0200 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/d3s_examples/python-neo4jrestclient/static/index_sphaera.html Thu Oct 01 17:17:27 2015 +0200 @@ -0,0 +1,313 @@ +<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>