Skip to main content
SimilarExport ZIP
100%

Episode 25 Complete - Scatter Plot

✓ Published0🌍 Public
RRichard Burd
Last edited Jan 11, 2022
Created on Jan 11, 2022

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for each flower specimen. The visualization uses d3.scaleLinear to compute x- and y-axis scales from the data extent, with React functional components rendering SVG marks and axes. Hovering over a circle reveals a tooltip displaying the petal length value via the native SVG <title> element. The chart fetches CSV data from a GitHub gist using d3.csv and applies tick formatting with d3.format, styled with Poppins typography and a teal color scheme.

AI-generated description

Completed version of Lesson 25

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep 25 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against petal length on the y-axis using a linear scale. The React-based visualization renders circles as SVG marks, with axes generated by custom React components that leverage d3’s scaleLinear and extent functions. Hovering over each circle reveals its value via a native SVG title tooltip. The chart is styled with Poppins font and muted colors, with axis labels and tick formatting applied through d3’s format function.

GGordon Yang
93% match
Loading thumbnail…

Dataviz 2020_Ep25 - 19. Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width for individual specimens. The visualization encodes each flower as a circle, with hovering revealing its exact value via a native SVG `<title>` tooltip. Built with React and D3 v6, the chart uses `d3.scaleLinear` for axes, `d3.extent` for domains, and custom React components for axes and marks. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

MMinwoo Pak
91% match
Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The code uses React with D3 v5 utilities, including `scaleLinear`, `extent`, `csv` for data loading, and `format` for axis tick labels. Rendered as an SVG, it includes custom AxisBottom and AxisLeft components that generate ticks and gridlines, while Marks component draws circles with native tooltips via the `<title>` element. Data is fetched from a remote CSV file and parsed into numeric values during loading.

SSai Phaltankar
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh
90% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123
90% match
Loading thumbnail…

5.54-ScatterPlot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for individual flower samples. The visualization uses React components to render SVG circles, with D3 v7 utilities like `scaleLinear`, `extent`, and `ticks` managing the spatial mapping and axis generation. Data loads asynchronously from a remote CSV via `d3.csv`, and each circle includes an HTML title tooltip displaying the x-value. The chart applies a clean styling with a teal mark color, grey grid lines, and the Poppins font family.

Cchristine
90% match
Loading thumbnail…

dv.25 - scatter plot: petals

A scatter plot of the Iris dataset displays petal length on the x-axis and petal width on the y-axis, with each point colored by species and showing tooltips on hover. Built with React and D3 v6, it uses scaleLinear for axes, scaleOrdinal with schemeCategory10 for species colors, and scaleLinear for spacing. SVG circles render the marks, while custom AxisBottom and AxisLeft components generate tick lines and labels. The data loads as CSV via d3.csv.

Zzach b.
90% match
Loading thumbnail…

Iris Scatterplot 02

This scatterplot displays the Iris dataset, plotting petal length against sepal length for each flower specimen. The visualization uses a React framework with SVG rendering, employing D3.js functions like `scaleLinear` for axis scaling and `scatterPlot` for the mark generation. The code reads the data from a remote CSV file, parses numeric values, and renders circles with a fixed radius. Axes are labeled using D3's `axisBottom` and `axisLeft` positioned according to specified margins. The chart fills the entire browser window, adapting to the viewport dimensions.

Gg1g10
90% match