Skip to main content
SimilarExport ZIP
100%

Starter

✓ Published0🌍 Public
Vvegetable.c@nycu.edu.tw
Last edited Sep 13, 2024
Created on Sep 12, 2024
Forked from HTML Starter

This interactive scatterplot displays the classic Iris flower dataset, allowing users to compare any two numerical measurements by selecting the x- and y-axis columns from dropdown menus. The visualization renders data points as fixed-radius circles within an SVG canvas, with axis labels updating dynamically to reflect the chosen variables. Built with React and D3 v7, the code leverages `select` for DOM manipulation, `csv` for data loading, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` for generating the axes, all orchestrated through a custom `scatterPlot` module.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This interactive scatterplot lets users explore the classic Iris dataset, comparing any two of the four numeric flower measurements on the x- and y-axes while color-coding points by species. The visualization uses D3 v7 to load CSV data, render SVG circles, and update axes and titles dynamically through select elements. Scales, axes, and event listeners are built with d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.csv, with styling for each Iris class defined in CSS.

Aa15923647
90% 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
89% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two measurements (sepal and petal length or width) by selecting them from dropdown menus. The visualization uses D3v5's `scaleLinear` and `extent` to compute axes, with a smooth 1-second transition between selections. Points are colored by Iris species (setosa, versicolor, virginica) using red, green, and blue, and the chart includes axis labels, gridlines, and a legend. The React-based code fetches data from a CSV file via `csv` and renders using SVG.

CChiuyc
89% match
Loading thumbnail…

scatter plot iris

This interactive scatter plot visualizes the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting axes from dropdown menus. The code uses D3 v5 for scales and axes, builds the visualization with React, and loads data from iris.csv. It demonstrates dynamic axis updates and customizable tick styling on an SVG render.

Ppei9223
89% match
Loading thumbnail…

Fork of Scatterplot with Select

This interactive scatterplot displays the Iris flower dataset, allowing users to select which numerical attributes appear on the x- and y-axes via two dropdown menus. The visualization updates the scales and circles dynamically based on user choices, with axes and labels reflecting the selected measurements. Built with React and D3 v7, the code uses `scaleLinear` from `d3-scale` to map data values to screen coordinates and renders circles as SVG marks. The data is loaded asynchronously from a CSV file using `d3.csv`, with each point representing a flower sample.

Aafcchilders
88% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions colored by flower species. Users can select which attributes to display on the x- and y-axes using dropdown menus, with hover interactions fading non-selected species. Built with React and D3 v5, it renders SVG circles using `scaleLinear` and `scaleOrdinal` for positioning and color encoding. The visualization includes custom axis components, a color legend, and tooltips, with data loaded via D3's `csv` parser and formatted using `d3.format`.

TThe-World-Muda
88% 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
88% match
Loading thumbnail…

scatter iris

This interactive scatterplot displays the Iris flower dataset, plotting measurements like petal length and sepal width as SVG circles. Users can select which attributes to compare via dropdown menus, with axes and labels updating accordingly. The visualization combines React state management with D3 scales (d3.scaleLinear), axis components, and data loading via d3.csv. Styling uses Poppins typography and teal marks, while native SVG titles provide tooltips.

TTanupat B.
88% match