Force-Directed Graph hierarchy

100%

Force-Directed Graph hierarchy

✓ Published1🌍 Public

Last edited Jun 8, 2023

Created on Jun 8, 2023

Forked from Fork of Force-Directed Graph click

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.

AI-generated description

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to show the connections and community structure in a social network. The node-link diagram uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, which can be dragged and zoomed. Clicking a node or a matrix cell highlights the corresponding row and column in the matrix and the connected links in the graph. The adjacency matrix uses custom `rect` elements to represent edge weights, with colors mapping to node groups.

JJasonYeong0821

82% match

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda

81% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang

81% match

Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775

81% match

Loading thumbnail…

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

ZZhou180

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

81% match

Loading thumbnail…

Force Directed Graph

A force-directed graph shows the network structure of nodes and links, with each node colored by group and links weighted by value. Clicking a node highlights all connected links in red and simultaneously highlights the corresponding row and column in an adjacent adjacency matrix, where cell opacity reflects link weight. The implementation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, renders nodes as SVG circles with drag and zoom support, and loads data from a `.edges` file.

Yyixinxu2020

80% match