hw1

100%

✓ Published0🌍 Public

Last edited Sep 23, 2023

Created on Sep 18, 2023

This interactive scatterplot displays the Iris dataset, with each flower plotted as a semi-transparent circle colored by species. Dropdown menus allow switching which quantitative variable appears on each axis, while a click triggers a staggered animation as the circles transition to their new positions. The visualization is built with D3 v5, using `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `transition().duration()`. Animated updates render in SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

109550187_HW1

This interactive scatterplot displays the Iris dataset, plotting 150 flowers with selectable axes for the four measured features (sepal and petal dimensions). A drop-down menu encodes a categorical color scale for the three Iris species, while the circles animate and reposition at a fixed radius as the user changes the x or y axis. Built with D3 version 7, the visualization uses `select` chains, `scaleLinear`, `transition`, and the `menu` module’s change event to update the plot. The SVG rendering honors the displayed data from the included CSV file.

Ppatricknicholas27@gmail.com

91% match

Loading thumbnail…

Fork of DataVisualization HW1 - Scatter plot

This interactive scatter plot displays the Iris dataset, letting users compare any two numeric flower measurements via dropdown menus. The visualization colors each point by iris species and includes a legend. Built with D3 v5, it uses scaleLinear for axes, scaleOrdinal with schemeCategory10 for coloring, and d3.csv to load the data. The circles animate into place using a 2-second transition with staggered delays, rendered as SVG elements.

AAlextien

89% match

Loading thumbnail…

HW1 Scatter Plots for Iris

This interactive scatter plot explores the Iris dataset, letting users compare any two of the four flower measurements via dropdown menus. The chart renders 150 species-classified points with a D3 transition that animates them from the center to their positions on the axes, which update smoothly with each selection. Using D3 v7 scales and axes, it draws an SVG with colored circles for each Iris class and includes a legend for identification. The visualization demonstrates the distribution and clustering of the three species across different feature combinations.

TTrista Lee

89% match

Loading thumbnail…

original version of hw1_scatter_plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as sepal and petal length and width. Users can select which attributes to plot on the x and y axes via dropdown menus. Each of the three Iris species is represented by a distinct colored circle, with a legend on the right identifying the categories. Built with D3.js v5, the visualization uses `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` to render ticks, loading data from an external CSV file.

Cchingching17

89% match

Loading thumbnail…

HW1 : Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal length and width for three species. Users select axes from dropdown menus and confirm their choices to update the visualization, which uses colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica. Built with D3 v5, the code employs d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render axes and SVG circles, with data loaded from a local CSV file.

LLSAWB

89% match

Loading thumbnail…

Iris_HW1

This interactive scatter plot of the Iris Dataset allows users to choose which flower attributes appear on the x- and y-axes via dropdown menus. The visualization renders circles for each iris sample using SVG, with axes and ticks generated by custom components that leverage `d3.scaleLinear` and `d3.extent`. The code uses `d3.csv` to load data from a remote URL and defines tick marks with `AxisBottom` and `AxisLeft` components. The chart's marks include tooltips, and the UI is built with React and `react-dropdown`.

JJoshuoYang

89% match

Loading thumbnail…

hw1

This interactive scatterplot visualizes the Iris dataset, displaying flower measurements selected via radio buttons for both the X and Y axes. Users can switch between sepal length, sepal width, petal length, and petal width to explore relationships among the 150 samples. The code uses D3.js scaleLinear and extent functions to map data coordinates, with axes rendered using axisLeft and axisBottom. Radio button events trigger re-rendering of the SVG visualization, updating the circle positions accordingly.

Yyihsuan

88% match

Loading thumbnail…

HW01-Iris

This interactive scatterplot of the classic Iris dataset allows viewers to explore relationships between sepal and petal measurements by selecting any pair of features for the x- and y-axes via radio buttons. The plot displays 150 flowers, color-coded by species, with semi-transparent circles rendered as SVG. The visualization dynamically updates using D3.js scales and axes, and it redraws responsively on window resize. Data is loaded from a CSV file, and species-specific colors are applied through CSS classes.

YYang Shun Yu

88% match