Fork of GraphLayout with Interactive Filtering

100%

Fork of GraphLayout with Interactive Filtering

✓ Published0🌍 Public

Last edited May 6, 2021

Created on May 6, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

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.

Llimenzi

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…

Fork of Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to compare two representations of the same graph data. Clicking a node in the diagram highlights the corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. The code uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `drag`, and `zoom` for interactive layout, while rendering SVG elements for both views. The graph data is loaded from external CSV and edge files, with node colors mapped by group.

Ssalwa191

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

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

82% 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…

Force Directed Graph

A force-directed graph visualizes relationships among nodes in a network, with circle size reflecting group membership and link thickness indicating connection weight. The example loads CSV data from an external source and renders an interactive SVG where users can drag nodes, zoom, and click to highlight connected rows and columns in an accompanying adjacency matrix. It uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for layout, with `d3.drag` and `d3.zoom` for interaction. The code also employs `d3.csv` for data parsing and builds the matrix using SVG rectangles and text elements.

Cchungmin-yu

79% match

Loading thumbnail…

Fork of Visualization of Spatial Data - Network Graph

This example presents two linked visualizations of an organizational hierarchy from a CSV file. On the left, a tree diagram displays the reporting structure using `d3.tree` and `d3.linkHorizontal`. On the right, a force-directed network graph, built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, shows the same data as an interactive layout. Nodes can be dragged, and the network updates in real time.

Sshailajat1998@gmail.com

79% match