Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph hierarchy with drill up & drill down

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.

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
89% 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
88% 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
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
78% 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
78% match
Loading thumbnail…

Fork of Organization Graph Diagram

A fork of an organization graph diagram maps the network of connections within the Kenneth Rainin Foundation. The visualization employs a force-directed layout with nodes sized by hierarchy, distinguishing main, child, and leaf nodes by radius. The code uses d3 v6's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` APIs to simulate physics, rendering nodes, links, and labels as SVG elements. Data and color palettes are defined in separate JavaScript modules, with drag interaction enabling manual node repositioning.

GGalimovRuslan
76% match
Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix of the same network, using d3.forceSimulation, d3.forceLink, and d3.drag to lay out and interact with nodes. Clicking a node highlights its corresponding row and column in the matrix, while the graph’s links are drawn as semi-transparent lines with widths proportional to edge value. The code loads edge data from a CSV file and maps node groups to a fixed color palette, with both views rendered as SVG.

Ssalwa191
76% match