Skip to main content
SimilarExport ZIP
100%

HW1_Scatter Plot

✓ Published1🌍 Public
JJames Huang
Last edited Sep 22, 2023
Created on Sep 21, 2023

This interactive scatter plot explores the classic Iris dataset, displaying measurements such as petal length and sepal width as colored circles representing species. Users can switch the X and Y axes via dropdown menus to compare any pair of attributes, while hovering over the color legend highlights points from a selected species and fades the rest. The visualization is built with React and D3 v5, rendering SVG marks and axes using components like `AxisBottom`, `AxisLeft`, and `Marks`, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Data is loaded asynchronously via D3’s `csv` function.

AI-generated description

312554037_Data Visualization and Visual Analytics_HW1_Scatter Plot

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

HW1 Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three flower species. Users can dynamically switch which measurements appear on the x and y axes using dropdown menus. The visualization uses D3 scales and axes for data mapping, while React manages the component state and UI controls. Points are rendered as colored circles in SVG, with a legend indicating species assignments. The code follows the React & D3 pattern where React handles the interface and D3’s selection methods update the SVG elements.

YYang Shun Yu
93% match
Loading thumbnail…

HW1_test

This interactive scatter plot visualizes the classic Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can explore relationships between any two numerical attributes using dropdown menus to select variables for the x and y axes. The visualization uses React components with D3 v5 scales and SVG rendering, implementing custom AxisBottom and AxisLeft components along with colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica specimens.

Ping-Yu Yang
92% match
Loading thumbnail…

HW1 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four numeric attributes by selecting which ones appear on the x- and y-axes via React dropdown menus. Each point represents a flower, colored by species according to a d3.scaleOrdinal mapping. The visualization uses React components to render SVG elements, with d3.scaleLinear for axes and d3.extent for domains. The code loads data from a CSV file using d3.csv and renders custom axis components with tick marks.

EEast007
92% match
Loading thumbnail…

HW01-Iris

This interactive scatterplot explores the classic Iris dataset, displaying the relationships between sepal and petal measurements. Users can select any combination of the four attributes for the X and Y axes using radio buttons, and the visualization updates accordingly. The three Iris species are distinguished by color: purple, magenta, and indigo, with a legend shown above the chart. Built with React and D3.js (d3.scaleLinear, d3.axisBottom, d3.axisLeft), the SVG plot is rendered dynamically and responds to window resizing. Data is loaded asynchronously from a CSV file via d3.csv.

YYang Shun Yu
92% 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
91% match
Loading thumbnail…

HW1_Iris

This interactive scatterplot displays the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting attributes for the x- and y-axes via ReactDropdown. Points are colored by species using d3.scaleOrdinal, with a legend that highlights one class on hover. The visualization uses React and d3.v5, rendering circles as SVG marks with d3.scaleLinear axes. Hovering over legend items filters the plotted circles’ opacity, while built-in tooltips show exact values.

SSandyWu7179290504
91% 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
91% match
Loading thumbnail…

HW1_Iris

An interactive scatterplot of Fisher's Iris dataset lets users explore relationships between sepal and petal measurements by switching the X and Y axes via dropdown menus. Species are encoded by color, with a legend that filters the displayed points on hover. The visualization is rendered as an SVG using React and D3 v5, employing D3's `scaleLinear` and `scaleOrdinal` scales for axes and color, along with D3's `extent` for domain calculation.

SSandyWu7179290504
91% match