potatowedges555

@potatowedges555·3 public vizzes

Iris Scatter Plot_0713316

This interactive scatter plot visualizes the classic Iris dataset, which contains measurements of sepal and petal dimensions for three species of iris flowers. Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus, allowing exploration of relationships between any pair of the four measurement features. The visualization renders as an SVG using D3 v5 for scales and axes, while React manages the state and component structure for the interactive controls. Points are color-coded by species using a d3.scaleOrdinal with distinct colors, and each point includes a tooltip showing its exact value.

Jan 28, 2021

Loading thumbnail…

Iris Parallel Coordinates

This interactive visualization displays the classic Iris dataset using parallel coordinates, with each line representing a flower sample across four continuous measurements. The lines are colored by species, and a legend identifies the three classes. The visualization uses D3 v3’s `d3.svg.axis`, `d3.scale.ordinal`, and `d3.svg.line` to render the axes and polylines in SVG. Users can drag axes to reorder dimensions, and the foreground lines update dynamically while the background context lines are hidden during the interaction.

Oct 22, 2020

Loading thumbnail…

Iris Scatter Plot 0516017

This interactive scatter plot visualizes Fisher's Iris dataset, displaying the relationship between two flower measurements (from sepal length/width and petal length/width) as colored points representing the three Iris species. Users can dynamically switch which measurement appears on the x- and y-axes via dropdown menus rendered in HTML. The visualization uses D3 v5 to create an SVG canvas, with `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.scaleOrdinal` to map species to semi-transparent red, green, and blue fill colors. The code rebuilds the plot from scratch whenever an axis selection changes, removing all SVG elements and re-rendering from the source CSV data.

Oct 6, 2020