Fork of D3 selection exploration

100%

Fork of D3 selection exploration

✓ Published0🌍 Public

Last edited Aug 5, 2023

Created on Aug 5, 2023

This example demonstrates a simple scatter plot of the Iris dataset, mapping petal length and width to x and y positions. It creates a responsive SVG chart using D3 v7, with scales and axes configured via `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded as CSV and parsed, then circles are joined to the SVG using `selectAll` and `data`. The plot fills the browser window, with margins applied to the axes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6’s `csv` loader to fetch the data, `scaleLinear` with `extent` to compute scales, and `axisLeft`/`axisBottom` to draw the axes. The plot is drawn as SVG circles using `select` to append elements and a `join` operation for efficient circle creation. The visualization adapts to the full browser window, with tick labels styled at 24 pixels.

BBakunya | Kirisaki Rem

92% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7’s `csv` loader and `scaleLinear` for both axes, with `axisLeft` and `axisBottom` to render tick marks. The SVG circles are bound to data via `selectAll('circle').data().join('circle')`. The code loads data from a GitHub gist and sizes the chart to the full window, with margins and a fixed point radius of 5 pixels.

SSubhendu Karmakar

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft` and `axisBottom` for axes. The SVG circles are rendered via `selectAll` and `join`, with a fixed radius. The plot fills the browser window, using `window.innerWidth` and `window.innerHeight` to size the chart, and includes tick labels with 24px font styling.

JJordi

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis using d3.scaleLinear with nice tick values. It loads CSV data via d3.csv, parses numeric fields, and renders circles with SVG attributes set through d3.select and data joins. The visualization fills the browser window, adding an axisBottom and axisRight using d3.axisBottom and d3.axisRight, with a 24-pixel tick font size and fixed margins around the plot.

HHarshit-Prasad

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles with SVG. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, with margins adjusting the plot area to fill the viewport.

Wwilliam3333

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

A fork of the classic D3 scatter plot, this example visualizes the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. It uses d3.csv to load and parse the data, with d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for the axes. Circles are appended to an SVG via d3.selectAll and data joins. The chart fills the entire browser window, with a fixed radius of 5 pixels for each point. The code relies on d3 v6.

AAaron

91% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset with a D3 scatter plot using SVG circles, mapping petal length on the x-axis and sepal length on the y-axis. It loads the CSV data via `d3.csv`, parses numeric fields, and derives scales with `scaleLinear` from the data extent, positioning each point based on those scales. Axes are rendered using `axisBottom` and `axisLeft`, while the plot fills the browser window. The code leverages d3.v6 destructured functions like `select` and `csv` to fetch and draw the points.

SShan Gao

91% match

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Aatmr0

91% match