Tiado Kollender

@OnkelSam2·4 public vizzes

Fork of Iris Parallel Coordinate Plot

This example displays Fisher’s Iris dataset as an interactive parallel coordinate plot, showing four measurements per flower with colored lines by species. Users can drag any axis to reorder dimensions, which repositions the polylines with animated transitions via `d3.drag` and `transition`. Built with D3 v5, it uses `scalePoint` for axes, `scaleLinear` for each measure, and `line` generators for paths, rendering as SVG with axis labels and a legend.

Jan 3, 2023

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

A parallel coordinate plot visualizes exam data from a CSV file, showing seven numeric and categorical attributes per student, with lines colored by pass/fail status. Users can drag any axis vertically to reposition it, which reorders the columns and dynamically redraws the polylines using d3.line. The axes use d3.scalePoint and d3.scaleLinear with d3.axisLeft, while drag behavior is implemented via d3.drag, and reordering transitions animate the updates over 300 milliseconds. The SVG rendering includes labeled axes, a title, and a color legend.

Jan 3, 2023

Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, letting viewers explore relationships between sepal and petal measurements across three flower species. Using React state, each of the four axes features a dropdown menu that swaps its corresponding attribute, dynamically updating the scales and line data via custom helper functions. The SVG renderings use D3 scales like `scaleLinear` for each dimension and `scaleOrdinal` for species coloring, while a color legend filters lines on hover with opacity modifiers. The code also relies on D3’s `csv` loader and contributes `line` generators for path creation.

Jan 2, 2023

Loading thumbnail…

Fork of D3 Scatter Plot Matrix multiple colors

This example presents a 4×4 scatter plot matrix comparing all numeric fields of the Iris dataset (sepal length/width, petal length/width). Each cell uses colored circles, scaled by d3.scaleLinear and colored by d3.scaleOrdinal with the schemeSet1 palette, to distinguish the three iris species. Data is loaded via d3.csv from a remote gist. Titles appear only on diagonal plots, and axes are rendered with d3.axisLeft and d3.axisBottom, while the SVG matrix is dynamically generated by nested loops.

Jan 2, 2023