Skip to main content
SimilarExport ZIP
100%

Episode 8 - Scatter Plot (GIRIBAW)

✓ Published1🌍 Public
Eemberix@gmail.com
Last edited Jun 3, 2021
Created on Jun 3, 2021
Forked from HTML Starter

This scatter plot displays the relationship between petal length and sepal length for the Iris flower dataset, loaded from a GitHub Gist via `d3.csv`. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data points and render axes, with each circle representing a flower sample positioned by its x and y values. The code applies a full-window SVG canvas, fixed circular radius, and margins for readability, drawing all marks and axes dynamically after the asynchronous data fetch completes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Scatter Plot

This scatter plot displays the relationship between petal length and sepal width in the Iris flower dataset. The visualization loads CSV data from a GitHub gist using d3.csv, then maps each observation to a circle positioned by linear scales. The code builds axes as React components with SVG, using d3.scaleLinear to compute domains and ranges, and formats tick labels with d3.format. Tooltips appear on hover through SVG title elements.

JJohn Huang
88% match
Loading thumbnail…

Episode 9 - Reusable Charts (GIRIBAW)

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The chart is built using D3 v6 and rendered as SVG, with circles sized by a configurable radius and axes drawn using `axisLeft` and `axisBottom`. The code defines a `scatterPlot` function with a fluent API for setting width, height, data, margins, and value accessors, then invokes it via `svg.call()`. Data is loaded asynchronously from a remote CSV using `d3.csv`.

Eemberix@gmail.com
88% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length in the classic Iris dataset. The visualization uses D3 v7 to load CSV data, then applies `d3.scaleLinear` with `d3.extent` to map the data to screen coordinates, and renders circles as SVG elements with `d3.axisLeft` and `d3.axisBottom` for the axes. The plot fills the browser window, with a margin layout for the axes.

SShannon Teoh
88% 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
88% 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
87% 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
87% match
Loading thumbnail…

Episode 25 Complete - Scatter Plot

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.

RRichard Burd
87% match