Skip to main content
SimilarExport ZIP
100%

Fork of GraphLayout with Interactive Filtering

✓ Published0🌍 Public
HHariprashanth75
Last edited Apr 11, 2021
Created on Apr 11, 2021

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.

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

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…

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 GraphLayout

This visualization displays a network graph with nodes colored across a red-yellow-green ordinal scale based on a categorical value in the data, while edges connect the nodes to reveal clustering patterns. The code loads node positions and edge lists from separate CSV files, then renders circles and lines as SVG elements. It utilizes d3.scaleOrdinal with schemeRdYlGn for coloring, and includes a zoom behavior that applies transforms to the graph group for interactive panning.

Ppauldbayes@gmail.com
82% match
Loading thumbnail…

Fork of GraphLayout

A fork of a graph layout example renders a node-link diagram from imported CSV data, using D3.js v5 to position circles and connecting lines within an SVG canvas. The nodes are colored according to a categorical variable `k` from the data, using an ordinal color scale with a reversed RdYlGn scheme. The visualization supports zoom and pan interactions through a zoom handler that updates the SVG group's transform. The graph structure is defined by separate input and output CSV files containing edge connections and node coordinates.

MMarcelo
80% match
Loading thumbnail…

Fork of GraphLayout (zoom)

This fork of the GraphLayout example displays a zoomable, force-directed graph using D3.js v5. Node positions come from a CSV file and are drawn as colored circles on an SVG canvas, while edges are rendered as lines. The node color encodes a categorical `k` value via `d3.scaleOrdinal` with a `schemeRdYlGn` color scale. Users can interact with the graph using the `d3.zoom` function to pan and scale the layout.

AAlbert
80% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
79% match
Loading thumbnail…

Fork of Network Graph

Four labeled nodes form a small network of three connected links, rendered in SVG and fully interactive through mouse dragging. The graph uses `d3.forceSimulation` with link, charge, and center forces to position nodes, while a `d3.drag` handler lets users move nodes and update their fixed positions. Elements are drawn with D3 selections, appending `line` and `g` elements whose coordinates are updated on each simulation tick. The code relies on D3 v7's `forceLink` and `forceManyBody` APIs, with text labels placed relative to each node.

KKhanin Sisaengsuwanchai
79% match