{"id":14959426,"url":"https://github.com/jexp/neo4j-3d-force-graph","last_synced_at":"2025-06-27T23:40:08.269Z","repository":{"id":31251806,"uuid":"127341833","full_name":"jexp/neo4j-3d-force-graph","owner":"jexp","description":"Experiments with Neo4j \u0026 3d-force-graph https://github.com/vasturiano/3d-force-graph","archived":false,"fork":false,"pushed_at":"2023-01-05T21:47:05.000Z","size":1233,"stargazers_count":299,"open_issues_count":23,"forks_count":58,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-02T06:07:07.550Z","etag":null,"topics":["3d-visualization","cypher","graph","graph-database","graph-visualization","javascript","neo4j","reactjs","three-js"],"latest_commit_sha":null,"homepage":"https://rawgit.com/jexp/neo4j-3d-force-graph/master/index.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jexp.png","metadata":{"files":{"readme":"readme.adoc","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T20:05:49.000Z","updated_at":"2025-02-26T04:22:50.000Z","dependencies_parsed_at":"2023-01-14T18:45:29.205Z","dependency_job_id":null,"html_url":"https://github.com/jexp/neo4j-3d-force-graph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jexp%2Fneo4j-3d-force-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jexp%2Fneo4j-3d-force-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jexp%2Fneo4j-3d-force-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jexp%2Fneo4j-3d-force-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jexp","download_url":"https://codeload.github.com/jexp/neo4j-3d-force-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999864,"owners_count":21031046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-visualization","cypher","graph","graph-database","graph-visualization","javascript","neo4j","reactjs","three-js"],"created_at":"2024-09-24T13:19:41.445Z","updated_at":"2025-04-09T08:12:04.832Z","avatar_url":"https://github.com/jexp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":":base: https://rawgit.com/jexp/neo4j-3d-force-graph/master\n\nSome 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.\n\nThese pages use the latest Neo4j javascript driver to query the graph for some basic data and render it in the 3d-graph.\n\nPlease 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`.\n\nThe example pages load 5000 relationships from the GameOfThrones graph at link:bolt://demo.neo4jlabs.com[https://demo.neo4jlabs.com:7473]\nYou might need to change auth and database (default: database/user/password: gameofthrones)\n\n== Basic Loading\n\nbasic loading: just using the id's (fastest)\n\n[source,cypher]\n----\nMATCH (n)--\u003e(m) RETURN id(n) as source, id(m) as target LIMIT $limit\n----\n\n[source,javascript]\n----\nForceGraph3D()(document.getElementById('3d-graph')).graphData(gData)\n----\n\nimage::{base}/basic.jpg[width=600]\n\nlink:{base}/index.html[Render Example^] | link:index.html[Code^]\n\n== Incremental Loading\n\nIncremental loading: each row from the driver result is added to the graph incrementally\n\n[source,javascript]\n----\nresult.records.forEach(r =\u003e { \n   const { nodes, links } = Graph.graphData();\n   const link={source:r.get('source').toNumber(), target:r.get('target').toNumber()}\n   Graph.graphData({\n        nodes: [...nodes, { id:link.source }, { id: link.target}],\n        links: [...links, link]\n    });\n});        \n----\n\nlink:{base}/incremental.html[Render Example^] | link:incremental.html[Code^]\n\n== Color and Caption\n\n\ncolor by label and text caption on hover\n\n\n[source,cypher]\n----\nMATCH (n)--\u003e(m) \nRETURN { id: id(n), label:head(labels(n)), caption:n.name } as source, \n       { id: id(m), label:head(labels(m)), caption:m.name } as target \nLIMIT $limit\n----\n\n[source,javascript]\n----\nconst Graph = ForceGraph3D()(elem)\n              .graphData(gData)\n              .nodeAutoColorBy('label')\n              .nodeLabel(node =\u003e `${node.label}: ${node.caption}`)\n              .onNodeHover(node =\u003e elem.style.cursor = node ? 'pointer' : null);\n----\n\nlink:{base}/color.html[Render Example^] | link:color.html[Code^]\n\n\n.Color and Caption on Paradise Papers\nimage::{base}/labels-info.jpg[width=600]\n\n== Weights for Node and Relationship Sizes\n\nUse weight on node (e.g. pagerank) and on relationship to render different sizes.\nAlso color relationships by type. We use log(weight) for relationships as they would groth too thick otherwise.\n\n[source,cypher]\n----\nMATCH (n)-[r]-\u003e(m) \nRETURN { id: id(n), label:head(labels(n)), caption:n.name, size:n.pagerank } as source, \n       { id: id(m), label:head(labels(m)), caption:m.name, size:m.pagerank } as target, \n       { weight:log(r.weight), type:type(r)} as rel \nLIMIT $limit\n----\n\n[source,javascript]\n----\nconst Graph = ForceGraph3D()(elem)\n              .graphData(gData)\n              .nodeAutoColorBy('label')\n              .nodeVal('size')\n              .linkAutoColorBy('type')\n              .linkWidth('weight')\n              .nodeLabel(node =\u003e `${node.label}: ${node.caption}`)\n              .onNodeHover(node =\u003e elem.style.cursor = node ? 'pointer' : null);\n----\n\n\nlink:{base}/weights.html[Render Example^] | link:weights.html[Code^]\n\n.Weights on Game Of Thrones\nimage::{base}/weights-got.jpg[width=600]\n\n== Particles \u0026 Cluster Coloring\n\nColor nodes and relationships by community/cluster id.\nUse particles for relationships to render their weight, here we use the original weight as it represents the number of particles traveling.\n\n[source,cypher]\n----\nMATCH (n)-[r]-\u003e(m) \nRETURN { id: id(n), label:head(labels(n)), community:n.louvain, caption:n.name, size:n.pagerank } as source, \n       { id: id(m), label:head(labels(m)), community:n.louvain, caption:m.name, size:m.pagerank } as target, \n       { weight:r.weight, type:type(r), community:case when n.community \u003c m.community then n.community else m.community end} as rel \nLIMIT $limit\n----\n\n[source,javascript]\n----\nconst Graph = ForceGraph3D()(elem)\n              .graphData(gData)\n              .nodeAutoColorBy('community')\n              .nodeVal('size')\n              .linkAutoColorBy('community')\n              .linkWidth(0)\n              .linkDirectionalParticles('weight') // number of particles\n              .linkDirectionalParticleSpeed(0.001) // slow down\n              .nodeLabel(node =\u003e `${node.label}: ${node.caption}`)\n              .onNodeHover(node =\u003e elem.style.cursor = node ? 'pointer' : null);\n----\n\nlink:{base}/particles.html[Render Example^] | link:particles.html[Code^]\n\n.Particles and Clusters on Game Of Thrones\nimage::{base}/particles-got.jpg[width=600]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjexp%2Fneo4j-3d-force-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjexp%2Fneo4j-3d-force-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjexp%2Fneo4j-3d-force-graph/lists"}