{"id":13445750,"url":"https://github.com/eisman/neo4jd3","last_synced_at":"2025-05-15T10:07:15.439Z","repository":{"id":39615182,"uuid":"67929234","full_name":"eisman/neo4jd3","owner":"eisman","description":"Neo4j graph visualization using D3.js","archived":false,"fork":false,"pushed_at":"2021-04-24T20:38:43.000Z","size":3966,"stargazers_count":1435,"open_issues_count":53,"forks_count":427,"subscribers_count":70,"default_branch":"master","last_synced_at":"2025-04-21T18:44:41.535Z","etag":null,"topics":["d3","d3js","graph-visualization","neo4j"],"latest_commit_sha":null,"homepage":"https://eisman.github.io/neo4jd3/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eisman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-11T12:43:04.000Z","updated_at":"2025-04-18T07:36:52.000Z","dependencies_parsed_at":"2022-08-09T15:06:53.816Z","dependency_job_id":null,"html_url":"https://github.com/eisman/neo4jd3","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/eisman%2Fneo4jd3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eisman%2Fneo4jd3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eisman%2Fneo4jd3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eisman%2Fneo4jd3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eisman","download_url":"https://codeload.github.com/eisman/neo4jd3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"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":["d3","d3js","graph-visualization","neo4j"],"created_at":"2024-07-31T05:00:38.806Z","updated_at":"2025-05-15T10:07:10.416Z","avatar_url":"https://github.com/eisman.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript","others","Charts"],"sub_categories":["Charts Libraries"],"readme":"# neo4jd3.js\r\n\r\n[Neo4j](https://github.com/neo4j) graph visualization using [D3.js](https://github.com/d3/d3).\r\n\r\n![neo3jd3.js](https://eisman.github.io/neo4jd3/img/neo4jd3.jpg?v=0.0.5)\r\n\r\n## Features\r\n\r\n* Compaptible with the [Neo4j data format](#neo4j-data-format) and the [D3.js data format](#d3js-data-format).\r\n* Force simulation.\r\n* Info panel that shows nodes and relationships information on hover.\r\n* Double click callbacks.\r\n* Custom node colors by node type.\r\n* Text nodes + [Font Awesome](http://fontawesome.io/) icon nodes + SVG image nodes (e.g. using [Twitter Emoji](https://github.com/twitter/twemoji))).\r\n* Sticky nodes (drag to stick, single click to unstick).\r\n* Dynamic graph update (e.g. double click a node to expand it).\r\n* Highlight nodes on init.\r\n* Relationship auto-orientation.\r\n* Zoom, pan, auto fit.\r\n* Compatible with D3.js v4.\r\n\r\n## Running\r\n\r\nFirst of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.\r\n\r\n```bash\r\n\u003e gem install sass\r\n\u003e git clone https://github.com/eisman/neo4jd3.git\r\n\u003e npm install\r\n\u003e gulp\r\n```\r\n\r\nOpen `http://localhost:8080` in your favorite browser.\r\n\r\n## Documentation\r\n\r\n```javascript\r\nvar neo4jd3 = new Neo4jd3('.selector', options);\r\n```\r\n\r\n### Options\r\n\r\n| Parameter | Type | Description |\r\n| --------- | ---- | ----------- |\r\n| **highlight** | *array* | Highlight several nodes of the graph.\u003cbr\u003eExample:\u003cbr\u003e`[`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`class: 'Project',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`property: 'name',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`value: 'neo4jd3'`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`}`\u003cbr\u003e`]` |\r\n| **icons** | *object* | Map node labels to [Font Awesome icons](http://fontawesome.io/icons).\u003cbr\u003eExample:\u003cbr\u003e`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'BirthDate': 'birthday-cake',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Password': 'lock',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Phone': 'phone',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'User': 'user'`\u003cbr\u003e`}`. |\r\n| **images** | *object* | Map node labels to SVG images (e.g. using [Twitter Emoji](https://github.com/twitter/twemoji)).\u003cbr\u003eExample:\u003cbr\u003e`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Address': 'img/twemoji/1f3e0.svg',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'BirthDate': 'img/twemoji/1f382.svg',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Password': 'img/twemoji/1f511.svg',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Project': 'img/twemoji/2198.svg',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'Project\\|name\\|neo4jd3': 'img/twemoji/2196.svg',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`'User': 'img/twemoji/1f600.svg'`\u003cbr\u003e`}`. |\r\n| **infoPanel** | *boolean* | Show the information panel: `true`, `false`. Default: `true`. |\r\n| **minCollision** | *int* | Minimum distance between nodes. Default: 2 * *nodeRadius*. |\r\n| **neo4jData** | *object* | Graph data in [Neo4j data format](#neo4j-data-format). |\r\n| **neo4jDataUrl** | *string* | URL of the endpoint that serves the graph data in [Neo4j data format](#neo4j-data-format). |\r\n| **nodeRadius** | *int* | Radius of nodes. Default: 25. |\r\n| **onNodeClick** | *function* | Callback function to be executed when the user clicks a node. |\r\n| **onNodeDoubleClick** | *function* | Callback function to be executed when the user double clicks a node. |\r\n| **onNodeDragEnd** | *function* | Callback function to be executed when the user finishes dragging a node. |\r\n| **onNodeDragStart** | *function* | Callback function to be executed when the user starts dragging a node. |\r\n| **onNodeMouseEnter** | *function* | Callback function to be executed when the mouse enters a node. |\r\n| **onNodeMouseLeave** | *function* | Callback function to be executed when the mouse leaves a node. |\r\n| **onRelationshipDoubleClick** | *function* | Callback function to be executed when the user double clicks a relationship. |\r\n| **zoomFit** | *boolean* | Adjust the graph to the container once it has been loaded: `true`, `false`. Default: `false`. |\r\n\r\n### JavaScript API\r\n\r\n| Function | Description |\r\n| -------- | ----------- |\r\n| **appendRandomDataToNode**(*d*, *maxNodesToGenerate*) | Generates between 1 and *maxNodesToGenerate* random nodes connected to node *d* and updates the graph data. |\r\n| **neo4jDataToD3Data**(*data*) | Converts data from [Neo4j data format](#neo4j-data-format) to [D3.js data format](#d3js-data-format). |\r\n| **randomD3Data**(*d*, *maxNodesToGenerate*) | Generates between 1 and *maxNodesToGenerate* random nodes connected to node *d*. |\r\n| **size**() | Returns the number of nodes and relationships.\u003cbr\u003eExample:\u003cbr\u003e`{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`nodes: 25,`\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`relationships: 50`\u003cbr\u003e`}` |\r\n| **updateWithD3Data**(*d3Data*) | Updates the graph data using the [D3.js data format](#d3js-data-format). |\r\n| **updateWithNeo4jData**(*neo4jData*) | Updates the graph data using the [Neo4j data format](#neo4j-data-format). |\r\n| **version**() | Returns the version of neo4jd3.js.\u003cbr\u003eExample: `'0.0.1'` |\r\n\r\n### Documentation\r\n\r\n#### D3.js data format\r\n\r\n```\r\n{\r\n    \"nodes\": [\r\n        {\r\n            \"id\": \"1\",\r\n            \"labels\": [\"User\"],\r\n            \"properties\": {\r\n                \"userId\": \"eisman\"\r\n            }\r\n        },\r\n        {\r\n            \"id\": \"8\",\r\n            \"labels\": [\"Project\"],\r\n            \"properties\": {\r\n                \"name\": \"neo4jd3\",\r\n                \"title\": \"neo4jd3.js\",\r\n                \"description\": \"Neo4j graph visualization using D3.js.\",\r\n                \"url\": \"https://eisman.github.io/neo4jd3\"\r\n            }\r\n        }\r\n    ],\r\n    \"relationships\": [\r\n        {\r\n            \"id\": \"7\",\r\n            \"type\": \"DEVELOPES\",\r\n            \"startNode\": \"1\",\r\n            \"endNode\": \"8\",\r\n            \"properties\": {\r\n                \"from\": 1470002400000\r\n            },\r\n            \"source\": \"1\",\r\n            \"target\": \"8\",\r\n            \"linknum\": 1\r\n        }\r\n    ]\r\n}\r\n```\r\n\r\n#### Neo4j data format\r\n\r\n```\r\n{\r\n    \"results\": [\r\n        {\r\n            \"columns\": [\"user\", \"entity\"],\r\n            \"data\": [\r\n                {\r\n                    \"graph\": {\r\n                        \"nodes\": [\r\n                            {\r\n                                \"id\": \"1\",\r\n                                \"labels\": [\"User\"],\r\n                                \"properties\": {\r\n                                    \"userId\": \"eisman\"\r\n                                }\r\n                            },\r\n                            {\r\n                                \"id\": \"8\",\r\n                                \"labels\": [\"Project\"],\r\n                                \"properties\": {\r\n                                    \"name\": \"neo4jd3\",\r\n                                    \"title\": \"neo4jd3.js\",\r\n                                    \"description\": \"Neo4j graph visualization using D3.js.\",\r\n                                    \"url\": \"https://eisman.github.io/neo4jd3\"\r\n                                }\r\n                            }\r\n                        ],\r\n                        \"relationships\": [\r\n                            {\r\n                                \"id\": \"7\",\r\n                                \"type\": \"DEVELOPES\",\r\n                                \"startNode\": \"1\",\r\n                                \"endNode\": \"8\",\r\n                                \"properties\": {\r\n                                    \"from\": 1470002400000\r\n                                }\r\n                            }\r\n                        ]\r\n                    }\r\n                }\r\n            ]\r\n        }\r\n    ],\r\n    \"errors\": []\r\n}\r\n```\r\n\r\n### Example\r\n\r\nLive example @ [https://eisman.github.io/neo4jd3/](https://eisman.github.io/neo4jd3/)\r\n\r\n```javascript\r\nvar neo4jd3 = new Neo4jd3('#neo4jd3', {\r\n    highlight: [\r\n        {\r\n            class: 'Project',\r\n            property: 'name',\r\n            value: 'neo4jd3'\r\n        }, {\r\n            class: 'User',\r\n            property: 'userId',\r\n            value: 'eisman'\r\n        }\r\n    ],\r\n    icons: {\r\n        'Api': 'gear',\r\n        'BirthDate': 'birthday-cake',\r\n        'Cookie': 'paw',\r\n        'Email': 'at',\r\n        'Git': 'git',\r\n        'Github': 'github',\r\n        'Ip': 'map-marker',\r\n        'Issues': 'exclamation-circle',\r\n        'Language': 'language',\r\n        'Options': 'sliders',\r\n        'Password': 'asterisk',\r\n        'Phone': 'phone',\r\n        'Project': 'folder-open',\r\n        'SecurityChallengeAnswer': 'commenting',\r\n        'User': 'user',\r\n        'zoomFit': 'arrows-alt',\r\n        'zoomIn': 'search-plus',\r\n        'zoomOut': 'search-minus'\r\n    },\r\n    images: {\r\n        'Address': 'img/twemoji/1f3e0.svg',\r\n        'BirthDate': 'img/twemoji/1f5d3.svg',\r\n        'Cookie': 'img/twemoji/1f36a.svg',\r\n        'CreditCard': 'img/twemoji/1f4b3.svg',\r\n        'Device': 'img/twemoji/1f4bb.svg',\r\n        'Email': 'img/twemoji/2709.svg',\r\n        'Git': 'img/twemoji/1f5c3.svg',\r\n        'Github': 'img/twemoji/1f5c4.svg',\r\n        'icons': 'img/twemoji/1f38f.svg',\r\n        'Ip': 'img/twemoji/1f4cd.svg',\r\n        'Issues': 'img/twemoji/1f4a9.svg',\r\n        'Language': 'img/twemoji/1f1f1-1f1f7.svg',\r\n        'Options': 'img/twemoji/2699.svg',\r\n        'Password': 'img/twemoji/1f511.svg',\r\n        'Project|name|d3': 'img/twemoji/32-20e3.svg',\r\n        'Project|name|neo4j': 'img/twemoji/33-20e3.svg',\r\n        'Project|name|neo4jd3': 'img/twemoji/31-20e3.svg',\r\n        'User': 'img/twemoji/1f600.svg'\r\n    },\r\n    minCollision: 60,\r\n    neo4jDataUrl: 'json/neo4jData.json',\r\n    nodeRadius: 25,\r\n    onNodeDoubleClick: function(node) {\r\n        switch(node.id) {\r\n            case '25':\r\n                // Google\r\n                window.open(node.properties.url, '_blank');\r\n                break;\r\n            default:\r\n                var maxNodes = 5,\r\n                    data = neo4jd3.randomD3Data(node, maxNodes);\r\n                neo4jd3.updateWithD3Data(data);\r\n                break;\r\n        }\r\n    },\r\n    zoomFit: true\r\n});\r\n```\r\n\r\n## What's coming?\r\n\r\n* Toolbar.\r\n* More than one relationship between two nodes.\r\n* Markers.\r\n* Performance optimization.\r\n* Testing.\r\n\r\n## Copyright and license\r\n\r\nCode and documentation copyright 2016 the author. Code released under the [MIT license](LICENSE). Docs released under [Creative Commons](docs/LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feisman%2Fneo4jd3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feisman%2Fneo4jd3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feisman%2Fneo4jd3/lists"}