Skip to main content
SimilarExport ZIP
100%

HW1 Scatter Plot

✓ Published0🌍 Public
EEast007
Last edited Oct 6, 2020
Created on Oct 5, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

HW1_Scatter Plot

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.

JJames Huang
92% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su
92% 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
92% match
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
92% match
Loading thumbnail…

Scatterplot with Color

This interactive scatterplot visualizes the Iris Dataset, with dropdown menus allowing users to select which flower measurements appear on the x- and y-axes. Each point represents an individual iris flower, colored by species using a d3.scaleOrdinal with three categorical colors. The React-based interface uses d3.csv for data loading, d3.scaleLinear for axis scales, and SVG circles rendered via React components for the marks. Axis components generate ticks and labels using D3 scale methods, while the axis labels and menus update dynamically based on user selections.

JJun Suzuki
92% match
Loading thumbnail…

Scatter Plot with Colors

This interactive scatter plot displays the Iris dataset, visualizing relationships between different flower measurements. Users can select which attributes appear on the X and Y axes through dropdown menus. A color legend groups data points by species, and hovering over a legend entry dims all non-matching species marks. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) and renders as SVG. The d3.csvParse function loads the dataset, while React state manages axis selections and hover interactions.

EEhtisham UL Hassan
91% match
Loading thumbnail…

Scatter Plot with Colour

This interactive scatter plot explores the classic Iris flower dataset, letting users compare numeric attributes by choosing which measurements appear on the x- and y-axes via two dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical palette, and tooltips reveal exact petal or sepal values. The React-based visualization uses d3.scaleLinear for both axes, renders circles as SVG elements, and reads the CSV data with d3.csv, with brushing and zooming absent from this implementation.

KKevin McMorrow
91% match