Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Sep 10, 2024

Created on Sep 10, 2024

Forked from Shapes and Colors with SVG and CSS

This example demonstrates a scatterplot visualization of the Iris dataset, showing the relationships between sepal and petal measurements across three flower species. The visualization uses D3.js (d3.v4) with an SVG rendering approach, implementing multiple scatterplots to compare different attribute combinations. The code employs d3.scaleLinear for axis scaling, d3.scaleOrdinal with a categorical color scheme for species differentiation, and d3.axisBottom/Left for tick marks. The iris data is loaded from a CSV file and mapped to separate plot regions within a single SVG canvas.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length while using distinct shapes and colors to differentiate the three iris species. The visualization employs d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to map species to symbols. Data points are rendered as SVG paths read from a CSV file, with an embedded legend and labeled axes. The code demonstrates reusable chart components, including a custom axes module and shapeLegend function, built using D3 v6 selection joins and the d3.symbol API.

Rrishikareddy181@gmail.com

91% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. The visualization uses SVG symbols from d3.symbol and d3.symbolsFill to differentiate species by shape, with a custom legend showing the shape-to-species mapping. The code imports from d3 modules (d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, d3.extent) to build scales, axes, and marks, while asynchronously loading and parsing the iris dataset from a remote CSV via d3.csvParse.

BBhavanaGIrni

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

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

90% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying the relationship between two user-selected measurements (sepal length/width or petal length/width) on the x- and y-axes. Colored circles represent the three Iris species (setosa, versicolor, virginica) using a categorical color scale. The D3.js code builds the chart with `scaleLinear` and `scaleOrdinal` for scaling, `axisLeft` and `axisBottom` for axes, and dropdown menus trigger redraws via event listeners. Data is loaded from a CSV file, and points are rendered as SVG circles.

Aaddword527

90% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This example shows the classic Iris dataset as a scatter plot of sepal length against petal length, with each species represented by a distinct D3 symbol shape. The visualization includes labeled axes and a shape legend identifying the three species. It uses d3.scaleLinear for positioning, d3.scaleOrdinal with symbolsFill for mapping species to symbol types, and d3.axisLeft/axisBottom for axes. Data loads from a remote CSV and is parsed with d3.csvParse, with the chart rendered using d3-selection joins inside a resizable SVG.

Ssathvik0311@gmail.com

90% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying three species as colored circles across user-selectable axes. Using D3.js, it renders an SVG with animated transitions between axis combinations via dropdown menus. The visualization employs D3’s scaleLinear, axis functions, and transition methods to smoothly update data points based on the selected sepal and petal measurements.

JJacky

89% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal length while encoding species through distinct symbol shapes. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to assign unique geometric markers to each species. A custom legend, built with d3.symbol, explains the shape-to-species mapping. The code leverages d3.csvParse to load remote data and d3.axisLeft/axisBottom for labeled axes, with axes and legend implemented as reusable functions.

Aabjalshaik02@gmail.com

89% match