Giter VIP home page Giter VIP logo

react-neovis-example's Introduction

React Neovis Example

Dependencies

A PNG file that shows an example of this project

What is this thing?

This repo is just a simple example on how to show a neovis.js graph visualization in a React application.

How do I use it?

You don't need to install Neo4j for this project. You just need 3 things:

  1. create a Neo4j Sandbox on neo4j.com,
  2. install the project dependencies,
  3. connect to your Neo4j Sandbox.

1 - Create a Neo4j Sandbox

A Neo4j Sandbox is essentially a Docker container with Neo4j installed, and a graph dataset that you can play with. There is nothing to install. It runs on the cloud. A Sandbox will expire in 3 days, but if you want you can extend your project for an additional 7 days (it can be done only once).

Create a Neo4j Sanbox here.

A PNG file that shows the creation of a Neo4j Sandbox with Russian Twitter Trolls dataset

2 - Install project dependencies

git clone [email protected]:jackdbd/react-neovis-example.git
cd react-neovis-example
yarn install  # or simply, yarn

3 - Connect to your Neo4j Sandbox

Find the Connection details for your Neo4j Sandbox:

A PNG file that shows your Neo4j Sandbox credentials

Then open the App component and replace YOUR-BOLT-URI-HERE and YOUR-NEO4J-PASSWORD-HERE with your Neo4j Sanbox connection details.

Now you are all set, and you can run the app with:

yarn start

Credits

Inspired by William Lyon's Graph Visualization With Neo4j Using Neovis.js.

This project was bootstrapped with Create React App.

react-neovis-example's People

Contributors

jackdbd avatar kjoshi-jisc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-neovis-example's Issues

Using remote server instead of bolt address

When I'm trying to use a remote server address (*.databases.neo4j.io), I'm getting a WebSocket error and its failing to connect. Since the docs mentioned to connect using bolt:// address, is there any way to work around and use a remote server instead?

How to deal with `hasChildNodes` of null error?

Hi @jackdbd ,

I tried playing around with the example, but the problem is this.viz.render() will fetch the data and try to load onto the dom. But the dom will already execute and it will not wait for the this.viz.render() to finish. I'm not quite sure how it worked for you. Please let me know. I'm attaching a screen shot for reference.

neograph

Thanks,
Sai.

Blank page

I just now cloned and ran this locally, and I get a blank page. Is there any advice you can give to get this initial example up and running?

So far: I have started up my own neo4j sandbox and updated the URI and credentials.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.