From 6c9ad0da4c36889173790b673dea0784554929cb Mon Sep 17 00:00:00 2001
From: Michael Hunger <github@jexp.de>
Date: Fri, 12 Jun 2020 10:51:50 +0200
Subject: [PATCH] Changed database server to demo.neo4jlabs.com

---
 color.html       |  8 ++++----
 incremental.html |  8 ++++----
 index.html       |  8 ++++----
 particles.html   | 10 +++++-----
 readme.adoc      |  7 ++++---
 weights.html     |  8 ++++----
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/color.html b/color.html
index 0b4384d..30d39d0 100644
--- a/color.html
+++ b/color.html
@@ -2,7 +2,7 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph"></script>
-  <script src="//cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"></script>
+  <script src="https://unpkg.com/neo4j-driver"></script>
   <!--<script src="../../dist/3d-force-graph.js"></script>-->
 </head>
 
@@ -11,11 +11,11 @@
 
   <script>
     const elem = document.getElementById('3d-graph');
-    const driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
-	const session = driver.session();
+    const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
+	const session = driver.session({database:"gameofthrones"});
 	const start = new Date()
     session
-      .run('MATCH (n)-->(m) RETURN { id: id(n), label:head(labels(n)), caption:n.name } as source, { id: id(m), label:head(labels(m)), caption:m.name } as target LIMIT $limit', {limit: 5000})
+      .run('MATCH (n)-->(m) RETURN { id: id(n), label:head(labels(n)), caption:n.name } as source, { id: id(m), label:head(labels(m)), caption:m.name } as target LIMIT $limit', {limit: neo4j.int(5000)})
       .then(function (result) {
         const nodes = {}
         const links = result.records.map(r => { 
diff --git a/incremental.html b/incremental.html
index 6554140..99acf2d 100644
--- a/incremental.html
+++ b/incremental.html
@@ -2,7 +2,7 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph"></script>
-  <script src="//cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"></script>
+  <script src="https://unpkg.com/neo4j-driver"></script>
   <!--<script src="../../dist/3d-force-graph.js"></script>-->
 </head>
 
@@ -10,13 +10,13 @@
   <div id="3d-graph"></div>
 
   <script>
-    const driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
+    const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
     const Graph = ForceGraph3D()(document.getElementById('3d-graph')).graphData({ nodes: [], links: []});
 
-	const session = driver.session();
+	const session = driver.session({database:"gameofthrones"});
 	const start = new Date()
     session
-      .run('MATCH (n) WITH n MATCH (n)-->(m) RETURN  id as source, id(m) as target LIMIT $limit', {limit: 5000})
+      .run('MATCH (n) WITH n MATCH (n)-->(m) RETURN id(n) as source, id(m) as target LIMIT $limit', {limit: neo4j.int(5000)})
       .then(function (result) {
          result.records.forEach(r => { 
 	       const { nodes, links } = Graph.graphData();
diff --git a/index.html b/index.html
index 99603a7..c6dfe36 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph"></script>
-  <script src="//cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.4.1/lib/browser/neo4j-web.min.js"></script>
+  <script src="https://unpkg.com/neo4j-driver"></script>
   <!--<script src="../../dist/3d-force-graph.js"></script>-->
 </head>
 
@@ -10,11 +10,11 @@
   <div id="3d-graph"></div>
 
   <script>
-    const driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
-	const session = driver.session();
+    const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
+	const session = driver.session({database:"gameofthrones"});
 	const start = new Date()
     session
-      .run('MATCH (n)-->(m) RETURN id(n) as source, id(m) as target LIMIT $limit', {limit: 5000})
+      .run('MATCH (n)-->(m) RETURN id(n) as source, id(m) as target LIMIT $limit', {limit: neo4j.int(5000)})
       .then(function (result) {
         const links = result.records.map(r => { return {source:r.get('source').toNumber(), target:r.get('target').toNumber()}});        
         session.close();
diff --git a/particles.html b/particles.html
index 18526d0..30807b6 100644
--- a/particles.html
+++ b/particles.html
@@ -2,7 +2,7 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph"></script>
-  <script src="//cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"></script>
+  <script src="https://unpkg.com/neo4j-driver"></script>
   <!--<script src="../../dist/3d-force-graph.js"></script>-->
 </head>
 
@@ -11,11 +11,11 @@
 
   <script>
     const elem = document.getElementById('3d-graph');
-    const driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
-	const session = driver.session();
+    const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
+	const session = driver.session({database:"gameofthrones"});
 	const start = new Date()
     session
-      .run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.louvain, caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), community:n.louvain, caption:m.name, size:m.pagerank } as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: 5000})
+      .run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.louvain, caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), community:n.louvain, caption:m.name, size:m.pagerank } as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: neo4j.int(5000)})
       .then(function (result) {
         const nodes = {}
         const links = result.records.map(r => { 
@@ -36,7 +36,7 @@
                       .linkAutoColorBy('community')
                       .linkWidth(0)
                       .linkDirectionalParticles('weight')
-                      .linkDirectionalParticleSpeed(0.001)
+                      .linkDirectionalParticleSpeed('weight')
                       .nodeLabel(node => `${node.label}: ${node.caption}`)
                       .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null);
       })
diff --git a/readme.adoc b/readme.adoc
index de53acf..961e815 100644
--- a/readme.adoc
+++ b/readme.adoc
@@ -2,11 +2,12 @@
 
 Some experiments using Data in Neo4j to render 3d graphs using three-js via https://github.com/vasturiano/3d-force-graph[3d-force-graph] which is a really cool repository.
 
-These pages use the Neo4j javascript driver to query the graph for some basic data and render it in the 3d-graph.
+These pages use the latest Neo4j javascript driver to query the graph for some basic data and render it in the 3d-graph.
 
-Please note that the JS driver uses a custom Number object, which we have to turn into JS integers with `value.toNumber()`.
+Please note that the JS driver uses a custom Number object, which we have to turn into JS integers with `value.toNumber()` and wrap int values we send to the server like the limit in `neo4j.int`.
 
-The pages load 5000 relationships from your graph at bolt://localhost, you might need to set auth (default is user: neo4j, password: test)
+The example pages load 5000 relationships from the GameOfThrones graph at link:bolt://demo.neo4jlabs.com[https://demo.neo4jlabs.com:7473]
+You might need to change auth and database (default: database/user/password: gameofthrones)
 
 == Basic Loading
 
diff --git a/weights.html b/weights.html
index 32144da..45eefb6 100644
--- a/weights.html
+++ b/weights.html
@@ -2,7 +2,7 @@
   <style> body { margin: 0; } </style>
 
   <script src="//unpkg.com/3d-force-graph"></script>
-  <script src="//cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.2/lib/browser/neo4j-web.min.js"></script>
+  <script src="https://unpkg.com/neo4j-driver"></script>
   <!--<script src="../../dist/3d-force-graph.js"></script>-->
 </head>
 
@@ -11,11 +11,11 @@
 
   <script>
     const elem = document.getElementById('3d-graph');
-    const driver = neo4j.v1.driver("bolt+routing://90bfd895.databases.neo4j.io", neo4j.v1.auth.basic("got", "got"),{encrypted: true});
-	const session = driver.session();
+    const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
+	const session = driver.session({database:"gameofthrones"});
 	const start = new Date()
     session
-      .run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), caption:m.name, size:m.pagerank } as target, {weight:log(r.weight), type:type(r)} as rel LIMIT $limit', {limit: 5000})
+      .run('MATCH (n)-[r]->(m) RETURN { id: id(n), label:head(labels(n)), caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), caption:m.name, size:m.pagerank } as target, {weight:log(r.weight), type:type(r)} as rel LIMIT $limit', {limit: neo4j.int(5000)})
       .then(function (result) {
         const nodes = {}
         const links = result.records.map(r => {