Bonus ICE for Scatter plot using D3.js

100%

Bonus ICE for Scatter plot using D3.js

✓ Published0🌍 Public

Last edited Apr 3, 2023

Created on Apr 3, 2023

Forked from Bonus ICE Scatter plot using D3.js

This example visualizes penguin species measurements using two interactive 3D scatter plots rendered with Plotly, where the first trace plots bill length, bill depth, and body mass, and the second shows flipper length, sex, and island. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each trace uses `scatter3d` markers with distinct styling. The layout margins are zeroed for a clean presentation, and both traces are combined into a single Plotly chart drawn inside a designated HTML `div` using `Plotly.newPlot`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Bonus ICE - 2

This example shows two 3D scatter plots of the Palmer Penguins dataset, displaying bill length and bill depth on the x- and y-axes, with flipper length in one plot and body mass in the other. It uses Plotly’s `scatter3d` trace type within a single chart, rendered into a `div` via `Plotly.newPlot`. Data is loaded as CSV with D3.js (`d3.csv`) and mapped through a custom `unpack` function to extract numeric columns for each axis.

MMahitha-Moparthi

87% match

Loading thumbnail…

ICE - 6 Part - 2

This example displays a scatter plot of penguin measurements, using flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It also encodes bill length and bill depth as the ellipse radii (rx and ry) of each circle, creating an additional visual dimension. The visualization is built with D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data and render axes. Data is loaded as CSV via `d3.csv` from a GitHub gist, and the SVG is rendered directly to the page with React-style declarative `join` for circles.

MMahitha-Moparthi

86% match

Loading thumbnail…

ICE-6 Penguin Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length and body mass on the x and y axes while encoding each point’s color by species (Adelie, Gentoo, or other). It uses D3 v5’s `csv`, `scaleLinear`, `extent`, and axis functions within a React-based SVG rendering. The data, sourced from a CSV file, also includes bill dimensions as attributes, though these are not plotted. Axes labels and a title are added via SVG text elements, with body margins preventing overflow.

MMadan05101998

86% match

Loading thumbnail…

ICE6 : Scatter Plot

This example shows a scatter plot of penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis. Each circle’s fill color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while its horizontal and vertical radii encode bill length and bill depth, respectively. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file via `d3.csv`. Axes are created using `d3.axisLeft` and `d3.axisBottom`, with scales from `d3.scaleLinear` and data extents from `d3.extent`; the code also labels both axes and the plot title.

Ssrividya-bachina

86% match

Loading thumbnail…

Bonus ICE

This 3D scatter plot visualizes the Palmer Penguins dataset, showing the relationship between body mass, culmen length, and flipper length for three penguin species. D3 loads the CSV data, while Plotly’s `scatter3d` type renders the WebGL-powered interactive plot. Each species is color-coded via a custom colorscale (blue, orange, yellow), with white-outlined markers and semi-transparent axis backgrounds for depth perception. The plot uses Plotly’s `newPlot` API within a minimal HTML layout.

VVamsi Krishna

85% match

Loading thumbnail…

ICE6 : Scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, plotting flipper length against body mass for individual penguins. Each point is colored by species—orange for Adelie, red for Gentoo, and blue for the remaining species—using D3’s `scaleLinear` and `extent` functions to map data to screen coordinates. The SVG circles are positioned with `cx` and `cy` attributes, and the axes are rendered via `axisLeft` and `axisBottom` from D3 v5. The code uses D3’s `csv` loader to fetch the data and a `join` operation to bind it to circle elements.

99176371431

85% match

Loading thumbnail…

ICE-6-2

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or other). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub gist, scale the axes, and render SVG circles with variable radii. Additional bill measurements are stored as data attributes but not visualized. The chart includes labeled axes and a title, with margins set around the full window dimensions.

HHARSHA BUDDANA

85% match

Loading thumbnail…

ICE6_Nitheesh-Sama-scatterplot

This scatter plot visualizes penguin data, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Chinstrap, or Gentoo). The code loads a CSV from a GitHub gist and uses d3.csv, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map the data and render axes. Circles are drawn via SVG selection joins, with margins and labels styled using CSS and inline attributes. The visualization is built with D3 v5 within a React-free HTML page.

NNitheeshSama

84% match