Fork of D3 Scatter Plot (Vanilla JS)

100%

Fork of D3 Scatter Plot (Vanilla JS)

✓ Published0🌍 Public

Last edited May 7, 2021

Created on May 7, 2021

Forked from D3 Scatter Plot (Vanilla JS)

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as colored circles with a fixed radius. It uses D3 v6 (loaded via a global script tag) with the `csv` parser, `scaleLinear` for scaling, and `axisLeft`/`axisBottom` for axes. The data is fetched from a Google Drive CSV URL, and the SVG rendering fills the full browser window.

AI-generated description

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

Similar vizzes

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 presents a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7 to load CSV data, apply linear scales, and render circular marks within an SVG. The code imports a custom `scatterPlot` module for creating the chart, and the plot includes axes with labels. The rendering approach uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the graphical output.

NNjord

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

93% 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

93% match

Loading thumbnail…

Fork of D3 Scatter Plot2

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.

Rroyable88

93% 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

93% 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

93% 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

93% match