Skip to content

Commit

Permalink
Changed database server to demo.neo4jlabs.com
Browse files Browse the repository at this point in the history
  • Loading branch information
@jexp
jexp committed Jun 12, 2020
1 parent 5b596f6 commit 6c9ad0d
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 24 deletions.
8 changes: 4 additions & 4 deletions color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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 => {
Expand Down
8 changes: 4 additions & 4 deletions incremental.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
<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>

<body>
<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();
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<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>

<body>
<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();
Expand Down
10 changes: 5 additions & 5 deletions particles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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 => {
Expand All @@ -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);
})
Expand Down
7 changes: 4 additions & 3 deletions readme.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions weights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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 => {
Expand Down

0 comments on commit 6c9ad0d

Please sign in to comment.