Skip to main content
SimilarExport ZIP
100%

Scatter Plot - React/D3 (Part 25) - Stylised

✓ Published1🌍 Public
TTom-S82
Last edited Sep 23, 2020
Created on Sep 22, 2020

This interactive scatter plot visualizes the Iris dataset, allowing users to compare four flower measurements across three species. The chart uses a React front-end with D3’s `scaleLinear` for axes and SVG rendering. Dropdown menus let viewers switch the x- and y-axis variables. Points are stylized with distinct radial gradients per species, and hovering reveals a tooltip with exact values. The data is loaded from a CSV file via D3’s `csv` function.

AI-generated description

A program that creates a scatter plot based on the UCI's Iris Dataset.

Extras:

  • The species of plants are drawn in different colors to show how they are roughly distributed

Potential Improvements for later:

Tutorials:

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot - React/D3 (Part 35) - Interactive Color Legend

This interactive scatter plot displays the Iris dataset, using drop-down menus to select which measurements appear on each axis and color-coding points by species. An interactive color legend highlights points of a selected species while dimming others on mouse hover. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering with radial gradients for point fills. The legend and dropdowns respond to hover and change events, providing a focused exploration of species distributions across four flower attributes.

TTom-S82
91% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements (sepal and petal length/width) and species. Two dropdown menus, implemented as React components, let viewers independently select which attributes appear on the x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, with React managing state updates and SVG rendering ticks, circles, and axis labels. Data loads asynchronously via d3.csv from a remote gist, and each data point includes a tooltip showing its exact value.

SShaneBowen1
89% match
Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset, this interactive visualization lets users explore relationships between four numeric attributes (sepal and petal length/width) via dropdown menus. Built with React and D3 v5, the SVG chart displays all 150 flowers as teal circles, with axes generated by custom React components using d3.scaleLinear and d3.extent. The code demonstrates modular React components for marks, axes, and a reusable dropdown, with data fetched asynchronously via d3.csv.

Jjchen6912
89% match
Loading thumbnail…

Stylized Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between four flower measurements by selecting which attributes appear on each axis via dropdown menus. Built with React and D3 v5, the chart uses SVG for rendering and dynamically updates scales and marks based on user selections. The visualization employs D3’s scaleLinear for positioning, CSV loading through d3.csv, and custom React components for axes and dropdown controls, while colors are randomly assigned per data point from a fixed palette.

PPhronesis
89% 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
88% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width for individual specimens. The visualization uses D3.js utilities—including `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation—combined with React to render SVG circles and axis ticks. Each data point is drawn as a small teal circle with a tooltip displaying its value. The chart includes labeled axes with customized tick formatting and a responsive layout, all styled with the Poppins font family.

FFonda Irena Santoso
88% match
Loading thumbnail…

Stylized Scatter Plot with Color Legend

This interactive scatter plot displays the Iris flower dataset, allowing users to compare measurements of sepal and petal dimensions across species. The visualization uses React with D3 v5 scales and SVG rendering, featuring dropdown menus to select which attributes appear on the x and y axes. A color-coded legend distinguishes the three Iris species, and hovering over legend entries dims non-matching data points for focused comparison. The implementation leverages d3.scaleLinear, d3.scaleOrdinal, and custom axis components built with React.

Jjim25522532
88% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra
88% match