Solution

100%

✓ Published0🌍 Public

Last edited Jan 31, 2018

Created on Jan 30, 2018

This example plots the classic Iris flower dataset as a scatter plot, using sepal length and petal length for the axes while coloring each circle by species. The visualization is built as a stateless React-inspired component that receives SVG and configuration props. The code uses D3 v4 scales, axes, and the `d3.legendColor` API from the d3-legend library to create a categorical color legend. SVG rendering is driven by a merge pattern for incremental updates, with axis ticks and labels styled via CSS.

AI-generated description

An example of a Scatter Plot component using a React-inspired pattern for stateless components.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/298c130e67b40ed84f8c919e748d2e72'>Scatter Plot with Color Legend</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Solution

A scatter plot of the Iris dataset displays sepal length against sepal width, with points colored by species and a categorical color legend. Built as a reusable React-inspired stateless component using D3 v4, it employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeCategory10` for colors, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` for the legend. The SVG renders responsively, sized via CSS to fill the page.

CCurran Kelleher

92% match

Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Jjbruzzo

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how sepal and petal measurements vary across three flower species. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for color encoding, and React components to structure the SVG rendering. Each circle represents a flower sample, with color indicating species and a color legend displaying the categorical mapping. The axes are generated using d3.axisBottom and d3.axisLeft, while circle elements include tooltip titles for hover details.

Vvaynexie

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

WWolfgang

91% match

Loading thumbnail…

Color Legends

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

Llefat92

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct color. The visualization uses D3.js scaling functions (`d3.scaleLinear`, `d3.scaleOrdinal`) within a React framework, rendering circles as SVG marks. A color legend provides species identification, with axes and labels formatted and styled through custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`).

Ssophburke

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is colored by species using a categorical ordinal scale, with a custom color legend placed to the right. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. The SVG rendering includes custom React components for axes, marks, and the legend, with tooltips showing formatted petal length values.

TTaweewat Somboonpanyakul

91% match