Skip to main content
100%

Neo4j hierarchy

✓ Published0🌍 Public
TTomStanczyk
Last edited Oct 17, 2020
Created on Oct 17, 2020

This visualization displays a hierarchy of solutions as a network graph, where nodes represent individual entries and edges show containment relationships. It reads hierarchical data from a Neo4j graph database using a Cypher query that calls `apoc.path.expand` to traverse all `CONTAINS` relationships, then builds a `hierarchyName` string and `hierarchyLevel` per node. The rendering uses d3.forceSimulation to position nodes, with links drawn between connected elements, producing an interactive tree-like layout that reveals the nested structure and depth of each solution.

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
61% match
Loading thumbnail…

nests

This visualization demonstrates hierarchical data grouping using D3’s nest operator, which organizes a flat dataset into a tree structure based on key functions. The example shows how nested groups are rendered as collapsible node-link diagrams, with each level of the nest corresponding to a depth in the tree. The code relies on `d3.nest()` to build the hierarchy and `d3.hierarchy()` plus `d3.tree()` for layout, while transitions animate the expansion and collapse of branches. The underlying data is generated from a small inline array, and the rendering uses SVG paths and circles styled with standard D3 scales.

Aaaizemberg
61% match
Loading thumbnail…

Organization Network Graph

This network graph visualizes an organization’s hierarchy, with nested nodes representing main entities, children, and leaves, colored by category and connected by force-directed links. The code uses d3.forceSimulation with forceLink and forceManyBody to position nodes, while SVG circles and text labels render the structure. Drag interactions let users move nodes, and links are drawn as red lines.

Hhunsingeruk@gmail.com
60% match
Loading thumbnail…

hierarchical

This visualization displays a hierarchical dataset of 40 nodes as a radial tree, with the root at the center and branches extending outward in a circular pattern. The red links are generated using d3.linkRadial, while the layout is computed with d3.tree and d3.hierarchy. The SVG rendering supports interactive zooming via d3.zoom, and the data is loaded from a local JSON file.

WWillPCowan
60% match
Loading thumbnail…

My Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of computer science concepts, with taxonomy data organized by depth levels. It uses a custom `CreateHierarchy` function to derive parent-child relationships from node and link data, then renders them as an SVG with color-coded nodes based on depth. The graph shows learning paths with labeled edges and arrowheads, implemented using D3 v4 selections and SVG markers. The layout manually positions nodes and links rather than using force simulation, and includes interactive elements like edge paths and text labels.

Rrainyrainyguo
60% match
Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR
60% match
Loading thumbnail…

Fork of Force-Directed Graph hierarchy with drill up & drill down

This interactive network visualization demonstrates hierarchical data exploration in a force-directed graph, allowing users to drill down from a high-level community view into individual node connections and drill back up. The example combines a base graph of five communities with sub-graphs representing their internal structures, augmented by real-world datasets from the Les Misérables character network and the email-Eu-core communication network, fetched from GitHub and parsed with custom utility functions. Built with d3's forceSimulation, forceLink, forceManyBody, and forceCenter APIs within an SVG container, the visualization uses zoom functionality and color-coded nodes to distinguish between levels, while user interaction triggers level transitions through a stack-based drill-up mechanism.

Hhelen azad
60% match
Loading thumbnail…

network charts

This animated network chart lets users explore a hierarchical dataset by clicking circular nodes to zoom between levels, with smooth animated transitions. The visualization uses D3.js version 7.9 and its `d3.pack()` layout algorithm to arrange the hierarchy, with `d3.scaleLinear()` and `d3.interpolateHcl` providing color encoding by depth, while `d3.interpolateZoom` drives the zooming transitions. The data is structured hierarchically, and the code inspects node depth and parent relationships to control label visibility and styling during navigation.

Hhquazza@gmail.com
60% match