Graph Gist

100%

✓ Published0🌍 Public

Last edited Sep 9, 2014

Created on Sep 9, 2014

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.

AI-generated description

Similar vizzes

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

92% 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

85% match

Loading thumbnail…

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

75% 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

72% match

Loading thumbnail…

Graph

This example shows a social network graph of people connected by friendship ties, with nodes labeled by name and edges drawn as directed lines. The graph is rendered as SVG and uses D3 v6’s force-directed layout, specifically `d3.forceSimulation`, `d3.forceLink`, and `d3.forceCenter`, to position nodes. Each node is a circle with a label, and links have arrowheads via an SVG marker. The data comes from a JSON file listing relationships with weights, and nodes are draggable through `d3.drag`. Hovering highlights a node by increasing its stroke width.

Yyasmeenha

72% match

Loading thumbnail…

Untitled

This example shows a small directed graph of four nodes representing people and databases, with labeled edges indicating relationships such as “KNOWS” and “FOUNDED.” The visualization uses d3.forceSimulation to position nodes, and SVG lines with arrowhead markers for links. Node labels display names and types, while edge labels are placed along paths using textPath. The graph is draggable, with the simulation restarting on interaction, and node colors are assigned via d3.scaleOrdinal with d3.schemeCategory10. Data is loaded from an inline JSON object.

RRafael Campos

71% match

Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com

71% match

Loading thumbnail…

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

71% match