Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot_ rendering_axis

✓ Published0🌍 Public
CChawin Sungwalngern
Last edited Dec 23, 2022
Created on Dec 23, 2022
Forked from Hello VizHub

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length across multiple flower specimens. The code uses D3 v6 to load the CSV data, apply linear scales for both axes, and render circles as SVG elements. Axis ticks are drawn explicitly using `axisLeft` and `axisBottom`, with the plot filling the full browser viewport via `window.innerWidth` and `window.innerHeight`. The example demonstrates a clean, minimal approach to building coordinate-based visualizations with D3’s data-binding and scale functions.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis using circular marks. The code loads CSV data via `d3.csv`, scales it with `scaleLinear` and `extent`, and renders the points as SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with the visualization sized to the full browser window. The example uses D3 v7 within a minimal HTML page, styling tick text via CSS.

KKhanin Sisaengsuwanchai
93% match
Loading thumbnail…

D3 Scatter Plot

This D3 v6 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower specimens. It uses the `csv()` loader to fetch data, `scaleLinear()` with `extent()` for scaling, and `axisLeft()` and `axisBottom()` to render axes. The SVG canvas fills the browser window, and circles are drawn with a fixed radius using the `join('circle')` operation. The sample displays all data points as a simple 2D projection, enabling pattern recognition in the measurements across the dataset's species.

YYash_Mistry
92% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Using D3 v6, it loads data via `d3.csv`, applies linear scales with `scaleLinear` and `extent`, and renders circles as marks. Axes are drawn with `axisBottom` and `axisLeft` in an SVG container. The plot fills the entire window and displays all 150 samples without color or categorical encoding.

CCurran Kelleher
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The SVG rendering uses d3.scaleLinear to transform raw CSV values into pixel coordinates, with d3.min and d3.max defining the domains. Circles represent individual flowers, colored in a teal tone, while d3.axisLeft and d3.axisBottom generate labeled axes. The code loads data via d3.csv and appends text labels for both axes, using a full-window responsive layout with fixed margins.

Aainhoadieruiz@gmail.com
92% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using D3’s selection and data-join methods. The code loads the data via `d3.csv`, scales positions with `d3.scaleLinear`, and adds axes through `d3.axisLeft` and `d3.axisBottom`. The SVG is sized to the full window, and the plot includes customizable margins and tick font sizing.

Aajoua
92% match
Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads CSV data from a remote Gist, converts string values to numbers, and uses `d3.scaleLinear` with `d3.extent` to map data domains to screen coordinates. Individual data points are rendered as SVG circles with tooltips showing their coordinates. Axis ticks are generated using `d3.axisLeft` and `d3.axisBottom`, with the chart filling the entire browser window.

GGullyPlook
92% match
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses `d3.csv` to load and parse the data, then `d3.scaleLinear` with `d3.extent` to compute domains for both axes. Circles are rendered in an SVG canvas via `selectAll('circle').join('circle')`, with axes added using `axisLeft` and `axisBottom`. The plot fills the browser window, with a tick font size of 24 pixels.

OOleg Zhernovoy
92% match
Loading thumbnail…

D3 Scatter Plot Following Along

This example displays the classic Iris dataset as a scatter plot, mapping petal length along the x-axis and sepal length along the y-axis. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to compute the domain from the CSV data, then renders circles via SVG selection joins. Axis components are generated with `axisLeft` and `axisBottom`. The plot fills the entire browser window, with data loaded asynchronously from a GitHub gist, parsed to numeric values, and drawn with fixed 5-pixel radius points.

PParker-D5
91% match