Skip to main content
SimilarExport ZIP
100%

Solution

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 3, 2017
Created on Aug 3, 2017

A stylized scatter plot displays sepal length against petal length for the Iris dataset, with each flower species colored distinctly via a custom legend. The chart uses D3 v4 to render SVG circles and axes, incorporating reusable functions for the color legend and a modular rendering pipeline. Axis ticks feature thick gray lines and large labels, while the legend and axis titles are styled with substantial fonts and muted colors, creating a clean, visually bold presentation.

AI-generated description

An example of a stylized scatter plot with re-usable code organization using D3 v4.

mit Licensed

Similar vizzes

Loading thumbnail…

Solution

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with circle size encoding petal width. The chart uses D3 v4’s `d3.scaleLinear` for axes and `d3.scaleSqrt` for the size scale, rendering with SVG. A custom `sizeLegend` function generates the legend, while axis labels and styled grid lines come from `d3.axisBottom` and `d3.axisLeft`. The code is organized into reusable functions for modularity.

CCurran Kelleher
93% match
Loading thumbnail…

Scatter Plot, Slightly Stylized with Color & Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris flowers. Each data point is rendered as a colored circle in an SVG, with colors assigned by species using a d3.scaleOrdinal color scale. The chart includes custom React components for axes, marks, and a color legend, with d3.linear scales mapping data to pixel coordinates. A tooltip appears on hover, displaying the petal length value.

AAndre J Denais
90% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length on the x-axis against petal length on the y-axis for 150 flowers. The scatter plot uses semi-transparent circular marks colored by species, with a categorical color legend generated via the d3-legend plugin. Built with D3 v4, the visualization employs d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.scaleOrdinal with schemeCategory10 for color mapping. The SVG render includes labeled axes and a legend, with data loaded from a CSV file.

CCurran Kelleher
90% 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
89% match
Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis, with each circle representing an individual flower. Species are distinguished through color, and a legend identifies the three categories. The visualization uses D3 v5 and the d3-legend library, employing d3.scaleLinear for continuous axes and d3.scaleOrdinal with the d3.schemeCategory10 palette for categorical coloring. Axes are rendered with d3.axisBottom and d3.axisLeft, and the legend is generated using d3.legendColor. The SVG canvas is 1050 by 500 pixels, with data loaded asynchronously via d3.csv.

DDeekshithVemula
89% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the iris dataset, showing sepal length against sepal width for three flower species, with each species colored distinctly via a custom color legend. The visualization uses D3 v5 to load CSV data and build an SVG scene, employing `scaleLinear` for the axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` to render gridlines. Semi-transparent circles reveal overlapping points, while a reusable `colorLegend` module generates a categorical legend with labeled circles and a background rectangle.

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

Scatter Plot

This scatter plot visualizes the Iris Dataset, with each circle representing an iris flower colored by species to emphasize clustering patterns between sepal length and petal length. The SVG visualization uses D3 v5 with d3.scaleLinear for axes and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. It incorporates the d3-legend library to generate a color legend, while axes are rendered using d3.axisBottom and d3.axisLeft with gridlines and rotated labels. Data loads asynchronously from a CSV via d3.csv.

Kkranthireddyskr
89% match