Fork of Fork of Scatter Plot

100%

Fork of Fork of Scatter Plot

✓ Published1🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This example displays the Fisher Iris dataset as a scatter plot using D3 version 7. The visualization, rendered as an SVG, plots sepal length against petal length, with each data point drawn as a red, semi-transparent circle. The code uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` functions to build the coordinate system and axes. Although the HTML includes a dropdown for selecting an X-axis attribute, the JavaScript currently does not implement any interactive behavior, instead rendering a static plot with axis labels and a title.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width. Users can dynamically select which numerical attribute appears on the X and Y axes via HTML dropdown menus, with points colored by iris species (setosa, versicolor, virginica). The visualization uses D3 v7 with SVG rendering, implementing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The chart redraws its axes and circles whenever a different attribute is chosen, with the y-axis dropdown preventing selection of the same attribute as the x-axis.

RRachel Chen

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

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

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

90% match

Loading thumbnail…

Fork of 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. Built with vanilla JavaScript and D3 v6, the SVG circles are positioned using `d3.scaleLinear` with domains from `d3.extent` and ranges derived from the window’s dimensions. Data is loaded via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. Axis rendering via `d3.axisLeft` and `d3.axisBottom` is present but commented out, leaving the chart with only the plotted points.

AAdan Rodriguez

90% match

Loading thumbnail…

Fork of D3 Scatter Plot

This is a scatter plot of the Iris dataset, showing sepal length against petal length, with each flower species represented by a translucent circle. The visualization is built with D3 v7, using `d3.csv` to load data, `scaleLinear` and `extent` to map values, and `axisLeft`/`axisBottom` for the axes. Circles are rendered as SVG elements with a fill opacity of 0.5. The example demonstrates a modular structure with separate files for data fetching, axis rendering, and the main visualization logic.

Ttebanieo

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

90% match

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal length onto the horizontal and vertical axes. Each flower is drawn as a circle with a fixed radius. The visualization uses the D3.js v6 API, including `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to render tick labels. The SVG canvas fills the browser window, with circles positioned via data-driven coordinates.

JJyothicherukuri

90% match