Skip to main content
SimilarExport ZIP
100%

D3 scatter plot

✓ Published0🌍 Public
NNyashaBradleymhepo
Last edited Jul 19, 2023
Created on Jul 19, 2023
Forked from HTML Starter

This example loads the classic Iris dataset from a GitHub gist using `d3.csv` and logs each row to the browser console. It sets up a minimal HTML page with the D3 v7 library included via CDN, defining a `parseRow` function that currently returns data unchanged. The visualization itself is not yet implemented; the code demonstrates the initial data-loading stage for a scatter plot, with the styling and rendering left to be added.

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 scatter

This example loads the classic Iris flower dataset from a CSV file and logs it to the browser console, setting up a foundation for a scatter plot. The page uses d3.csv to fetch and parse the data, along with d3.scaleLinear for potential axis scaling, though no visualization is rendered yet. The minimal HTML structure includes D3 v7 from unpkg and demonstrates a simple asynchronous data-loading pattern.

SSGPPellow
90% match
Loading thumbnail…

Scatter plot

This example shows a bare-bones HTML page that loads the D3.js library and begins fetching the classic Iris flower dataset from a GitHub gist. The code defines the D3 `csv` function to parse data from the provided URL, naming the data source explicitly. The page currently renders only the text "Hello HTML" and a script that attempts to call `csv`, but the data is not yet visualized, leaving the scatter plot unimplemented. It relies on D3 v6 and raw JavaScript within a simple HTML structure.

Wwgloss
89% match
Loading thumbnail…

Scatter

This example demonstrates a scatter plot visualization that loads the classic Iris dataset from a GitHub Gist using the d3.csv function. The core functionality focuses on fetching and parsing the comma-separated data asynchronously, with the resulting records logged to the browser console rather than rendered graphically. The implementation uses D3 v7 alongside raw HTML and JavaScript, with no additional styling or interactive elements. The example serves as a minimal foundation for building data-driven visualizations, highlighting the import process of external CSV resources through D3’s built-in data handling capabilities.

DDuckGorilla
88% match
Loading thumbnail…

scatter plot

This example presents a scatter plot of the classic Iris dataset, loaded from a GitHub-hosted CSV using D3.js’s `d3.csv`. The visualization is rendered as an SVG element that fills the entire browser window, with dimensions set to the viewport’s height and width via `window.innerHeight` and `window.innerWidth`. The code parses the dataset’s four numeric columns (sepal length, sepal width, petal length, petal width) into integers using the `parseRow` function, though it does not yet map these fields to visual positions or draw any points. Instead, it establishes the SVG canvas and logs the parsed data to the console, leaving the plotting logic incomplete.

Kkhalil-ryu
87% match
Loading thumbnail…

D3 scatter plot

This example uses D3.js to create a scatter plot of the classic Iris dataset, loaded via a CSV file from a gist. It displays two measurements, petal length along the x-axis and sepal length along the y-axis, as small circles. The code leverages `d3.csv` for data loading and parsing, `d3.scaleLinear` for mapping data values to screen coordinates, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The visualization is drawn as an SVG, sized to fill the browser window, with a fixed margin around the plot.

Ccyriltoneatto965
86% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the classic Iris dataset as a scatterplot, using D3 v7 to map sepal and petal measurements to x and y positions. It demonstrates the core D3 data-join pattern, binding CSV data from a GitHub gist to SVG circle elements via `d3.csv` and scale functions. The code initializes the visualization by loading the data, then relies on D3’s scales and axes to render the plot, with styling handled through inline CSS and JavaScript. A React starter variant is referenced in the README for framework integration.

Kkathrynrbernard
86% match
Loading thumbnail…

Scatter

This visualization presents a scatter plot of the Iris flower dataset, loaded from a CSV file hosted on GitHub Gist. The example demonstrates the basic setup for a D3.js visualization within a minimal HTML page, using the d3.v7 library. It constructs the CSV URL by joining several string parts, including the gist URL, username, gist ID, commit hash, and file name, then logs the resulting URL to the console. This serves as a starting point for building interactive scatter plots, though the current code only prepares the data source without rendering any visual elements yet.

DDuckGorilla
85% match
Loading thumbnail…

d3 and scatterplot

This example displays the classic Iris dataset as a scatterplot, plotting sepal width on the x-axis and sepal length on the y-axis. The code loads the data from a CSV URL and uses d3.csv to parse it, then constructs linear scales with d3.scaleLinear to map the data to screen coordinates. It renders circular marks via SVG circle elements and adds axes using d3.axisLeft and d3.axisBottom. The visualization is built with React, though the core charting logic relies entirely on D3 v7.

Pparag776
85% match