Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot - Data Visualization

✓ Published0🌍 Public
DDanthalakirankumar
Last edited Mar 27, 2022
Created on Mar 27, 2022

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each circle represents a data point, color-coded by species (setosa, versicolor, virginica) using a custom `getColor` function. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `scatterPlot` factory pattern allows dynamic updates to x-value selections. The SVG is drawn full-window on an orange background with white text and axis labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot with Iris Data

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (green for setosa, purple for versicolor, red for virginica). The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders circles as SVG marks. It also applies `d3.axisLeft` and `d3.axisBottom` for labeled scales, with axes and text styled via CSS. The plot is fully responsive, sizing to the browser window.

Ggopiganta
92% match
Loading thumbnail…

Reusable Scatter plot

This animated scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements, with points colored by species (setosa, versicolor, virginica). The visualization cycles through different attribute pairs on the axes every two seconds, dynamically updating via a reusable chart component. Built with D3.js v6, it uses scaleLinear for axis scaling, axisLeft and axisBottom for ticks, and SVG circles for marks. The code imports scatterPlot, a custom reusable function following the Towards Reusable Charts pattern, with data loaded via d3.csv.

SSnigdha6698
92% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot visualizes the Iris flower dataset, showing petal width versus sepal length as colored circles representing species. The chart cycles through all four attribute combinations on the x-axis every few seconds using setInterval, with a legend identifying yellow, violet, and orange markers. Built with D3 v6, it uses d3.csv to load data, d3.scaleLinear for axes, and dynamically updates the scatterPlot function’s xValue property. The SVG rendering includes axis labels, a title, and manually positioned legend squares and text.

DDeekshithVemula
92% match
Loading thumbnail…

Reusable for scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with color-coded circular marks. Built with D3 v7, it demonstrates a modular chart factory pattern where configuration methods like `.width()`, `.data()`, and `.radius()` are chained to customize the visualization. The code uses `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and renders SVG circles and groups. Data loads from a remote CSV file and is parsed with type coercion for numeric columns.

FFrancisco Ibelles
91% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Yyankesswang
91% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the Iris dataset, encoding species with distinct shapes and colors while mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to render marks as SVG paths. The chart automatically cycles through four axes every 10 seconds, updating the x-value to explore different variable pairs. Dynamic axes and transitions demonstrate a reusable chart pattern inspired by Towards Reusable Charts, with data loaded via d3.csv from a remote gist.

LLakshmipriya-kalapala
91% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements against each other while coloring each point by species. Constructed with D3 6.7.0's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the visualization animates by cycling the x-axis through different measurement columns every two seconds using `setInterval`. Circles are rendered as SVG elements with per-species colors (green, indigo, red), and the plot is fully parameterized via a custom `scatterPlot` function for flexible reuse.

AAkhila-Battula
91% 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
91% match