JS in HTML

100%

✓ Published1🌍 Public

Last edited Nov 6, 2022

Created on Nov 6, 2022

This example renders a scatter plot of the Iris dataset, showing the relationship between petal length and sepal length. Data is loaded from a GitHub-hosted CSV using `d3.csv` and parsed to numeric values, then mapped to SVG circles. The visualization uses `d3.select` to create the SVG canvas, `d3.scaleLinear` for both axes with `d3.extent` for domain calculation, and displays the axes with `d3.axisLeft` and `d3.axisBottom`. Each circle includes a tooltip title showing its coordinates. The chart fills the browser window, with margins defined via a constant.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3 Partial Scatter Plot (Vanilla JS)

This example displays a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v6. It fetches the CSV from a GitHub Gist, parses the numeric fields, and creates SVG circles with pixel-based coordinates scaled from the data extents. The visualization fills the browser window, using D3’s `scaleLinear`, `extent`, `csv`, and `select` APIs to handle scaling, data loading, and DOM manipulation.

AAndrea Mignone

89% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for tick marks. The SVG circles are rendered pink, matching the chart’s background, with margins sized proportionally to the viewport. The code reads window dimensions and appends the chart directly to the body.

Jjmetzg11alpine

89% match

Loading thumbnail…

D3 Scatter Plot (Vanilla JS)

This example renders a scatter plot of iris flower measurements, mapping petal length to the x-axis and sepal length to the y-axis. It loads CSV data from a Gist URL using `d3.csv`, parses numeric fields, and applies `d3.scaleLinear` for both axes. Circles are appended to an SVG via `d3.select` and `join`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, using a margin convention and D3 v6 with vanilla JavaScript.

AAndrea Mignone

89% match

Loading thumbnail…

D3 Scatterplot

This example shows a D3 scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The SVG viewport fills the browser window, with circles representing individual data points and axis ticks styled at 18px. Built with React and d3.v7, the code loads the CSV via `d3.csv`, then uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` to render tick marks, and a data join to append circles with tooltips showing coordinate values. The data comes from a GitHub-hosted CSV file.

Rrespingu

89% match

Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flowers. The visualization uses D3.js to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles as data points. Axes are generated using `axisBottom` and `axisLeft` and positioned within a margin-based layout. The chart fills the browser window through dynamically computed width and height, with the rendered SVG scaling to the viewport.

Aadventuresenglish.info@gmail.com

89% match

Loading thumbnail…

d3 scatter plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower instance is represented as a small circle, with axes labeled and scaled linearly using `d3.scaleLinear`. The code loads CSV data via `d3.csv`, maps values using `d3.extent` to determine the y-domain, and renders the SVG chart full-screen. The visualization uses D3 v6 within a React framework, drawing circles with `d3.select` and `d3.join` to manage the marks.

Rrwata97

89% match

Loading thumbnail…

D3 Scatter Plot (Vanilla JavaScript and HTML)

This scatter plot visualizes the relationship between petal length and sepal length in the Iris dataset, with each flower represented as a circle. The SVG rendering uses d3.scaleLinear to map data values to screen coordinates and d3.axisLeft/axisBottom to draw the axes. Data loads asynchronously via d3.csv from a GitHub gist, and the code parses numeric fields before binding the marks. The example demonstrates the core pattern of joining data to SVG circles with the selection.join() method.

Nnim@brejnholt.dk

89% match

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis using circular marks. The code loads CSV data via `d3.csv`, scales it with `scaleLinear` and `extent`, and renders the points as SVG circles. Axes are generated with `axisLeft` and `axisBottom`, with the visualization sized to the full browser window. The example uses D3 v7 within a minimal HTML page, styling tick text via CSS.

KKhanin Sisaengsuwanchai

88% match