Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
LLydia Francis
Last edited May 9, 2024
Created on Apr 22, 2024
Forked from HTML Starter

This example demonstrates a scatter plot of the Iris dataset, visualizing petal length against sepal length with different species represented by distinct symbols. The code constructs the visualization using D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and render axes, while `scaleOrdinal` and `symbol` generate the categorical glyphs. Data is loaded as CSV via `d3.csv`, and the plot is rendered as an SVG element into the document body, adapting to the full window size.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

D3 Scatterplot

This visualization displays the classic Iris dataset, plotting petal length against sepal length. Each flower sample is rendered as a fixed-radius circle in an SVG canvas that fills the browser viewport. The code uses D3 v7's `csv` loader to fetch data from a GitHub gist, then employs `scaleLinear` with `extent` to compute domains for both axes. Axis ticks are generated using `axisLeft` and `axisBottom`, with the categorical iris species left uncolored in this minimal example. The rendering relies on D3's declarative selection-based joins to bind data to SVG circle elements, with dimensions set to the window's inner height and width.

Mmegan-grannan
89% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher
89% match
Loading thumbnail…

Untitled

This example shows the Iris dataset as a scatterplot, mapping petal length and sepal length to x and y coordinates while encoding the species of each flower with distinct SVG symbols. The code uses d3.csv to load the data, d3.scaleLinear for positioning, and d3.scaleOrdinal combined with d3.symbol to assign a unique shape to each species. d3.axisLeft and d3.axisBottom generate the axes. The visualization renders directly to SVG within a React project, with the page size set to the full viewport.

Ssubratanp
89% match
Loading thumbnail…

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. Each flower is rendered as a small circle using SVG. The code fetches the CSV data via D3’s `csv` function, parses numeric fields, and creates linear scales with `scaleLinear` and `extent` to set the domains. Axes are drawn with `axisLeft` and `axisBottom`, and all rendering is handled through D3 selections within a React-free HTML page.

GGbemiga Atolagbe
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…

Reusable scatter plot with different symbols

This example presents the classic Iris Dataset as an interactive scatter plot rendered with SVG. It maps petal length to the x-axis and sepal width to the y-axis, using distinct symbols and colors (yellow, orange, navy) to differentiate the three iris species. Built with D3 v6, the code defines a reusable `scatterPlot` component that leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to generate the chart. The visualization resizes to the full browser window and parses the CSV data via `d3.csv`.

SSUSHMA CHIRRA
89% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This example visualizes the Iris dataset as a scatter plot, mapping petal length and petal width to x and y positions on a D3 v6 SVG. Points are colored by species—light blue for setosa, black for versicolor, and red for virginica—with fixed radius, while each circle also carries the sepal length and width as unused `rx` and `ry` attributes from the CSV data. The code uses `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and render the plot, with axis labels indicating petal length and sepal length.

JJyothicherukuri
88% match