Skip to main content
SimilarExport ZIP
100%

Fork of GraphLayout with Interactive Filtering

✓ Published0🌍 Public
Llimenzi
Last edited May 18, 2021
Created on May 18, 2021

This interactive graph layout demonstrates filtering of connected nodes using d3.forceSimulation, forceLink, and forceManyBody to position nodes with color-coded clusters. A color legend and check button allow users to select specific node groups by clicking legend circles or toggling layer display, which triggers node resizing and edge visibility updates. The visualization uses precomputed x, y, and k coordinates from CSV data, rendered as SVG circles and lines with animated transitions lasting one second.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

A force-directed graph layout visualizes network data from two CSV files, with nodes colored by a category value. Interactive filtering lets users click a legend to highlight nodes of selected categories, and a check button toggles edges between nodes of different categories. The visualization uses `d3.forceSimulation` with `forceLink` and `forceManyBody` for layout, and implements drag-and-drop node interaction with `d3.drag` and animated transitions in SVG.

Ssalwa191
90% match
Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

This interactive network graph visualizes a dynamic dataset of nodes and edges, rendered as SVG circles and lines, with a color legend and a "分层显示" toggle button for filtering by category (`d.k`). Built with D3 v5, it uses `d3.forceSimulation` with link and many-body forces to animate node positions via the `on('tick')` callback, and applies a sequential color scale from `schemeRdYlGn`. Clicking legend entries or the checkbox triggers a re-render that adjusts node visibility and edge opacity, while drag behavior is handled through a custom `d3.drag()` plugin. Data is loaded from CSV files.

HHariprashanth75
90% match
Loading thumbnail…

GraphLayout with Interactive Filtering

This interactive graph layout visualization displays a network of domains, IP addresses, certificates, and ASN relationships. Users can filter edges by clicking on horizontal bar charts in a scrollable sidebar, which highlights or dims corresponding links in the force-directed graph. The visualization uses d3.forceSimulation for layout, with interactive filtering controlled through custom SVG components and a drag-based slider that adjusts edge strengths. Node and edge colors are mapped via d3.scaleOrdinal based on hierarchical categories.

EEdward-Elric233
83% match
Loading thumbnail…

Fork of Force Directed Graph

This example presents a force-directed graph alongside its adjacency matrix, allowing for the exploration of network connections through two complementary views. Clicking a node in the graph highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights the associated edge in the graph. The visualization uses d3.forceSimulation for layout, d3.forceLink for edge constraints, and d3.forceManyBody for repulsion, rendering with SVG. Nodes are colored by group and support drag interactions, while a d3.zoom transform enables panning and scaling. Data appears to be loaded from CSV or TSV sources.

EELBOUNIAmine
80% match
Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix, both rendered in SVG using D3 v6. The force layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while nodes are colored by group and draggable. Clicking a node highlights its corresponding row and column in the matrix, and vice versa, using shared link IDs. The data comes from preprocessed edge lists with weighted values, and zooming is enabled via `d3.zoom`.

Mmalipieroproject
80% 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
80% match
Loading thumbnail…

Fork of Force Directed Graph Starter

This example demonstrates a simple force-directed graph visualization using D3.js. It shows three circular nodes connected by two links, representing a small network of relationships. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes dynamically. Data is loaded from a CSV file containing movie information, though the current implementation focuses on the basic graph structure. The visualization renders using SVG elements, with circles for nodes and lines for links, updating their positions on each simulation tick.

KKyle?
80% match
Loading thumbnail…

Fork of Force Directed Graph

A fork of a force-directed graph compares node-link and adjacency-matrix views of a network. Clicking a node in the graph, or a cell in the matrix, highlights the corresponding row and column or links. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter, while the matrix renders as SVG rectangles scaled by edge weight. Both views support zooming and dragging via d3.drag and d3.zoom, with node colors mapping to group values.

EELBOUNIAmine
79% match