Skip to main content
SimilarExport ZIP
100%

ATS Dual Scatterplot

✓ Published0🌍 Public
Xxscotta@yahoo.com
Last edited Aug 25, 2024
Created on Aug 25, 2024

The ATS Dual Scatterplot presents two side-by-side scatter plots visualizing the Iris dataset. The left plot maps sepal length against sepal width, while the right plot maps petal length against petal width, with point sizes encoding the product of the other two dimensions. Both plots color points by species. The visualization uses custom D3 code, including `d3.scaleLinear`, `d3.extent`, and `d3.symbol`, to render SVG circles, axes, grids, and legends. The `scatterPlot` function is a reusable module, and data loading uses `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ATS - Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length and width for three iris species while encoding the relative petal size (petal length multiplied by petal width) as the radius of each circle. The visualization is built with D3.js, using `d3.select`, `d3.csv`, `d3.scaleLinear` for x, y, and radius mappings, and `d3.scaleOrdinal` for color coding by species, with a legend and grid lines.

Xxscotta@yahoo.com
88% match
Loading thumbnail…

ATS - Responsive Reusable Scatter

This example builds a responsive two-panel scatterplot dashboard of the classic Iris dataset, showing sepal dimensions in one view and petal dimensions in the other. Each panel encodes an additional variable through point size, with circle area scaled by the product of the other two measurements, and colors species via a D3 ordinal scale. The reusable scatterPlot function uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol to render SVG marks, axes, grids, and legends. The layout adapts from a side-by-side grid to a stacked single-column arrangement below 640px via CSS media queries.

Xxscotta@yahoo.com
84% match
Loading thumbnail…

ATS - Variable driven multi plot

A dashboard of four synchronized scatterplots explores the Iris dataset, each plot pairing different sepal and petal dimensions while encoding a third measurement as point radius. D3.js scales map data values to pixel positions and sizes, with ordinal coloring distinguishing the three species. Variables drive each plot’s configuration, setting axes, titles, and dimensions dynamically. The SVG-based visualization renders data from the local iris.csv file, with shared legends and colored borders framing each quadrant.

Xxscotta@yahoo.com
84% match
Loading thumbnail…

debug of ATS - Reusable Scatter

This example demonstrates a reusable scatterplot component built with D3.js that visualizes the Iris flower dataset, plotting sepal length against sepal width while encoding petal size through point radius and species through color. The code constructs the chart using D3's `scaleLinear` for axes and point sizing, `scaleOrdinal` for categorical color assignment, and `symbol` with `symbolCircle` to render the data points as SVG paths. The visualization includes axis labels, a title, and a grid, all rendered as SVG elements within a bounded container, with the reusable chart function accepting configurable dimensions, margins, and data accessors.

Xxscotta@yahoo.com
81% match
Loading thumbnail…

Scatter II

This scatter plot displays the classic iris dataset, mapping sepal width and sepal length along the x- and y-axes, with each species (setosa, versicolor, virginica) distinguished by color and a legend. Built with D3.js, it uses the `d3.conventions` helper from the d3-starterkit to set up axes and scales, then appends circles via `dataAppend` to render each data point. Axis labels and the legend are added directly within the SVG, and the data is loaded as a TSV file using `d3.tsv`.

11wheel
77% match
Loading thumbnail…

td3

This visualization displays two side-by-side scatterplots of the Iris dataset, plotting sepal length against sepal width. Each point is encoded with a symbol and color representing the flower species, while point size reflects petal length. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate distinct patterns for setosa, versicolor, and virginica. The SVG renderings are created by appending paths to separate chart divs, with scales computed from the CSV data using `d3.extent` and `d3.axisBottom`/`d3.axisLeft` for axes.

MMathReynaud
77% 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
77% match
Loading thumbnail…

Scatter plot testing

This scatter plot visualizes the classic Iris dataset, mapping sepal length and width to the x- and y-axes while encoding petal length through circle radius and species via color. The D3 v4 code loads the CSV, uses linear and sqrt scales for positioning and sizing, and renders SVG circles with ordinal color mapping. Axes are drawn using d3.axisBottom and d3.axisLeft.

AAtomy9
76% match