Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published3🌍 Public
AAnupJoseph
Last edited Jul 1, 2021
Created on Jun 29, 2021
Forked from Hello Package.json

A scatter plot displays Fisher's Iris dataset, mapping sepal length and width as x and y coordinates while encoding petal width through circle radius and species through color. The visualization uses the D3 v6 API with d3.scaleLinear for positional and radial scales, d3.scaleOrdinal for categorical coloring, and d3.axisLeft/axisBottom for axes. Circles animate to their target radii over two seconds via selection.transition(). The reusable chart pattern is implemented through a scatterPlot factory function with configurable accessors and margin, rendering to SVG with data loaded from a CSV URL.

AI-generated description

A scatterplot with Towards Reusable Charts patterns

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species, with each species distinguished by a color-coded legend. The visualization cycles through different column pairings every two seconds using `setInterval`, updating the x-axis scale and circle positions. Built with D3 v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG circles and axes. Data is loaded from a CSV file using `d3.csv`, with species colors mapped via `d3.scaleOrdinal` and a custom `scatterPlot` function managing the reusable chart logic.

Sskambhore04
91% match
Loading thumbnail…

Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using linear scales and axis generators. Each flower is rendered as a circle with a fixed radius of five pixels. The visualization fills the browser window by sizing the SVG to the viewport dimensions. It loads CSV data with `d3.csv`, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot.

RRupeshGandham
90% match
Loading thumbnail…

0813457_scatter_plot

A scatter plot of Fisher's Iris dataset displays sepal length against petal length, with points colored by species via a categorical color scale and a legend labeling each species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data, while `selection.join` binds circles for each flower. Axes and legend are built with custom modules using `axisBottom`, `axisLeft`, and d3-scale-chromatic’s ColorBrewer schemes. Data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Jjessica403420@gmail.com
90% match
Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with circles colored by species (red, yellow, blue). It uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG `circle` elements. Data loads from a remote CSV, and additional sepal dimensions are stored as circle properties but not visualized. Axes labels are added via SVG text, with a fixed radius of 5 pixels per point.

AAnanthulaaditya
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Using d3.scaleLinear and d3.extent to compute domains, it positions circles in an SVG via d3.select, data joins, and the join() method. Axes are rendered with d3.axisLeft and d3.axisBottom, while the CSV is loaded and parsed with d3.csv, converting string values to numbers. The plot updates to fill the browser window.

AArturo Guevara
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Using D3 v7, it loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and renders circles as marks. Axes are drawn with `axisLeft` and `axisBottom`, and the SVG canvas fills the browser window. The code explicitly parses numeric fields and converts data values into pixel coordinates for each point.

SScott-Collier
89% match
Loading thumbnail…

Scatter Plot with symbols

This scatter plot displays the Iris dataset, mapping sepal length and width to axes, with petal width encoded through point size and species indicated by both color and symbol shape. The visualization uses D3 v6’s modular functions, including `scaleLinear` for axes and `scaleOrdinal` for categorical mappings, with axes built using `axisLeft` and `axisBottom`. Points are rendered as SVG paths via the `symbol` API, transitioning to their final size over two seconds using `.transition()`. The example follows a reusable chart pattern, encapsulated in a callable `scatterPlot` function.

AAnupJoseph
89% match
Loading thumbnail…

Scatter Plot

This example presents a scatter plot of the Iris dataset, using petal length and width for the x- and y-positions, with three species color-coded as green, yellow, and red circles. The code loads CSV data with d3.csv, uses d3.scaleLinear and d3.extent to set scales, and renders axes with d3.axisLeft and d3.axisBottom. The SVG circles also carry sepal length and width values, though these are not mapped to visual channels. Rendering is done entirely in a static SVG.

Ssalimjivani
89% match