Fork of IRIS

100%

✓ Published0🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

Forked from 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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

96% match

Loading thumbnail…

Fork of 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.

Ssalwa191

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

79% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

Bbart

77% match

Loading thumbnail…

Fork of Social Network Graph ICE-8

This graph visualizes a small social network where nodes represent people and links show friendship relationships. Built with D3.js and React, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. The SVG rendering includes cyan circles with green arrow markers on links, and supports drag interactions plus hover highlighting via the `nodeHover` CSS class. Data comes from an external `data.json` file containing node groups and link relationship attributes.

Ssathwikrajidi

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

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

77% match