IC8_VIGNESH

100%

✓ Published1🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

Forked from ice8

This example visualizes the Iris Dataset using a reusable scatter plot, mapping petal width and sepal length on the x and y axes while symbol shapes encode species. The SVG renderer uses d3’s scaleLinear for axes, scaleOrdinal to assign different symbols from d3.symbol, and axisLeft and axisBottom for ticks. Generated with d3.v6 and the code structure inspired by the reusable charts pattern, the plot fills the browser viewport with 100-pixel symbols and styled tick text.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable scatter plot with different symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species with different SVG symbols. The code uses D3 version 6’s `csv` loader and `select` method to fetch and render the data, while a custom `scatterPlot` function encapsulates the chart’s configuration. The plot is drawn as an SVG with dynamic sizing based on the viewport, and symbol shapes differentiate the three species. The implementation highlights a modular, reusable approach to building charts with D3.

SSaivignesh-9176

85% match

Loading thumbnail…

Ic7 scattered plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length while distinguishing species through different symbols. Built with D3.js and SVG, it employs a reusable chart architecture with modular accessors for configuration. Every 15 seconds, the x-axis dynamically cycles through different dataset columns, animating the plot to reveal alternative feature relationships. The visualization uses D3's linear scales, ordinal symbol scales, and axis generators to create an adaptive, self-updating exploration tool.

Ddivyagunuguntla

84% match

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width against sepal length. Each species of iris is represented by a distinct symbol, as determined by the `symbolValue` function. The visualization is built with D3.js, using the `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbols` APIs. Data is loaded from a remote CSV file, and the plot is rendered as an SVG element, sized to fill the browser window. Axes and marks are generated via D3's join operation.

SSaivignesh-9176

84% match

Loading thumbnail…

ICE-7 Reusable Scatter Plot

This visualization displays the Iris dataset, plotting sepal length against petal width while distinguishing species through different SVG path symbols. The reusable scatter plot component, built with D3 v6, uses scaleLinear for axes, scaleOrdinal for symbol mapping, and d3.symbol to generate custom point shapes. The code demonstrates a functional chart factory pattern with setters for width, height, data, and margin, invoked via selection.call(). Iris data loads from a CSV file with type coercion applied to numeric columns.

CCHANDU BHARGAVI

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates a scatter plot of the Iris dataset, visualizing petal length against sepal length with different species represented by distinct symbols. The code constructs the visualization using D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and render axes, while `scaleOrdinal` and `symbol` generate the categorical glyphs. Data is loaded as CSV via `d3.csv`, and the plot is rendered as an SVG element into the document body, adapting to the full window size.

LLydia Francis

84% match

Loading thumbnail…

Reusable Scatter Plot 11540905

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct D3 symbols representing different species. The D3 v6 code uses a custom reusable `scatterPlot` module with `scaleLinear` for axes, `scaleOrdinal` for symbol encoding, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded as CSV and parsed into numeric columns. The SVG renders within the full viewport, with marks generated via `d3.symbol` and a fixed symbol size of 100.

Nnagasai-gummadi

83% match

Loading thumbnail…

ICE7-Reusable D3 Scatter Plot

This example visualizes the Iris Dataset with a reusable D3 scatter plot, mapping petal width against sepal length and encoding species using distinct D3 symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to generate SVG marks. The chart is fully responsive, sizing to the window, and implements a reusable chart pattern with configurable accessor functions for x, y, and symbol values, plus margin and symbol size settings.

DDeepa-Murugesan

83% match

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable D3 scatter plot visualizes the Iris Dataset, mapping petal width and sepal length for different iris species. Each species is represented by a distinct symbol from d3.symbols, including circles, crosses, and diamonds. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal for symbol mapping, and d3.axisBottom/axisLeft for ticks. An SVG renderer displays the points, with margins and a fixed symbol size configured through a reusable chart function.

Kkollirohit2000

83% match