DV ICE7-Reusable Scatter Plot for Iris Data

100%

DV ICE7-Reusable Scatter Plot for Iris Data

✓ Published2🌍 Public

Last edited Mar 12, 2023

Created on Mar 10, 2023

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length across three flower species. The code uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to render distinct shapes for each species. A reusable `scatterPlot` function configures margins, data accessors, and symbol size before rendering SVG marks. The chart displays all 150 records from the imported CSV file, with axes labeled and styled using the Share Tech font.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 DV Reusable Scatter Plot for Iris Data

This reusable scatter plot displays the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes. The visualization is rendered as an SVG using a custom `scatterPlot` factory function, which leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from D3. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. The chart dynamically fills the browser window, showing all three Iris species with symbols differentiated by the `symbolValue` accessor.

MMounikadontireddy

91% match

Loading thumbnail…

Reusable D3 Scatter Plot ICE 7

This interactive scatter plot visualizes the Iris flower dataset, encoding petal width, sepal length, sepal width, and petal length across the x and y axes. The code uses D3 v6 with a reusable `scatterPlot` module, employing `scaleLinear` for axes, `scaleOrdinal` for symbols, and `symbolGenerator` for markers. An animated `setInterval` cycles through different column pairs every second, while colors distinguish species. The SVG rendering includes axes via `axisLeft` and `axisBottom`, with a legend and title overlaid on screen.

PPrasanth

91% match

Loading thumbnail…

ICE 7 reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species through colored symbols. Built with D3 v6, it uses reusable chart components via `scatterPlot()`, employing `scaleLinear` and `scaleOrdinal` for axes and color mapping. The SVG rendering includes axis labels and a legend-free design, with data loaded asynchronously from a CSV URL. The chart adapts to the viewport size, demonstrating a modular approach to building customizable visualizations with D3's selection and join methods.

Kkakumanusreya

90% match

Loading thumbnail…

Fork of DV ICE7-Reusable Scatter Plot for Iris Data

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species by symbol type. Built as a reusable chart module, it uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for ticks. The SVG rendering fills the viewport, with data loaded via d3.csv from a GitHub Gist and parsed into numeric fields. The chart’s dimensions, margins, and accessor functions are configurable through a fluent API, demonstrating a modular approach to D3 visualization.

NNeeharikaGali

90% match

Loading thumbnail…

ICE-7 Resuable scatterplot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes (circles, crosses, and diamonds). Built with the reusable chart pattern, the `scatterPlot()` function configures scales, axes, and symbol generators via chained accessor methods. The visualization renders as animated SVG, with axes created using `axisLeft` and `axisBottom`, while `scaleOrdinal` and `symbol` map categorical data to geometric marks. Data loads asynchronously via `d3.csv` and updates smoothly through D3’s data join.

SShridhar Kshirsagar

90% match

Loading thumbnail…

ICE-7 reusable scatter plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis while encoding species through symbol shapes and colors (grey, coral, and aqua). The chart uses reusable D3.js components, including scaleLinear, scaleOrdinal, axisLeft, axisBottom, and the symbol generator, to render SVG marks. Data is loaded via d3.csv and parsed into numeric values before being passed to the customizable scatterPlot function.

CChathurya

90% match

Loading thumbnail…

Reusable Scatter Plot for Iris Dataset ICE-7

This reusable scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species of iris flowers distinguished by color. Built with D3 v6, it uses a custom `scatterPlot` function that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG axes and circles. The chart also displays a color-coded legend and accepts configurable margins and radius. Though the code defines an animation-less SVG rendering, it prepares nested shapes using `rx` and `ry` attributes, suggesting potential ellipse variation. The dataset is loaded asynchronously via `csv` from a GitHub gist URL.

KKrishnaPriyaKurra

90% match

Loading thumbnail…

ICE-7 Fork of Reusable Scatter Plot

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses three distinct D3 symbol shapes to differentiate iris species, rendering each data point as an SVG path element. The implementation leverages reusable D3 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbols`, and `symbol`, with data loaded asynchronously via `csv`. The chart fills the entire browser window, with axes labeled and styled through CSS.

IIndhuKrishnaraj

90% match