Skip to main content
SimilarExport ZIP
100%

Fork of GraphLayout (zoom)

✓ Published0🌍 Public
AAlbert
Last edited Mar 18, 2021
Created on Mar 18, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of GraphLayout

A force-directed graph layout rendered as an SVG uses node positions from a CSV file and edge connections from a second CSV file. Each node is a circle colored by a categorical `k` value using a `scaleOrdinal` with the `schemeRdYlGn` color scheme. The visualization supports zooming through the `d3.zoom` behavior, which applies a transform to the graph group. D3 v5 loads the data with `csv` and appends `line` and `circle` elements to the SVG.

EELBOUNIAmine
87% 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
83% match
Loading thumbnail…

Fork of D3 Forces - ZOOM

This example shows a small directed graph with two nodes and one link, rendered as SVG shapes whose positions are driven by D3's force simulation. It demonstrates zooming and panning interactions, along with different node styles (gray and green circles) and a thick link line. The code is implemented using `d3.forceSimulation`, `forceManyBody`, `forceCenter`, `forceLink`, `drag`, `zoom`, and `symbol` from D3 v3, with data defined in `data.js` and the graph logic in `forceGraph.js`.

Rrobinjohn.inc@gmail.com
80% 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
80% match
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
78% match
Loading thumbnail…

Fork of Force Directed Graph

This example displays a force-directed graph of 410 nodes with 5 color-coded groups, alongside an adjacency matrix visualization rendered as a separate SVG. The force layout uses `d3.forceSimulation` with link, charge, and center forces, while nodes are draggable and the view supports zooming. The adjacency matrix is built with `d3.scaleBand` axes and colored rects reflecting node groups. Both visualizations update together, with node IDs matching between the graph and matrix.

ZZhou180
78% match
Loading thumbnail…

Fork of Network Graph

This visualization uses D3’s force simulation to position a network of labeled nodes connected by curved, arrow-tipped edges. The graph is rendered as SVG circles and text, with a semi-transparent node fill and a green background. A d3.zoom behavior allows pan and zoom, while the simulation applies charge, collision, and link forces to lay out the nodes. The code imports node and link data from a dummyData module, and updates the graph on each simulation tick.

Ssrividyamadas@gmail.com
77% match