Fork of Scatter Plot with Colors

100%

Fork of Scatter Plot with Colors

✓ Published1🌍 Public

Last edited Nov 29, 2022

Created on Jan 20, 2022

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes (sepal and petal length and width). Two dropdown menus control which numeric attributes are mapped to the x and y axes, dynamically updating the visualization. Color is not used for encoding; all points are rendered as teal circles. The visualization uses React for the interface and D3.js for data loading and scale computation (d3.csv, d3.scaleLinear, d3.extent, d3.format). SVG circles are mapped to data points, with mouse-over tooltips showing the exact x-axis value. The data is loaded client-side from a CSV file.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with color

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes (sepal length, sepal width, petal length, and petal width) through dropdown menus that control the X and Y axes. Points are colored by species using d3.scaleOrdinal with three categorical colors. The visualization is built with React components managing state for axis selections, while d3.scaleLinear handles coordinate mapping and axis rendering uses custom SVG tick components. Data loading relies on d3.csv with type coercion for numeric fields.

LLewis Ward

94% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85

94% match

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Ccynichole

94% match

Loading thumbnail…

Fork of Scatter Plots

An interactive scatter plot of the Iris dataset lets users choose which of the four flower measurements—sepal length, sepal width, petal length, or petal width—appears on each axis via dropdown menus built with React. Points are colored by species using a fixed color scale, with d3.axisBottom and d3.axisLeft rendering grid lines and tick labels. The visualization uses d3.scaleLinear for positioning, d3.extent for domain calculation, and SVG circles for rendering, with data loaded from a CSV source.

Ssrinivasaraosankula

93% match

Loading thumbnail…

Scatter plot with colour

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which attributes appear on the x and y axes, while color distinguishes the three iris species. The visualization uses React with functional components, D3 v5 scales including `scaleLinear` and `scaleOrdinal` for mapping data to positions and colors, and renders marks as SVG circles. Axes are custom components built from D3 tick values, and the data loads asynchronously from a CSV file using `d3.csv`.

AAndrea Picciau

93% match

Loading thumbnail…

Fork of Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. Users can dynamically select which variables to map to the x- and y-axes via dropdown menus. The visualization updates the scatter plot, axes, and labels accordingly. Data points are colored by iris species using a static color mapping. The implementation uses d3.scaleLinear for axis scaling, d3.extent to compute data domains, d3.axisBottom and d3.axisLeft for axes, and React dropdowns for the interactive controls, all rendered as SVG elements.

Jjas0821

93% match

Loading thumbnail…

Scatterplot with Color

This interactive scatterplot displays the Iris Dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus select which measurement appears on the x- and y-axes, while color encodes the iris species. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and renders SVG circles via reusable components. Hovering over a point reveals its value in a native `<title>` tooltip. The data loads asynchronously from a CSV using D3’s `csv` function.

Jjanneprice

93% 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

93% match