Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Neo4j + vis.js = neovis.js. Graph visualizations in the browser with data from Neo4j.

License

NotificationsYou must be signed in to change notification settings

neo4j-contrib/neovis.js

Repository files navigation

Actions Build Statusnpm version

Graph visualizations powered by vis.js with data from Neo4j.

Features

  • Connect to Neo4j instance to get live data
  • User specified labels and property to be displayed
  • User specified Cypher query to populate
  • Specify node property for url of image for node
  • Specify edge property for edge thickness
  • Specify node property for community / clustering
  • Specify node property for node size
  • Configure popover

Install

Neovis.js can be installed via npm:

npm install --save neovis.js

you can also obtain neovis.js via CDN:

CDN

For ease of use Neovis.js can be obtained from Neo4jLabs CDN:

Most recent release

<scriptsrc="https://unpkg.com/neovis.js@2.0.2"></script>

Version without neo4j-driver dependency

<scriptsrc="https://unpkg.com/neovis.js@2.0.2/dist/neovis-without-dependencies.js"></script>

Quickstart Example

Let's go through the steps to reproduce this visualization:

Prepare Neo4j

Start with a blank Neo4j instance, or spin up a blankNeo4j Sandbox. We'll load the Game ofThrones dataset, run:

LOADCSVWITHHEADERSFROM'https://raw.githubusercontent.com/mathbeveridge/asoiaf/master/data/asoiaf-all-edges.csv'ASrowMERGE (src:Character{name:row.Source})MERGE (tgt:Character{name:row.Target})MERGE (src)-[r:INTERACTS]->(tgt)ONCREATESETr.weight=toInteger(row.weight)

We've pre-calculated PageRank and ran a community detection algorithm to assign community ids for each Character. Let'sload those next:

LOADCSVWITHHEADERSFROM'https://raw.githubusercontent.com/johnymontana/neovis.js/master/examples/data/got-centralities.csv'ASrowMATCH (c:Character{name:row.name})SETc.community=toInteger(row.community),c.pagerank=toFloat(row.pagerank)

Our graph now consists ofCharacter nodes that are connected by anINTERACTS relationships. We can visualize thewhole graph in Neo4j Browser by running:

MATCHp= (:Character)-[:INTERACTS]->(:Character)RETURNp

We can see characters that are connected and with the help of the force directed layout we can begin to see clusters inthe graph. However, we want to visualize the centralities (PageRank) and community detection results that we alsoimported.

Specifically we would like:

  • Node size to be proportional to the Character'spagerank score. This will allow us to quickly identify importantnodes in the network.
  • Node color to determined by thecommunity property. This will allow us to visualize clusters.
  • Relationship thickeness should be proportional to theweight property on theINTERACTS relationship.

Neovis.js, by combining the JavaScript driver for Neo4j and the vis.js visualization library will allow us to build thisvisualization.

index.html

Create a new html file:

<!doctype html><html><head><title>Neovis.js Simple Example</title><styletype="text/css">html,body {font:16pt arial;        }#viz {width:900px;height:700px;border:1px solid lightgray;font:22pt arial;        }</style></head><bodyonload="draw()"><divid="viz"></div></body></html>

We define some basic CSS to specify the boundaries of adiv and then create a singlediv in the body. We alsospecifyonload="draw()" so that thedraw() function is called as soon as the body is loaded.

We need to pull inneovis.js:

<scriptsrc="https://unpkg.com/neovis.js@2.0.2"></script>

And define our draw() function:

<scripttype="text/javascript">letneoViz;functiondraw(){constconfig={containerId:"viz",neo4j:{serverUrl:"bolt://localhost:7687",serverUser:"neo4j",serverPassword:"sorts-swims-burglaries",},labels:{Character:{label:"name",value:"pagerank",group:"community",[NeoVis.NEOVIS_ADVANCED_CONFIG]:{function:{title:(node)=>viz.nodeToHtml(node,["name","pagerank"])}}}},relationships:{INTERACTS:{value:"weight"}},initialCypher:"MATCH (n)-[r:INTERACTS]->(m) RETURN *"};neoViz=newNeoVis.default(config);neoViz.render();}</script>

This function creates aconfig object that specifies how to connect to Neo4j, what data to fetch, and how to configurethe visualization.

Seesimple-example.html for the full code.

module usage

you can also use it as module, but it would require you have a way to import css files

importNeoVisfrom'neovis.js';

or you can import the version with bundled dependency

importNeoVisfrom'neovis.js/dist/neovis.js';

Api Reference

Api Reference

Build

This project uses git submodules to include the dependencies for neo4j-driver and vis.js. This project uses webpack tobuild a bundle that includes all project dependencies.webpack.config.js contains the configuration for webpack. Aftercloning the repo:

npm installnpm run buildnpm run typedoc

will builddist/neovis.js anddist/neovis-without-dependencies.js

About

Neo4j + vis.js = neovis.js. Graph visualizations in the browser with data from Neo4j.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors13

[8]ページ先頭
©2009-2025 Movatter.jp