Skip to main content
SimilarExport ZIP
100%

Fork of D3 Scatter Plot2

✓ Published0🌍 Public
Rroyable88
Last edited Jan 20, 2023
Created on Jan 20, 2023
Forked from D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis with circular SVG marks. The code uses D3 v7’s `csv` loader to fetch and parse the data, then applies `scaleLinear` and `extent` to compute domains, with `axisLeft` and `axisBottom` rendering the axes. Data points are drawn as circles via the `join` pattern, sized at a fixed radius, within a full-window SVG canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each point is rendered as an SVG circle with a fixed radius of 5 pixels. The code uses D3 v7 APIs including `scaleLinear` for axis scaling, `extent` for domain calculation, `axisLeft` and `axisBottom` for axes, and `csv` for data ingestion from a GitHub-hosted CSV file.

Vvryvarma5577@gmail.com
96% match
Loading thumbnail…

Fork of D3 Scatter Plot2

This visualization shows the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a small circle positioned using D3’s `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. The code loads the CSV data via `d3.csv`, parses numeric fields, and renders the marks as SVG circles, with the chart sized to fill the browser window. The example uses D3 v7 within a React-independent HTML page.

Rroyable88
96% match
Loading thumbnail…

Fork of D3 Scatter Plot

This is an interactive scatter plot built with React and D3, rendering as an SVG. It visualizes the Iris dataset, plotting petal width on the x-axis against sepal length on the y-axis. The example uses D3's scaleLinear, extent, axisLeft, and axisBottom to map data points and draw the chart axes. It employs a chainable setter pattern in the scatterPlot function to configure its properties. The code also demonstrates how to load CSV data using D3’s csv function and how to dynamically size the visualization to the viewport.

Rroyable88
94% match
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
94% 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
94% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles are rendered in SVG, with each point labeled by its exact coordinate values via a title tooltip. Built with D3 v7 and React, the visualization uses `d3.csv` to load data, `scaleLinear` for coordinate mapping, and `extent` to compute domains. Axes are generated through `axisLeft` and `axisBottom` functions, while the page adapts to the full browser viewport by using `window.innerWidth` and `window.innerHeight`.

PPeiyang Li
94% match
Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles represent individual flower samples, with axes rendered using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads data via `d3.csv`, parses numeric columns, and appends SVG circles sized with a fixed radius. It leverages D3 v6, fetching the dataset from a GitHub Gist and responsively filling the browser window with full viewport dimensions.

DDuckGorilla
94% 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
94% match