Graph Gist

Graph Gist

This example shows a small graph of people and their database preferences, capturing two `Person` nodes connected by `LIKE` relationships to database nodes labeled `Database`, `NoSql`, and `Graph`. The visualization renders this graph data using D3.js, likely with a force-directed layout (`d3.forceSimulation`) to position nodes and links, and possibly `d3.geoPath` or standard SVG/CSS for shapes and labels. The source code, authored by CliffordAnderson and stored as a Gist, explicitly creates the nodes and relationships with Cypher, returning them for immediate display. The result emphasizes how graph structures and their labels can be directly mapped from query output to interactive visual elements.

92% match

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.

85% match

Gist 484101

This visualization shows an interactive network of interconnected nodes, with each node representing a person and links showing connections between them. It reveals the structure of social ties, likely from a GitHub collaboration graph, by grouping related clusters. The rendering uses a canvas-based `d3.forceSimulation` with custom collision and link forces to position nodes, while a custom `d3.geoPath`-style projection maps node positions onto a projected sphere. The code also employs Canvas `getImageData` to detect node boundaries for hover interactions, and uses `transition.attrTween` for smooth link animations. The underlying data is loaded from a Gist, and the visualization runs entirely client-side without external data files.

DDylanFM

73% match

Neo4j REST example

This example demonstrates a graph visualization of a Neo4j query result, showing how a single person node (e.g., “Stanley Kubrick”) is returned and rendered as a node in a force-directed layout. The code issues a Cypher POST request to the Neo4j REST endpoint, then uses d3.forceSimulation to position the node and draw it with SVG circles and labels. The visualization focuses on the raw response data, displaying only the returned `a` object without additional graph traversal or styling beyond basic node rendering.

71% match

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.

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes

Gist 8a97689739c217f28474d80c89013628

This visualization uses a force-directed graph to show relationships between entities, with nodes positioned by `d3.forceSimulation` and links drawn as curved paths. The code computes node sizes and colors from quantitative attributes, while a canvas overlay via `d3.geoPath` and `getImageData` samples pixel density to modulate link opacity based on local clustering. It employs a custom `transition.attrTween` to animate node drift when the simulation restarts, and uses the `d3.hierarchy` API to flatten nested data from a JSON file. The visualization reads credentials from an `env.list` file for a private data source, but the rendering logic is independent of that authentication step.

CConorAspell

GraphML for Neo4j

This graph visualization maps academic works, authors, and categories from a theological library dataset, revealing relationships between publications and their contributors. The graph connects nodes representing books, authors, and subject categories, using directional edges to show authorship and classification. The implementation parses GraphML-formatted XML data and displays it through the Neo4j graph platform, leveraging the force-directed layout to position nodes and illustrate the network's structure. The visualization highlights recurring patterns, such as multiple authors associated with the same work and works appearing in several categories.