Skip to main content
SimilarExport ZIP
100%

Force-Directed Graph hierarchy with drill up & drill down

✓ Published0🌍 Public
KKhanin Sisaengsuwanchai
Last edited Jul 18, 2023
Created on Jul 18, 2023

This example demonstrates a force-directed graph hierarchy on top of an email communication network, enabling users to drill up and down between aggregate community clusters and individual nodes. It first applies random-walk-based node embedding and k-means clustering to group nodes by community, then visualizes both the top-level community relationships and the detailed subgraphs within each cluster. The interactive drill-up and drill-down navigation is implemented using D3’s forceSimulation for layout, zoom behavior for pan and zoom, and SVG rendering. Color-coded nodes and edges distinguish clusters, with data parsed from a SNAP-format edge list and department labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This force-directed graph visualization displays the hierarchical structure of the email-Eu-core network, grouping nodes into color-coded communities. Users can drill down into individual clusters to see their subgraphs and drill back up to the full view. The implementation uses D3’s `forceSimulation` for layout, along with `fetch` to load SNAP-format data from GitHub, and custom JavaScript functions for random walk-based node embedding and k-means clustering. Rendered as scalable vector graphics, it supports zoom and drag interactions.

KKhanin Sisaengsuwanchai
92% match
Loading thumbnail…

Force-Directed Graph hierarchy with drill up & drill down

This visualization shows a hierarchical force-directed graph with interactive drill-up and drill-down capabilities, displaying both a high-level community structure and detailed node-level views. The graph renders in SVG and uses D3.js's force simulation APIs, including `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, along with a zoom behavior. Users can navigate between hierarchy levels by clicking on community nodes to expand them into their constituent node networks, or drill back up to the parent level. The data comes from the Les Misérables character network and an email communication dataset (email-Eu-core), parsed from edge-list text files.

KKhanin Sisaengsuwanchai
90% 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
86% match
Loading thumbnail…

Force-Directed Hierarchy Graph with Node2Vec

This example visualizes a large email communication network as a force-directed hierarchy graph, using a Node2Vec-inspired random-walk embedding to compute node similarities. The view displays color-coded clusters of nodes, with edges connecting related individuals, allowing exploration of community structures within the Enron dataset. Built with D3 v7, it employs `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while zoom and drag interactions are enabled via `d3.zoom` and `drag`. The graph is rendered as SVG, with node colors derived from either precomputed community assignments or k-means clustering on the embeddings.

KKhanin Sisaengsuwanchai
84% match
Loading thumbnail…

Force-Directed Graph hierarchy

A hierarchical force-directed graph displays clustered communities as large nodes, with links connecting them at the top level. Clicking a community navigates to a subgraph of its member nodes, rendered via `d3.forceSimulation`, `forceLink`, and `forceManyBody`. The SVG visualization uses `scaleOrdinal` for node positioning and zoom/pan via `d3.zoom`. Data is parsed from a fetched text file using `parseGraphDataset`, with node and link stroke properties scaled by link weight.

KKhanin Sisaengsuwanchai
80% match
Loading thumbnail…

first level drilldown

This interactive data visualization demonstrates a hierarchical drilldown through a force-directed network layout. Users click nodes to explore deeper levels of a tree structure, with a back button to return to previous views. The rendering is done using SVG elements managed by D3.js, with the graph layout and node interactions handled programmatically. The code uses a bundling approach with React components, and the underlying data structure is loaded from a JSON source via D3’s force simulation algorithms.

DDivyang Soni
80% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
75% match
Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This example displays a hierarchical dataset (flare.json) as a collapsible, force-directed graph. Nodes are rendered as SVG circles, and links as lines, with a color scheme distinguishing leaf nodes, parent packages, and clusters. Clicking a node toggles the visibility of its children, causing the layout to recompute. The visualization uses the `d3.layout.force` API, manually applying constraints in the force `on("tick")` handler to enforce vertical hierarchy and keep nodes within the visible area, while also supporting node dragging.

GGerHobbelt
74% match