masangar

@mvhispanico·3 public vizzes

Fork of Iris parallel coordinate plot

This example presents a parallel coordinate plot of the classic Iris flower dataset, coloring each line by species (setosa, versicolor, virginica) to reveal multidimensional patterns. Users can drag the axis labels to reorder dimensions, prompting the bundled polylines to animate smoothly into new positions via `d3.drag()`. Hovering any line highlights its entire species group while dimming others through CSS opacity transitions. The visualization is built with D3 v4, using SVG elements and `d3.line()` to generate the paths from the CSV data.

Apr 1, 2021

Loading thumbnail…

Iris Parallel Coordinate Plot

This parallel coordinate plot visualizes the classic Iris dataset, displaying 150 flowers across four morphometric traits. Each colored line represents an individual sample, with distinct hues for the three species: setosa (orange), versicolor (teal), and virginica (purple). The visualization uses D3.js v5 with an SVG renderer, employing `d3.scalePoint` for axis positioning and `d3.scaleLinear` for trait values. Users can drag axis labels to reorder dimensions, triggering a smooth transition animation via D3’s `.transition().duration(300)`. A dropdown selector toggles the y-axis range between a global union (`[0,8]`) and per-dimension self-scaling computed from the data extent.

Nov 7, 2020

Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates chart explores USDA nutrient data for thousands of foods across 14 nutritional dimensions, colored by food group. Users brush axes to filter, drag labels to reorder or invert axes, and remove axes by dragging to the edge. The visualization uses D3.js for axes, brushing, and SVG rendering, while Canvas layers handle background, foreground, and highlighted line drawing for performance.

Nov 7, 2020