Skip to main content
SimilarExport ZIP
100%

basic scatter

✓ Published0🌍 Public
MMark D. Clements
Last edited Aug 31, 2023
Created on Aug 31, 2023
Forked from HTML Starter

This example visualizes the classic Iris dataset as a basic scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis. It loads data from a CSV file hosted on GitHub using `d3.csv`, then uses `d3.scaleLinear` to translate data coordinates into pixel positions. The circles are rendered as SVG elements, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, adapting its dimensions to `window.innerWidth` and `window.innerHeight`, and applies custom tick font sizing through CSS.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

This example shows a basic scatter plot of the classic Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each flower is rendered as a gray circle, with no color or shape encoding for species. The visualization uses D3 v4 within a React-style "margin" pattern, where a custom `d3.margin` function encapsulates the SVG margin convention. It loads CSV data with `d3.csv`, converts numeric fields, and positions circles using linear scales (`d3.scaleLinear`) over computed extents.

CCurran Kelleher
91% match
Loading thumbnail…

D3 Scatter Plot

This example renders the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7 to load the CSV data via `d3.csv`, and then builds scales with `d3.scaleLinear` and `extent` to compute domains. Circles are drawn as SVG elements, with axes generated through `d3.axisLeft` and `d3.axisBottom`. The visualization adapts to the full browser window and includes a large font size for tick labels via CSS.

SSubhendu Karmakar
90% match
Loading thumbnail…

scatter plot

This example presents a scatter plot of the classic Iris dataset, loaded from a GitHub-hosted CSV using D3.js’s `d3.csv`. The visualization is rendered as an SVG element that fills the entire browser window, with dimensions set to the viewport’s height and width via `window.innerHeight` and `window.innerWidth`. The code parses the dataset’s four numeric columns (sepal length, sepal width, petal length, petal width) into integers using the `parseRow` function, though it does not yet map these fields to visual positions or draw any points. Instead, it establishes the SVG canvas and logs the parsed data to the console, leaving the plotting logic incomplete.

Kkhalil-ryu
90% match
Loading thumbnail…

Scatter Plot Basic

This example demonstrates a basic scatter plot using the classic Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It renders circles as SVG elements, with axes generated via `axisLeft` and `axisBottom` from `d3.scaleLinear`. The code fetches the CSV data asynchronously, parses numeric fields, and positions each point based on computed scales. The chart fills the window, with margins and a fixed circle radius, using D3’s selection and join operations to bind data to the SVG circles.

CCameron Wehr
90% match
Loading thumbnail…

d3 scatterplot

This example visualizes the classic Iris dataset as a scatterplot, mapping petal length to the x-axis and sepal length to the y-axis. It renders individual data points as SVG circles, with axes positioned along the left and bottom edges. The code uses d3.csv to load and parse the data, d3.scaleLinear for both scales, and d3.extent to compute the domains from the raw values. Axes are generated with d3.axisLeft and d3.axisBottom, while the chart fills the entire browser window by setting the SVG dimensions to the inner width and height.

Kktshim@snu.ac.kr
90% match
Loading thumbnail…

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Pparag776
90% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset with a basic scatter plot, using D3 v4 to render circles in SVG that map sepal length and width. Each circle’s fill encodes the flower species via a color legend, generated with the d3-legend plugin. Axis ticks and labels are customized with scales, and the plot is fully responsive to the viewport.

CCurran Kelleher
90% match
Loading thumbnail…

D3 Scatterplot

This example displays the classic Iris dataset as an SVG scatterplot, plotting petal width against sepal length. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render labeled axes. Data is loaded asynchronously with `csv()` and parsed to numeric fields. Circles are drawn using D3’s `selectAll().data().join()` pattern, with the plot sized to fill the browser window.

MMatthew Bruffey
90% match