Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/index_movie.html @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
1 <html>
2 <head>
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <link rel="stylesheet" href="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css">
5 <title>Neo4j Movies</title>
6 </head>
7
8 <body>
9 <div id="graph">
10 </div>
11 <div role="navigation" class="navbar navbar-default navbar-static-top">
12 <div class="container">
13 <div class="row">
14 <div class="col-sm-6 col-md-6">
15 <ul class="nav navbar-nav">
16 <li>
17 <form role="search" class="navbar-form" id="search">
18 <div class="form-group">
19 <input type="text" value="Matrix" placeholder="Search for Movie Title" class="form-control" name="search">
20 </div>
21 <button class="btn btn-default" type="submit">Search</button>
22 </form>
23 </li>
24 </ul>
25 </div>
26 <div class="navbar-header col-sm-6 col-md-6">
27 <div class="logo-well">
28 <a href="http://neo4j.com/developer-resources">
29 <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">
30 </a>
31 </div>
32 <div class="navbar-brand">
33 <div class="brand">Neo4j Movies</div>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39
40 <div class="row">
41 <div class="col-md-5">
42 <div class="panel panel-default">
43 <div class="panel-heading">Search Results</div>
44 <table id="results" class="table table-striped table-hover">
45 <thead>
46 <tr>
47 <th>Movie</th>
48 <th>Released</th>
49 <th>Tagline</th>
50 </tr>
51 </thead>
52 <tbody>
53 </tbody>
54 </table>
55 </div>
56 </div>
57 <div class="col-md-7">
58 <div class="panel panel-default">
59 <div class="panel-heading" id="title">Details</div>
60 <div class="row">
61 <div class="col-sm-4 col-md-4">
62 <img src="" class="well" id="poster"/>
63 </div>
64 <div class="col-md-8 col-sm-8">
65 <h4>Crew</h4>
66 <ul id="crew">
67 </ul>
68 </div>
69 </div>
70 </div>
71 </div>
72 </div>
73 <style type="text/css">
74 .node { stroke: #222; stroke-width: 1.5px; }
75 .node.actor { fill: #888; }
76 .node.movie { fill: #BBB; }
77 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
78 </style>
79
80 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
81 <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
82 <script type="text/javascript">
83 $(function () {
84 function showMovie(title) {
85 $.get("/movie/" + encodeURIComponent(title),
86 function (data) {
87 if (!data) return;
88 $("#title").text(data.title);
89 $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg");
90 var $list = $("#crew").empty();
91 data.cast.forEach(function (cast) {
92 $list.append($("<li>" + cast.name + " " +cast.job + (cast.job == "acted"?" as " + cast.role : "") + "</li>"));
93 });
94 }, "json");
95 return false;
96 }
97 function search() {
98 var query=$("#search").find("input[name=search]").val();
99 $.get("/search?q=" + encodeURIComponent(query),
100 function (data) {
101 var t = $("table#results tbody").empty();
102 if (!data || data.length == 0) return;
103 data.forEach(function (row) {
104 var movie = row.movie;
105 $("<tr><td class='movie'>" + movie.title + "</td><td>" + movie.released + "</td><td>" + movie.tagline + "</td></tr>").appendTo(t)
106 .click(function() { showMovie($(this).find("td.movie").text());})
107 });
108 showMovie(data[0].movie.title);
109 }, "json");
110 return false;
111 }
112
113 $("#search").submit(search);
114 search();
115 })
116 </script>
117
118 <script type="text/javascript">
119 var width = 800, height = 800;
120
121 var force = d3.layout.force()
122 .charge(-200).linkDistance(30).size([width, height]);
123
124 var svg = d3.select("#graph").append("svg")
125 .attr("width", "100%").attr("height", "100%")
126 .attr("pointer-events", "all");
127
128 d3.json("/graph", function(error, graph) {
129 if (error) return;
130
131 var link = svg.selectAll(".link")
132 .data(graph.links).enter()
133 .append("line")
134 .attr("class", "link");
135
136 var linklabel = svg.selectAll(".linklabel")
137 .data(graph.links).enter()
138 .append("text")
139 .text("MYTEXT");
140 // .attr("dx", function(d) { return d.source.x; })
141 // .attr("dy", function(d) { return d.source.y; })
142 // .text("MYTEXT");
143
144 var gnodes = svg.selectAll('g.gnode')
145 .data(graph.nodes)
146 .enter()
147 .append('g')
148 .classed('gnode', true);
149
150 var node = gnodes.append("circle")
151 .attr("class", function (d) { return "node "+d.label })
152 .attr("r", 10)
153 .call(force.drag);
154
155 var label =gnodes.append("text")
156 .text(function(d) { return d.title; })
157
158 // html title attribute
159 node.append("title")
160 .text(function (d) { return d.title; });
161
162
163
164 // force feed algo ticks
165 force.on("tick", function() {
166 link.attr("x1", function(d) { return d.source.x; })
167 .attr("y1", function(d) { return d.source.y; })
168 .attr("x2", function(d) { return d.target.x; })
169 .attr("y2", function(d) { return d.target.y; });
170
171
172 linklabel.attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
173 .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })
174
175 //gnode.attr("cx", function(d) { return d.x; })
176 // .attr("cy", function(d) { return d.y; });
177
178 gnodes.attr("transform", function(d) {
179 return 'translate(' + [d.x, d.y] + ')';
180 });
181
182
183
184
185 });
186
187
188 ;
189
190 var linkText = svg.selectAll(".link")
191 .data(graph.links)
192 .append("text")
193 .attr("font-family", "Arial, Helvetica, sans-serif")
194 .attr("x",0)
195 .attr("y",0)
196 // .attr("x", function(d) {
197 // if (d.target.x > d.source.x) {
198 // return (d.source.x + (d.target.x - d.source.x)/2); }
199 // else {
200 // return (d.target.x + (d.source.x - d.target.x)/2); }
201 // })
202 // .attr("y", function(d) {
203 // if (d.target.y > d.source.y) {
204 // return (d.source.y + (d.target.y - d.source.y)/2); }
205 // else {
206 // return (d.target.y + (d.source.y - d.target.y)/2); }
207 // })
208 .attr("fill", "Black")
209 .style("font", "normal 12px Arial")
210 .attr("dy", ".035em")
211 .text(function(d) {
212 return "HUHU3"; });
213
214
215 force.nodes(graph.nodes).links(graph.links).start();
216
217
218 });
219 </script>
220 </body>
221 </html>