Skip to main content
SimilarExport ZIP
100%

Scatter Plot - Different Dataset

✓ Published1🌍 Public
WWRCIECH
Last edited Dec 30, 2022
Created on Dec 30, 2022
Forked from Scatter Plot

This example displays a scatter plot of the Iris dataset, plotting sepal length against sepal width and highlighting individual points in red on hover. The visualization uses D3 v7 APIs including `csv` for data loading, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circles are rendered as SVG elements via `selectAll().data().join()`, with a fixed radius and black fill. The chart fills the entire browser window, and axes are positioned using margins derived from `innerWidth` and `innerHeight`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and sepal width for individual flowers. It uses D3 v7’s `csv` loader to parse the data, `scaleLinear` for x and y axes, and SVG `circle` elements for points. Axes are drawn with `axisLeft` and `axisBottom`, while hover effects change circle color to red via CSS.

WWRCIECH
94% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the Iris dataset, plotting sepal width against sepal length for individual flowers. The visualization is rendered as an SVG using React components, with D3.v7 utility functions like `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map data values to pixel coordinates. The chart includes labeled axes with grid lines and translucent turquoise circles, each featuring a tooltip that reveals the exact measurements on hover.

Sszchee1
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width, with each point as a fixed-radius teal circle. The data is loaded from a CSV using `d3.csv`, and the chart renders as an SVG within a React app. It uses D3’s `scaleLinear` for both axes, with bottom and left axes generated by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps data points to SVG circles, and a tooltip is provided via the `<title>` element, formatted using D3’s `format` function.

AAleksandra Timofejeva
92% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

DDineshK2602
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers. The visualization uses React with D3 v5 scales and SVG rendering, with axes created by custom components. Data loads asynchronously via `d3.csv` and converts string values to numbers. Circles represent data points, and hovering reveals tooltips through SVG title elements, while axis tick formatting utilizes `d3.format` for compact notation.

Rrstrauss127
92% match
Loading thumbnail…

Scatter Plot ( Iris Dataset ) Part - 1

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each point representing a flower sample. The visualization is rendered as an SVG using React components (AxisX, AxisY, and Marks), with scales created via `d3.scaleLinear` and extents computed from the data. Axes and tick marks are generated manually using D3’s `ticks()` method, while hover tooltips are implemented using SVG `<title>` elements. The code loads CSV data asynchronously via `d3.csv` from a GitHub gist, parsing numeric fields into floats.

Ggoyalshivam204
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents a flower sample, with a native SVG `<title>` element providing a tooltip on hover. Built with React and D3 v7, the visualization uses `scaleLinear` and `extent` to compute the scales, while custom `AxisBottom` and `AxisLeft` components render the tick marks and labels. The code loads data via D3’s `csv` function, and styling applies distinct colors to the marks and axis elements.

GGabriel
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis. Each circle represents a flower specimen, with hover tooltips revealing the exact sepal length value. The visualization uses React to render SVG elements, with D3.js functions like `scaleLinear`, `extent`, and `format` for scaling and tick formatting. The data is loaded asynchronously from a CSV file via D3's `csv` method, and custom components `AxisBottom`, `AxisLeft`, and `Marks` structure the chart.

OOm Kakatkar
92% match