Neovis.js Simple Example

100%

Neovis.js Simple Example

✓ Published0🌍 Public

Last edited Oct 27, 2019

Created on Oct 27, 2019

This example visualizes the shortest path between two Berlin subway stations in a Neo4j graph database. It renders a force-directed network graph using Neovis.js, built on vis.js, showing station nodes sized by PageRank and colored by community, with line relationships thickened by weight. A Cypher query defines the path, and users can submit new queries or stabilize the layout. The code uses NeoVis.default, viz.render(), renderWithCypher(), and stabilize() to interact with the bolt:// server.

AI-generated description

Similar vizzes

Loading thumbnail…

Exploring the U-Bahn with Neo4j

This visualization uses the Neo4j graph database to explore the Berlin U-Bahn network. Station data is queried from Wikidata via SPARQL and exported to CSV, then modeled as nodes in a graph to reveal spatial and relational patterns. The map displays the stations as points, colored by their respective U-Bahn lines, with connecting edges illustrating the network's topology. Interactive elements let users zoom and pan through the city, highlighting the connectivity and density of Berlin's subway system.

CCliffordAnderson

74% match

Loading thumbnail…

Gist adbe358483e7e878175e

This example visualizes a network of places connected by paths, with each link representing a reciprocal route and its distance. The visualization shows the graph structure using a force-directed layout, where nodes are positioned based on their connections. The code loads relational data from a CSV file using Cypher’s `LOAD CSV`, then merges bidirectional `Path` relationships between `Place` nodes. The rendering relies on the Neo4j graph model and likely uses D3.js’s `forceSimulation` to compute node positions and link distances, though the snippet focuses on data ingestion via Cypher rather than the display layer. The graph reveals clusters of tightly interconnected locations based on the distance metadata.

CCliffordAnderson

71% match

Loading thumbnail…

Graph Gist

This example renders a small Cypher query result as an interactive force-directed graph. It uses d3.forceSimulation to position nodes and links, displaying person and database entities with their LIKE relationships from the Neo4j sample data. The graph draws SVG circles and connecting lines, with labels for each node, and updates positions through the simulation's tick events.

CCliffordAnderson

67% match

Loading thumbnail…

Graph Analysis for the Humanities

This workshop introduces humanities scholars to graph-based data modeling and analysis, presenting a series of hands-on exercises that build from introductory Neo4j concepts to practical applications. It demonstrates how to create graph data models, write Cypher queries, and render interactive visualizations in the browser. The material shows loading Berlin metro data from Wikidata via XQuery and BaseX, then visualizing those connections with Neovis.js, a JavaScript library built on Neo4j's Bolt protocol. The exercise set culminates in web development, using a Python SimpleHTTPServer to deploy graph-based websites.

CCliffordAnderson

66% match

Loading thumbnail…

Cypher for Spatial

This example demonstrates the spatial capabilities of Neo4j’s Cypher query language by finding the nearest city to a given point in Germany. It shows how to combine geographic coordinates with graph traversal to return a ranked list of nearby cities, ordered by distance. The visualization uses `spatial.closest` from the Neo4j Spatial library, with a query that computes distances via the `distance()` function in kilometers. The accompanying data files include a GeoJSON point for the starting location and an exported CSV of city names with distances, while the code references adding a layer and populating it with cities from a Gist. The result is a straightforward map-based proximity search, rendered as a tabular list rather than a graphical map.

CCliffordAnderson

64% match

Loading thumbnail…

Gist 93888ff1e2e309348986d5e9496196c7

This example visualizes the locations of Dutch train stations, distinguishing intercity stations from regular ones through color-coded points. The map is built using D3.js, combining `d3.forceSimulation` with a custom force that projects coordinates onto a map layout, while station markers are rendered as circles. The visualization uses `d3.geoPath` to draw the geographic context, and the underlying data comes from a CSV file listing station names, coordinates, and intercity status. The rendering approach relies on Canvas, with the simulation handling the placement of labels and points to avoid overlap.

JJulesBlm

63% match

Loading thumbnail…

Graph Gist

This example demonstrates a simple graph visualization of two people and their database preferences. It shows nodes for "You" and "They," each linked via a `LIKE` relationship to database nodes representing Neo4j and eXistDB. The data comes from a Cypher query that creates the graph structure, and the visualization renders it using the D3.js library with a force-directed layout. Specifically, `d3.forceSimulation` drives node positioning, while SVG elements for circles and lines represent entities and relationships. The graph is rendered as an interactive network, highlighting the connections between the person nodes and their chosen database technologies.

CCliffordAnderson

63% match

Loading thumbnail…

DataVis

This example combines an adjacency matrix with a force-directed network graph to visualize pairwise relationships from a TSV dataset of numeric node pairs. The matrix displays presence or absence of edges as black or grey cells, while the force simulation using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` positions circles representing nodes. Node colors are assigned based on degree thresholds, and users can drag nodes to rearrange the graph. Both views update simultaneously via d3 v5's zoom and drag behaviors.

EELBOUNIAmine

62% match