Fork of Scatter Plot with Color

100%

Fork of Scatter Plot with Color

✓ Published0🌍 Public

Last edited Sep 14, 2023

Created on Sep 14, 2023

This example visualizes the Iris dataset, mapping petal length and sepal width to the x and y axes of a scatter plot. Each point is colored by species, and hovering reveals a tooltip with the precise petal length. The visualization is built with React and rendered as an SVG, leveraging D3 v5 utilities such as `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales and domains. Custom `Marks`, `AxisBottom`, and `AxisLeft` components generate the circles and axes, with data loaded asynchronously via `useData`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. Built with React and rendered as SVG, it uses d3’s `scaleLinear` for positioning and `scaleOrdinal` for categorical colors, with custom `AxisBottom` and `AxisLeft` components drawing ticks and labels.

NNicolás Troncoso

96% match

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width. Circles are colored by species, using an ordinal color scale with three distinct hues. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for color mapping. SVG rendering handles the marks and axes, with data loaded from a CSV file and formatted using D3's `format` function.

Cchar0496

95% match

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers while color-coding points by species. The visualization uses D3 scales (scaleLinear, scaleOrdinal with schemeCategory10) to position and color marks, rendered as SVG circles within a React component structure. Axes are generated through reusable React components using D3’s tick generation, with formatted numeric labels and axis titles for petal length and sepal width. Data loading is handled asynchronously via D3’s CSV fetching and parsing utilities.

KKaminariOS

95% match

Loading thumbnail…

Fork of Scatter Plot with Color

This example shows the Iris Dataset as a scatter plot with colored points representing different species. The visualization maps petal length to the x-axis and sepal width to the y-axis, using a categorical color scale to distinguish species. Built with React and D3 v5, it uses scaleLinear for axes, scaleOrdinal for colors, and renders circles as SVG marks. Tooltips display x-axis values formatted with D3's format function. Data is loaded asynchronously from a CSV via useData, with axis labels and styling defined in an SVG canvas.

Ppemmasaniprudhvinadh

95% match

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for categorical colors. The SVG rendering includes custom axis components and circles with tooltips via SVG `<title>` elements, with data loaded asynchronously using d3.csv.

SShafi

95% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each of the three iris species represented by a distinct color. The visualization uses React components to render SVG circles, with d3.scaleLinear mapping the quantitative axes and d3.scaleOrdinal assigning categorical colors. Axes are generated through custom React components that leverage d3’s tick generation, while the useData hook fetches and parses the CSV data using d3.csv. Hovering over a circle displays its exact petal length value via an SVG title element.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset by mapping petal length and sepal width for individual flowers. Each circle is colored by species using a D3 ordinal scale. The React-based code uses `d3.scaleLinear` and `d3.scaleOrdinal` to position and color the marks, rendered as SVG `circle` elements, with `d3.csv` loading the data for display.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Each circle is colored by species using an ordinal color scale. Built with React and d3.scaleLinear for positioning, the SVG chart displays axes with formatted tick labels and includes tooltips showing exact values. The code loads data asynchronously via d3.csv, parses numeric columns, and renders marks as SVG circles.

Eevers-codeshop-ai

95% match