Skip to main content
SimilarExport ZIP
100%

Fork of IRIS

✓ Published0🌍 Public
Ssalwa191
Last edited May 8, 2021
Created on May 8, 2021
Forked from IRIS

A graph visualization shows the connections between a dataset of node pairs, with a grid-based adjacency matrix on the left and a force-directed network on the right. The code uses `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while rectangles are colored by edge presence and circles are colored by degree. The visualization supports zooming and panning, with node colors assigned based on degree quantiles.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of IRIS

This visualization displays a network graph of nodes and links derived from a tab-separated dataset, rendered as an interactive SVG. The code builds an adjacency matrix and visualizes it as a grid of colored rectangles, while a separate force-directed layout using `d3.forceSimulation` positions the nodes and links. Nodes are colored based on their degree, and both the matrix cells and graph nodes respond to click events, though the click handlers only log to the console. The visualization also supports zooming and panning via a zoom behavior.

EELBOUNIAmine
94% match
Loading thumbnail…

Fork of IRISis

This visualization shows a graph of connections between numbered nodes, derived from a dataset of edges, alongside a matrix display of the same adjacency information. The code uses D3 v5 with `d3.forceSimulation` for the force-directed layout, rendering nodes as circles and links as lines in an SVG. Additionally, it displays a matrix of clickable squares where colors indicate linked or unlinked pairs, with node colors assigned by degree ranges. The implementation reads data from a tab-separated file and includes zoom interaction via a translation and scale transform.

EELBOUNIAmine
94% match
Loading thumbnail…

IRIS

This visualization simultaneously displays a network graph and its adjacency matrix for a dataset of 410 nodes and their connections. The matrix on the left shows node connections as black squares, while the force-directed graph on the right uses d3.forceSimulation to position nodes, with colors indicating degree-based classifications. The graph supports zooming and dragging, and clicking on matrix cells or graph nodes logs their identifiers to the console.

Gggh93234999
86% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each flower’s measurements drawn as a colored line across four axes. Users can drag any axis horizontally to reorder the dimensions, which repositions the lines and remaining axes with a smooth transition. The visualization uses D3 v5 APIs such as `scalePoint`, `scaleLinear`, `axisLeft`, `drag`, and `transition`, rendering as SVG with mouse-driven interactions to explore species clustering.

Aa1153724
77% match
Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed node-link diagram with an adjacency matrix for a Dublin contact network. Using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, it simulates node physics, while the matrix encodes link weights as cell opacity. Clicking a node or matrix cell highlights its row and column, and interactions support drag-and-drop and zoom via `d3.zoom` and custom drag handlers. Data comes from an edge list of weighted connections, rendered as SVG circles and lines.

Ssalwa191
77% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the Iris parallel coordinate plot visualizes the classic Iris dataset across four measured attributes: sepal length, sepal width, petal length, and petal width. Each of the 150 samples is drawn as a colored line, with distinct colors assigned to the three Iris species. Users can drag any axis to reorder the attribute columns, and the lines and axes animate smoothly to their new positions using d3’s drag behavior and transitions. The visualization is rendered as SVG, with axes generated via d3.axisLeft and lines constructed using the d3.line generator.

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

Fork of Iris Parallel Coordinate Plot

This fork of an Iris parallel coordinate plot visualizes the classic Fisher iris dataset, encoding four flower measurements as connected lines across vertical axes. Each line represents a single sample, colored by species using a custom `colorMap`, with a legend shown in the corner. Users can drag the axis labels to reorder the dimensions; during the drag, lines and axes are repositioned dynamically, and upon release, a transition smoothly animates them back to their original order. The implementation uses D3 v5's `scalePoint`, `scaleLinear`, `axisLeft`, and `line` generators, with SVG rendering and custom drag interaction handling.

Iianjwo
76% match