Iris

100%

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Mar 22, 2016

An iris of radiating lines animates over a black background, adjusting its pupil shape and eyelid blinks through user-controlled dat.GUI buttons. The SVG rendering uses D3.js v3.5.5 to construct layered ray paths, with CSS `transform` operations controlling rotation, translation, and scaling order. Interactive controls trigger random, round, alien, cardioide, and radioactive pupil variants, while eyelids and a terminator effect respond to preset timers. The visualization demonstrates how transform sequencing affects composite motion.

AI-generated description

Playing with order influence between CSS::transform::rotation/translate/scale

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v3.5.5)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='http://workshop.chromeexperiments.com/'>dat.gui</a> (v0.5.1)

mit Licensed

Similar vizzes

Loading thumbnail…

Iris

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select the x and y axes from dropdown menus, and the points animate smoothly to their new positions with staggered transitions. The visualization encodes the three Iris species with red, green, and blue semi-transparent circles. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to handle scaling, axes, and animated updates when the selected columns change.

ZZeroKurosakii

77% match

Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Iianjwo

75% match

Loading thumbnail…

Iris

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while styling each circle with a color-coded species (orange, green, or brown). The code also encodes sepal dimensions by distorting each circle’s rx and ry attributes, creating ellipse-like shapes whose horizontal and vertical radii reflect sepal length and width. Built with D3 v6, it loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes via `d3.axisLeft` and `d3.axisBottom`. Circles are appended as SVG elements with custom fill, radius, and elliptical attributes.

Ssri7harsha

75% match

Loading thumbnail…

Iris

This interactive scatterplot visualizes the classic Iris dataset, allowing users to compare any two measured features (sepal/petal length and width) via dropdown menus. D3 v7 axes and scales update with animated transitions when a new axis is chosen. Circles are color-coded by iris species, with a legend showing the three classes. The data is loaded from a CSV using `d3.csv`, and the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for smooth updates.

ZZeroKurosakii

75% match

Loading thumbnail…

Iris

This example visualizes the classic Iris dataset as a scatter plot, with dropdown menus that allow the user to select which of the four flower measurements appears on the x-axis and y-axis. Clicking the confirmation button updates the chart, recalculating the linear scales and redrawing the circles. The SVG rendering is built with React and D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Points are colored by species (red, green, blue) and the chart includes labeled axes and gridlines.

ZZhou180

75% match

Loading thumbnail…

Untitled

This interactive parallel plot visualizes the Iris dataset, displaying four flower measurements across parallel vertical axes. Each line represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a viridis palette. Hovering a line triggers a d3 transition that dims all other lines to light grey and reduces their opacity to 0.2 while highlighting the selected species in full color. The visualization uses d3.scaleLinear for each dimension, d3.scalePoint for axis positioning, and d3.axisLeft for tick rendering, with SVG paths created via d3.line.

114Hazel

75% match

Loading thumbnail…

Fork of Ep. 10 Idempotent Scatter Plot (Animated)

This animated scatter plot cycles through four Iris flower measurements (sepal and petal length/width) as the x-axis variable while keeping sepal length on the y-axis, updating every five seconds. It uses D3's scaleLinear, scaleOrdinal, axisLeft, axisBottom, and transition APIs to smoothly interpolate circle positions and axis scales over one-second durations. The visualization loads the classic Iris dataset from a GitHub gist via d3.csv, renders 150 colored circles (one per species) in SVG, and uses a CSS hover rule to enlarge points on mouseover.

Ddanheavern

75% match

Loading thumbnail…

Untitled

An interactive scatter plot visualizes the Iris dataset, showing sepal and petal measurements for three iris species. Users select which features appear on the x- and y-axes via dropdown menus, and the plot updates with a staggered 500-millisecond circle transition. Built with D3 v5, the SVG render uses `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Circles are color-coded by species, and the axes and title update dynamically based on the selected attributes.

AAmanda-Tai

74% match