Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Aug 22, 2025

Created on Aug 22, 2025

This interactive scatter plot displays the Iris dataset, allowing viewers to select which of the four flower measurements appear on the x- and y-axes via dropdown menus. The implementation uses D3 v5 with custom reusable functions for the scatter plot, dropdown menu, and color legend. Circles represent individual flowers, colored by species, and animate into position over two seconds when rendered. Axes include gridlines, and the color legend uses D3's ordinal scale with the category10 color scheme.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter (reusable charts

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to SVG circles, with axis labels generated accordingly. Two dropdown menus built with a custom `menu()` function let viewers switch which numeric columns are plotted on the x- and y-axes. Data is loaded asynchronously via D3’s `csv` method, and the visualization fills the browser window.

Mmauleendertse@gmail.com

90% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot displays the classic Iris dataset, letting users explore the relationships between sepal and petal measurements. Four dropdown menus, built with React, allow for the dynamic selection of which attributes map to the x and y axes. The visualization uses D3.js version 5 functions like `d3.scaleLinear` and `d3.extent` to scale the data, which is rendered as colored SVG circles, with each Iris species assigned a distinct color. The chart includes axis labels, a title, and a legend to clarify the categories.

Rrohinikotha

90% match

Loading thumbnail…

Fork of polished scatterplot with color

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the X and Y axes via ReactDropdown menus. The plot encodes flower species through a d3.scaleOrdinal color scale applied to circle marks. The visualization is built with React and D3 v7, using d3.scaleLinear for axes, d3.extent for domains, and d3.csv to load the remote dataset. SVG rendering displays axes and marks, with a tooltip via the title element.

BBlake McCarty

89% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot explores the Iris dataset, allowing users to select which of the four flower attributes—sepal length, sepal width, petal length, or petal width—map to the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear to map data to pixel coordinates and d3.axisBottom and d3.axisLeft to render axes with grid lines. Points are colored by species using a scaleOrdinal mapping, and the SVG rendering updates smoothly as axis selections change.

Rrohinikotha

89% match

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset with color-coded markers for species. Built with React and D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles for rendering. An animated `setInterval` cycles the x-axis through different flower measurements. CSS styling uses the Share Tech font, and the legend labels each species with distinctive colors.

Hhm0421

89% match

Loading thumbnail…

Fork of HTML Starter

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal width for 150 flowers. Built with React and D3 v7, the visualization cycles through different column combinations every two seconds, updating the x-axis scale and re-rendering the SVG circles using a custom `scatterPlot` function. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while the animation is driven by `setInterval` and repeated calls to the chart’s render function. Circle positions are recalculated dynamically as the selected variable changes.

DDonald Bagwell

89% match

Loading thumbnail…

Fork of Scatter Plot with Menus and Colour and Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by switching the X and Y axes via dropdown menus. Each point is colored by species, with a legend clarifying the color encoding. The visualization is built with React functional components and renders SVG marks using D3 v5 scales. It leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and React state hooks to manage attribute selections.

NNikita Toropov

89% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

Bbart

89% match