Skip to main content
SimilarExport ZIP
100%

Fork of GraphLayout

✓ Published0🌍 Public
MMarcelo
Last edited Apr 17, 2021
Created on Apr 12, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
88% 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
87% 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 Organization Graph Diagram

This fork of an organization graph diagram visualizes relationships within a dataset, using an interactive node-link layout to show connections between entities. Built with React and D3 v6, it relies on a force-directed simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`) to position nodes and links, with draggable nodes and color-coded clusters. The SVG rendering displays circles and connecting lines, with link labels placed at midpoints. The underlying data comes from a CSV file containing node IDs and weighted adjacency pairs.

JJediquu
79% 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
79% 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
78% match
Loading thumbnail…

Fork of Network Graph

This fork of a network graph visualizes a hierarchical node-link structure on a dark canvas. It uses the `d3` library's deterministic simulation toolkit, specifically `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide`, to position nodes. The example reads node data from a CSV file and employs Canvas rendering for the visualization. Nodes are color-coded and sized according to their position in the hierarchy, with the root and key nodes highlighted in distinct colors.

EELBOUNIAmine
77% match