Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Rrobinjohn.inc@gmail.com
Last edited Jul 15, 2024
Created on Jul 15, 2024

This interactive force-directed graph visualization enables hierarchical exploration of the Les Misérables character network and email-Eu-core datasets. Users can drill down into community clusters or drill up to view higher-level groupings, with the graph layout recalculating at each level. The implementation uses d3.forceSimulation for physics-based node positioning, d3.zoom for pan and zoom capabilities, and dynamically loads network data from remote text files. SVG rendering displays nodes and links, with community membership encoded through node colors. The drill-up/drill-down navigation relies on a stack-based data structure that stores previously viewed hierarchical levels.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
93% match
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
87% match
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
84% match
Loading thumbnail…

Fork of Relation Graph with d3-force

This example shows a force-directed network graph of relationships between characters in Les Misérables, with nodes colored by group and sized by link value. Users can drag nodes to reposition them and zoom into the graph using their mouse or trackpad. The visualization is built with d3-force’s forceSimulation, forceLink, forceManyBody, and forceCenter, along with d3’s zoom and drag behaviors. Data is loaded as JSON from a GitHub gist, and all elements are rendered as SVG.

JJames Bradbury
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…

Fork of Relation Graph with d3-force

This visualization shows the network of character co-appearances in Les Misérables as a force-directed graph, with nodes colored by group using d3.schemeCategory10 and links weighted by interaction frequency. The graph supports interactive dragging of individual nodes via d3.drag, and users can zoom and pan the entire view using d3.zoom with a scale range up to 8x. The simulation is computed with d3.forceSimulation, combining forceLink, forceManyBody, and forceCenter, while the SVG rendering updates node positions on each tick. Data is loaded asynchronously from a JSON file containing the Miserables dataset.

VVictor Lorena
79% match
Loading thumbnail…

Fork of Force-Directed Graph click

A force-directed network graph visualizes character co-appearance data from *Les Misérables*, parsed from a plain-text edge list. Clicking a node reveals its label and updates the visualization, while clicking it again resets the view. The SVG rendering uses `d3.forceSimulation` with link, charge, and center forces, plus `scaleLinear` to map link weights to stroke width and opacity. Custom click, mouseover, and mouseout handlers control label visibility, and a `d3.zoom` behavior supports panning and scaling.

KKhanin Sisaengsuwanchai
79% match