Skip to main content
SimilarExport ZIP
100%

Solution

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jan 31, 2018
Created on Jan 31, 2018

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.

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>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/55adf7e46f4dd549d42873977d97c00f'>Responsive Scatter Plot I</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Solution

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.

CCurran Kelleher
92% match
Loading thumbnail…

Making Scatter Plot

A scatter plot of the Iris Dataset displays sepal length against sepal width, with each point colored by species using a d3.scaleOrdinal color scale. The visualization is built with React components and renders SVG circles with tooltips via the title element. D3 v5 handles data loading through csv() and linear scales for both axes, while custom AxisBottom and AxisLeft components generate tick marks and labels.

MMinh Luong
92% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping sepal width against sepal length and coloring each point by species. The visualization uses React for component structure, including custom axis, legend, and mark components, while D3 v5 handles data loading, scaling, and SVG rendering. The code employs d3.scaleLinear for positional encoding, d3.scaleOrdinal for categorical species colors, and d3.extent to compute domains. The chart features a minimal aesthetic with the Poppins font, styled tick marks, and a supplementary color legend, providing clear separation of the three iris species.

Bbsolomon103
91% match
Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot uses the Iris Dataset to visualize sepal length against sepal width, with points colored by species according to a color legend. Built with React and rendered as an SVG, the visualization employs D3 scales for positioning, including a linear scale for the axes and an ordinal scale for categorical color mapping. Interactive tooltips display formatted values for each data point.

Rrstrauss127
91% match
Loading thumbnail…

Scatter Plot with Colors

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width, with each point colored by species. A color legend allows users to hover over a species to highlight corresponding data points and fade the others, aiding comparison across groups. Built with React and rendered as an SVG, the visualization uses D3 v7 APIs like `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for the categorical color mapping.

GGabriel
91% match
Loading thumbnail…

Scatter Plot With Color

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width, with each of the three iris species distinguished by a unique color from a d3.scaleOrdinal range. Built with React and rendered as SVG, the chart uses d3.scaleLinear for both axes and d3.format for tick labels. Data is loaded asynchronously via d3.csv. A native SVG `<title>` element provides simple tooltips on each circle.

SSong Tao Chen
91% match
Loading thumbnail…

Scatter Plot with colors

This scatter plot displays the Iris dataset, showing sepal length on the x-axis and sepal width on the y-axis, with each species (Setosa, Versicolor, and Virginica) represented by a distinct color. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal to map variety categories to a categorical color palette. React manages the component state and rendering, while d3.csv loads the remote dataset and d3.extent determines the axis domains. SVG circles are drawn with tooltips that display formatted x-values when hovered.

GGayan Priyadarshana
91% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width from the Iris dataset. The visualization uses React to render SVG elements, with D3 utilities for data loading, scaling, and axis generation. The code employs `d3.csv` to fetch and parse the Iris data, `d3.scaleLinear` to map values to pixel coordinates, and custom React components for rendering axes and circular marks with hover tooltips. The plot features a clean design with gray tick marks, labeled axes, and teal-colored data points.

CCatalina Vajiac
91% match