wei

@weiniii·8 public vizzes

Fork of Iris Parallel Coordinate Plot

This fork of a parallel coordinate plot visualizes the classic Iris dataset, with each of the 150 samples drawn as a polyline across four axes (sepal length, sepal width, petal length, petal width) and colored by species. Built with React and D3 v5, it uses `scalePoint` for axis positioning and `scaleLinear` for the value axis. Users can drag any axis label horizontally to reorder the dimensions, causing the polylines and axes to smoothly animate to their new positions via D3’s `transition` method. A side legend maps the three Iris species to their distinct colors.

Oct 12, 2022

Loading thumbnail…

Menu of Scatter plot

This interactive visualization displays the classic Iris dataset using scatter plots, with dropdown menus allowing users to select which numeric attributes appear on the x- and y-axes. The points are colored by species, and the scatter plot animates point transitions when the axes change, with circles moving to their new positions over time. The visualization is built with D3 v6, using `d3.csv` for data loading, `d3.scaleLinear` for axes, and D3 transitions for smooth animations. SVG rendering is used throughout, with the menu system implemented as a custom reusable D3 component.

Sep 17, 2022

Loading thumbnail…

Text Bowl of Fruit

A bowl of fruit is visualized as animated, color-coded circles labeled with text, with apples in red and lemons in yellow. The example demonstrates data joins and transitions with D3 v6, using `scaleOrdinal` for color and radius mapping, `selection.enter` and `selection.exit` for element updates, and chained `transition().duration()` calls to animate circle radius and position changes over time. The SVG rendering includes a rounded rectangle bowl and centered text labels that follow each fruit's movement.

Sep 17, 2022

Loading thumbnail…

Bowl of Fruit

Five pieces of fruit sit in a row, with apples and lemons distinguished by red and yellow fills and differing radii. The animation shows apples being eaten, a lemon replacing an apple, and another apple disappearing. The piece is built with D3 v6, using `scaleOrdinal` for colors and radii, and `transition().duration(1000)` to animate circle attributes. SVG circles are appended, merged, and removed via `selection.selectAll` and the `fruitbowl` function.

Sep 17, 2022

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across 150 individual flowers. Each circle represents one sample, with its position determined by these two measured attributes while a green, semi-transparent fill makes overlapping points visible. The visualization is built using D3 v6, loaded via UNPKG, and rendered as SVG. Code imports functions like `scaleLinear`, `axisLeft`, and `axisBottom` from the D3 module to construct the axes and scales. Data is loaded from a local CSV file using D3’s `csv` method.

Sep 17, 2022

Loading thumbnail…

Scatter 1- plot

This scatter plot displays the sepal length of individual iris flowers along the x-axis, grouped by species on the y-axis. The visualization uses D3 v6 to load CSV data and render an SVG with axes, gridlines, and circular marks. It employs `d3.scaleLinear` for the continuous length scale, `d3.scalePoint` for the categorical species axis, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes. The Iris dataset is loaded via `d3.csv`, with sepal_length parsed as numeric values.

Sep 17, 2022

Loading thumbnail…

Bar chart

This bar chart visualizes the sepal lengths of 150 iris flowers, with each bar representing one sample and colored a uniform steel blue. Values are plotted along a linear x-axis, while the y-axis categorizes flowers by species class. The chart is rendered as an SVG using D3 v6, and the code relies on `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to construct the axes and bars. Data is loaded from a local `data.csv` file.

Sep 16, 2022

Loading thumbnail…

Smile

A yellow smiley face with black-outlined features is drawn using D3.js v6. The SVG face has two circular eyes and a mouth formed by an annular arc path, with rectangular eyebrows that animate downward and back upward over a two-second transition. The code builds the face by positioning circles, rects, and an arc path relative to the SVG center, and relies on D3’s `transition` API to create the eyebrow movement. The animation is rendered in an SVG.

Sep 16, 2022