Scatter Chart Example

100%

Scatter Chart Example

✓ Published1🌍 Public

Last edited Mar 29, 2023

Created on Mar 23, 2023

This example presents a scatter chart of penguin data, plotting bill depth against body mass using the Plotly JavaScript library. The chart reads a CSV file from a GitHub gist, extracts the two numeric columns, and renders them as colored markers with axis labels and a title. The code demonstrates how to use Plotly’s `d3.csv` for data loading and `Plotly.newPlot` for visual output, with styling applied via marker properties.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Scatter Chart Example

This example presents a scatter plot of penguin measurements, charting bill depth against body mass. The visualization, built with Plotly.js, loads its data from an external CSV file and renders SVG circles with a dark blue color and partial opacity. The chart includes labeled axes for both variables and a title, with the data fetched asynchronously using Plotly’s CSV parser. In contrast, the React component version, using D3.js, displays a separate scatter plot of stock close price versus volume, with steel blue points and linear scales defining the axes.

Aachyutanandmishra17@gmail.com

90% match

Loading thumbnail…

Penguin scatter Plot

This example shows a scatter plot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5 to fetch CSV data from a GitHub gist, parse it, and render SVG circles scaled by bill length and depth within each circle's radius. The plot includes axis labels and a title, with axes generated via `d3.axisLeft` and `d3.axisBottom`.

VVAbhiram99

86% match

Loading thumbnail…

Scatter Plot Penguins Dataset

A scatter plot displays the relationship between bill length and body mass for penguins, with each circle representing an individual penguin. The visualization loads data from the Seaborn Penguins Dataset CSV and renders it as an SVG using React components. D3 v5 scale functions (`scaleLinear`), axis components, and extent calculations handle the coordinate mapping and tick generation, while each data point is drawn as a circle with a native SVG tooltip title.

Nnghosh319

86% match

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays penguin bill length against body mass, with each point colored steelblue and labeled by species on hover via a tooltip. The chart loads data from a CSV file hosted on GitHub and renders as SVG using D3 v6. Code defines margins, linear scales, and axis groups, while a tooltip follows the mouse to show species, bill length, and body mass. The example demonstrates modular function creation with `createScatterPlot`, and imports D3 from UNPKG.

HHarshithaAmbilpur

85% match

Loading thumbnail…

Creating Scatter Plot with Penguin Data

This example renders a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species. It loads data from a CSV file using `d3.csv`, parses numeric fields, and positions circles with `scaleLinear` and `extent` domains. The code uses D3 v5 with SVG, appending axes via `axisLeft` and `axisBottom`, and draws circles with `selectAll().data().join()`, also setting non-visible `rx` and `ry` attributes from culmen dimensions.

Sshiiva-surya

85% match

Loading thumbnail…

scatter Plot

This scatter plot visualizes penguin data showing flipper length against body mass, with each point colored by species. It also encodes bill dimensions through circle position attributes, though these are not visually distinct. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates. Data is loaded via `csv` from a GitHub gist, and points are rendered as circles with species-based fill colors.

BBala Sai Krishna

85% match

Loading thumbnail…

Scatter plot with React & D3

This scatter plot visualizes the relationship between bill depth and bill length for penguins, using data loaded from a CSV file via `d3.csv`. Each circle represents a penguin, with a native SVG `<title>` element providing tooltip information. Built with React components that render D3 scales, the chart uses `d3.scaleLinear`, `extent`, and `format` for axis ticks, with axes and marks created by custom React components. The visualization demonstrates a React-D3 integration pattern where D3 handles data scaling and formatting while React manages the SVG rendering.

Rrvdv

84% match

Loading thumbnail…

Fork of 3D Scatter Plot

This example visualizes the Penguin Dataset as a 3D scatter plot using Plotly.js, mapping bill length, bill depth, and flipper length onto the x, y, and z axes. It renders three nearly identical traces with different marker colors, sizes, and border styles. The code loads the CSV data with d3.csv, then uses Plotly’s `newPlot` to display the interactive scene. The layout removes all margins so the plot fills the page. Data comes from a GitHub-hosted CSV file.

Aachyutanandmishra17@gmail.com

84% match