Fork of IRISis

100%

Fork of IRISis

✓ Published0🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

Forked from IRIS

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.

AI-generated description

A bare minimum HTML page.

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

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

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

Loading thumbnail…

Fork of Iris Scatter Plot

This scatter plot visualizes the sepal length and width of Iris flowers from a CSV dataset. The visualization uses D3.js scaleLinear functions to map data to SVG coordinates within a React application. Axis components render tick marks and labels, while circular marks represent individual data points with tooltips. The code styles elements using CSS, including custom fonts and a teal color for the marks, and implements responsive loading with a "Loading..." indicator.

SSam Hege

76% match

Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Vvamshisoletii

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

76% match