Skip to main content
SimilarExport ZIP
100%

Scatter

✓ Published0🌍 Public
DDuckGorilla
Last edited Jan 26, 2022
Created on Jan 26, 2022
Forked from HTML Starter

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.

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

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

D3 scatter plot

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.

NNyashaBradleymhepo
88% 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
85% match
Loading thumbnail…

basic scatter

This example visualizes the classic Iris dataset as a basic scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis. It loads data from a CSV file hosted on GitHub using `d3.csv`, then uses `d3.scaleLinear` to translate data coordinates into pixel positions. The circles are rendered as SVG elements, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, adapting its dimensions to `window.innerWidth` and `window.innerHeight`, and applies custom tick font sizing through CSS.

MMark D. Clements
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