Fork of Fork of Bowl of Fruit - Hover to Select

100%

Fork of Fork of Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Sep 30, 2022

Created on Sep 30, 2022

Forked from Fork of Bowl of Fruit - Hover to Select

This interactive scatterplot displays the classic Iris dataset, showing sepal length against sepal width for three flower species. A side panel of eight clickable buttons lets users select an X or Y axis variable, with selected buttons highlighted in blue. The visualization uses d3.v5's `select`, `scaleLinear`, and `axisBottom`/`axisLeft` functions to render the plot, while a custom `buttonPanel` component manages the button interactions. Data is loaded from a local CSV file, and the scatter points are animated transitions using d3's `.transition()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plots of Iris Dataset

This interactive scatter plot displays the classic Iris dataset, showing sepal and petal measurements for three flower species. Users select which features appear on the x- and y-axes via a custom button panel, and the visualization updates accordingly. The code uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render axes, with circles colored by species. Data is loaded from a CSV file and rendered as SVG elements, with the button panel implemented as reusable D3 functions.

WWasanta Pruttisarikorn

90% match

Loading thumbnail…

Fork of Scatter Plots of Iris Dataset

WWasanta Pruttisarikorn

90% match

Loading thumbnail…

Fork of Fork of Fork of Scatter Plots of Iris Dataset

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. A clickable button panel on the right selects which of the four features (sepal length, sepal width, petal length, petal width) is plotted on the x- and y-axes, updating the chart dynamically. The plot uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and renders 150 semi-transparent circles colored by species (setosa, versicolor, virginica) in blue, green, and orange. The legend and button panel are drawn with SVG elements, and the underlying data comes from the classic `iris.csv` file.

Jjessica403420@gmail.com

89% match

Loading thumbnail…

Fork of Fork of Scatter Plots of Iris Dataset

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between any two of its four features (sepal length, sepal width, petal length, and petal width) for three flower species. Users select the x-axis and y-axis feature via a custom button panel, which triggers d3 v5 to update the chart. The SVG render displays semi-transparent colored circles representing each species, with axis labels and a legend. The code uses d3.csv to load data, scaleLinear for scales, and axisBottom and axisLeft with gridlines to build the plot.

PPoojaThandra

88% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which measurement appears on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while data points are drawn as SVG circles with color-coded species and an accompanying legend. When the axes change, the circles smoothly transition to their new positions using D3's `transition()`.

HHaowenWeiJohn

88% match

Loading thumbnail…

Fork of Debug

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. Clickable buttons select which two features appear on the x- and y-axes, highlighting the chosen dimensions in the control panel. The visualization uses D3 v5’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with points colored by species (setosa, versicolor, virginica). Data loads from a CSV file containing 150 samples.

Vvegetable.c@nycu.edu.tw

88% match

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how sepal and petal measurements relate across three flower species. Users select which measurement maps to the X and Y axes via dropdown menus, with points color-coded by species and animated transitions when selections change. Built with D3 v5, it uses `csv()`, `scaleLinear()`, `axisBottom()`, `axisLeft()`, and `transition().duration()` to render SVG circles and axes.

Aalan489671

88% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically select which sepal or petal measurements to plot on the x- and y-axes via dropdown menus. Dots representing individual flowers are color-coded by species (setosa, versicolor, virginica). The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and employs smooth `transition().duration(1000)` animations to transition points between axis configurations.

Nnutmegsashimi

88% match