Force-Directed Hierarchy Graph with Node2Vec

100%

Force-Directed Hierarchy Graph with Node2Vec

✓ Published0🌍 Public

Last edited Aug 14, 2023

Created on Jul 18, 2023

Forked from Force-Directed Graph hierarchy with drill up & drill down

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.

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

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

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

79% match

Loading thumbnail…

Fork of Email Enron Large Network

This example visualizes a large email network from the Enron corpus using a force-directed graph rendered on a Canvas element. Nodes represent email addresses and links represent email exchanges, with node colors indicating party affiliation. The layout is computed with `d3.forceSimulation` and forces including `forceManyBody`, `forceCollide`, and `forceLink`, while user interaction enables dragging via `d3.drag`. Data is loaded from a CSV file, and rendering occurs on a 900x900 canvas with explicit draw functions.

PPeter Simeth

79% match

Loading thumbnail…

Force-Directed Graph V2

This force-directed graph maps a network of arts organizations and their related projects, with nodes grouped into four color-coded clusters and connected by weighted links. The visualization uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while a drag interaction lets users move nodes and restart the simulation. Node sizes vary by hierarchy level, and labels appear directly on nodes as SVG text. Data is generated programmatically in `data.js`, with link distances and node styling defined per connection.

Sschneich

77% match

Loading thumbnail…

Email Enron Large Network

A large Enron email network is visualized as a force-directed graph on a canvas. Nodes represent email addresses, and edges show communication links, with colors distinguishing parties. The layout is computed using d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink forces, while drag interactions let users reposition nodes. Data is loaded from a local CSV file via d3.csv.

Vva1337n

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

77% match

Loading thumbnail…

Gist 8989f184ab98d1e190581e18829af3be

This example shows a force-directed graph of email communications, revealing clusters of senders and recipients by their connection strength. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` to manage edges, while a Canvas `getImageData` pixel readout colors nodes by their local density. The graph is drawn on a 2D canvas, with node size and color encoding degree centrality and community membership. Data is loaded from an external edge list, and the simulation runs continuously with a fade-in transition via `transition.attrTween` on opacity.

CConorAspell

76% match