Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Mmboinapally17
Last edited Mar 9, 2023
Created on Mar 9, 2023

This example visualizes the relationship between flipper length and body mass for three penguin species, with each species encoded by color. The scatter plot uses D3’s `scaleLinear` and `extent` to map data values to SVG circle positions, with axes generated via `axisLeft` and `axisBottom`. Data is loaded from a CSV using `d3.csv`, and the chart also encodes culmen length redundantly through circle `rx` and `ry` attributes, though the radius remains constant. The visualization fills the window using `window.innerWidth` and `window.innerHeight`, with custom font styling for axis labels.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This example visualizes the relationship between flipper length and body mass across three penguin species from a CSV dataset. D3.js v7 loads the data with `csv` and renders an SVG scatter plot, coloring each point by species using a custom marker function. The x-axis maps flipper length, the y-axis maps body mass, while radius and color are also encoded with culmen dimensions and species. Axes are generated with `axisLeft` and `axisBottom`, paired with scaleLinear and extent domains.

Bbhanuprasadk19
96% match
Loading thumbnail…

ICE 6-2

This scatter plot displays the relationship between flipper length and body mass for three penguin species, using D3.js v5 within an HTML page. Each point is colored by species, and also encodes culmen length and depth as the x and y radii of oval marks. The chart loads remote CSV data, uses d3.csv for parsing, and constructs axes with d3.axisLeft and d3.axisBottom. The visualization includes labeled axes and a title, rendered as SVG elements with custom styling.

Aayodhyanandh
94% match
Loading thumbnail…

ICE-6

This example visualizes penguin body measurements from a Gist-hosted CSV file, plotting flipper length against body mass as colored circles for three species. The SVG scatter plot uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to screen positions, with circle radii fixed at 5 pixels. Each point is colored by species via a custom marker function, while culmen length and depth are stored as extra attributes but not visually encoded. The chart includes axes, rotated y-axis label, and a title, all rendered using D3 selections and SVG elements.

Mmboinapally17
94% match
Loading thumbnail…

ICE-6 Scatter plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color-coded circles. The D3 v5 code loads CSV data, scales the axes with `scaleLinear`, and renders SVG circles with a fixed radius. It adds axis labels and a title using SVG text elements. The visualization fills the browser window and uses `axisLeft`, `axisBottom`, and marker functions to differentiate species.

Aabdhaseeeb
94% match
Loading thumbnail…

ICE-6 Q2

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species. The SVG visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a CSV file, map values to coordinates, and render axes. The code binds circles to data rows and applies custom styles for axis labels and tick fonts.

RRebecca Moore
94% match
Loading thumbnail…

ICE6 : Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with color encoding for species and point size reflecting bill dimensions. Built with React and D3 v5, the visualization uses `d3.csv` to load the Penguin dataset, `scaleLinear` for axis scaling, and SVG `circle` elements for marks. The code maps bill length and depth to the `rx` and `ry` attributes, creating elliptical points that vary per observation. Axis labels and custom fonts are rendered through SVG text elements, with the plot centered on screen.

MMounika0927
93% match
Loading thumbnail…

ICE_06

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using a thistle background with crimson, dark blue, and green circles. Built with React and D3 v5, the code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data from a GitHub-hosted CSV file. Each circle’s x and y positions derive from flipper and body measurements, while the `join` operator appends SVG circles with radii and species-based colors.

DDivyasri0310
92% 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
92% match