Scatterplot with color legend

100%

Scatterplot with color legend

✓ Published1🌍 Public

Last edited Jan 29, 2024

Created on Jan 25, 2024

This example displays the classic Iris dataset as a scatterplot, mapping sepal length on the x-axis and petal length on the y-axis. Each point is colored by the species of the flower, with a custom color legend on the right side identifying the three categories. The visualization is built using the D3 v7 API, including `d3.select`, `d3.scaleLinear`, and `d3.scaleOrdinal` for data mapping. A custom legend component and axis components are assembled using D3’s join operation, organizing the visual elements into distinct groups.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. Each circle represents one iris, colored by its species to reveal clustering patterns. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Axis labels and a color legend are rendered using SVG elements and the d3-legend library’s `legendColor` component.

Nnithish-1999

92% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length with points colored by species. A circular color legend identifies the three species categories. The visualization uses D3 v5 with the `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and the `d3.legendColor` library for the legend. Grid lines extend across the chart via tick size settings, and axis labels are rotated for the y-axis. The data is loaded from a CSV file via `d3.csv`.

Aakhil kata

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

This scatter plot visualizes the Iris Dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three flower species represented by a distinct color from d3.schemeCategory10. A custom color legend identifies the species categories. The visualization loads the CSV data using d3.csvParse and renders the plot with d3.scaleLinear for both axes, while axes and legend components are built using reusable function modules.

KKhatera Alizada

91% match

Loading thumbnail…

Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, with sepal length on the x-axis and petal length on the y-axis. The three species (setosa, versicolor, virginica) are distinguished by color using a categorical color scale with a legend. The visualization is built with D3.js, using `scaleLinear` for axes, `scaleOrdinal` and `schemeCategory10` for color mapping, and the selection `.join` pattern to manage SVG elements. Separate modules for axes and color legend keep the code modular.

CCurran Kelleher

91% match

Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the classic Iris dataset as a scatter plot, using sepal length on the x-axis and petal length on the y-axis. Each point’s color encodes the flower species, with a categorical color legend identifying setosa, versicolor, and virginica. The visualization is built using D3.js, leveraging `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for the color mapping, and the `selection.join` API for declarative SVG creation. A custom `axes` and `colorLegend` module handle the chart’s annotations.

SSaiipriiya

91% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax

91% match

Loading thumbnail…

Scatter Plot+color+legend

This chart visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. A color legend maps the three species to distinct colors, with the legend placed to the right of the plot. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for species colors. SVG circles represent each data point, and the color legend is generated by the `ColorLegend` component with configurable tick spacing. Axis tick labels are formatted using D3's `format` API.

CCyc-Evelyn

91% match