Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Mmboinapally17
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

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.

Mmboinapally17
94% match
Loading thumbnail…

ICE 6: Scatterplot

This scatterplot visualizes penguin measurements from a CSV dataset, plotting flipper length against body mass while coloring each point by species (yellow, green, or red). The code uses d3.csv to load and parse the data, then d3.scaleLinear and d3.extent to map values to screen coordinates, with d3.axisLeft and d3.axisBottom for labeled axes. Circles are rendered via SVG selections and data joins, with custom attributes for culmen dimensions. The chart also includes axis labels and a title, all styled with cursive fonts.

Ssreesushmav
93% 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
92% match
Loading thumbnail…

ICE-6

A scatter plot visualizes penguin measurements, plotting flipper length on the x-axis against body mass on the y-axis, with each point colored by species. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. Culmen length and depth are also parsed but not visualized. Axis labels and a title are added via SVG text elements, with the plot sized to the full browser window.

Kkarnisrikanth2212
92% 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
92% match
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
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
Loading thumbnail…

ICE-6

This scatter plot visualizes penguin measurements, plotting flipper length against body mass for individual penguins, with point color encoding species. Circles are positioned using linear scales derived from the data extents, and each point also encodes culmen length and depth through its rx and ry attributes. The visualization uses D3 v7’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG on a React-rendered page. Data comes from a remote gist CSV containing Palmer Penguins measurements, with labeled axes and a title.

Kkarnisrikanth2212
92% match