Skip to main content
SimilarExport ZIP
100%

Flora's Scatter Plot with 1 .js

✓ Published0🌍 Public
Ffloraho401
Last edited Sep 19, 2023
Created on Sep 19, 2023

This example visualizes the classic Iris Dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to color via an ordinal color scale. It features labeled axes and a custom color legend generated with D3’s `scaleOrdinal` and `schemeCategory10`. The data loads from a CSV file using `d3.csvParse`, while reusable modules handle axes, legends, and the plot itself, leveraging `selection.join` for efficient SVG updates.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Flora's Scatter Plot with Color

This visualization displays the classic Iris Dataset as an interactive scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with species categories encoded by color. The plot uses D3 v7’s `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for color mapping, rendering circles with a fixed radius of 10 pixels. A custom color legend shows species names alongside matching swatches, while the axes are generated using `axisLeft` and `axisBottom`. Data loads from a local CSV file and is parsed with `csvParse`.

Ffloraho401
94% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example presents a scatter plot of the classic Iris dataset, visualizing the relationship between sepal length and petal length for three flower species. Each circle is colored according to species, with a categorical color legend positioned in the top-right. Using `d3.scaleLinear` and `d3.scaleOrdinal` with `schemeCategory10`, it builds axes and a legend via custom functions that leverage `axisLeft`, `axisBottom`, and `selectAll(...).join(...)`. Data is loaded as a CSV and parsed in `index.js`.

BBismark Kofi Owusu Sarfo
87% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example displays the classic Iris Dataset, plotting sepal length against petal length for 150 flowers and using color to distinguish the three species: setosa, versicolor, and virginica. It includes labeled axes and a color legend. The visualization is built with D3.js, using `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and the `.join()` pattern to manage SVG elements. The code also modularizes reusable components for rendering axes and the color legend.

CCora
86% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species and a color legend for identification. The visualization uses D3 v7 with `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legends. It employs `selection.join` for dynamic element updates and loads data asynchronously via `fetch`, parsing the CSV with `csvParse`. The chart renders in a full-screen SVG with labeled axes and a categorical legend positioned in the plot area.

Ssnehareddygurram
86% match
Loading thumbnail…

Scatter Plot

This example visualizes the classic Iris dataset, displaying flower measurements in a scatter plot with points colored by species class. Each circle represents a single flower, positioned by its sepal and petal dimensions using D3’s `d3.scaleLinear` for x and y axes. The code loads data with `d3.csv`, appends SVG circles via `svg.selectAll` and `enter()`, and includes placeholder logic for axis rendering and hover tooltips. The visualization is rendered as an SVG within an HTML page, styled with external CSS, demonstrating basic D3 data-binding and scale patterns.

YYang Shun Yu
86% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset with a scatter plot mapping sepal length to the x-axis and petal length to the y-axis. Dots are colored by species using a categorical color scale, with a legend positioned in the upper right. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `selection.join` for rendering. Axes and labels are added via custom modules, and data is loaded asynchronously from a CSV file and parsed with `csvParse`.

NNicoA
86% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example displays the classic Iris flower dataset, plotting sepal length against petal length with dots colored and shaped to represent different species. The visualization uses a D3.js scatter plot, with points positioned by linear scales and a legend that maps species names to their corresponding shapes via a shape scale. The axes and legend are all built with D3’s selection API, while the data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Bbogasamudramvamsikrishnareddy
86% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher
86% match