Skip to main content
SimilarExport ZIP
100%

ICE-6 Scatter Plot- Sharanya Javvaji

✓ Published0🌍 Public
SSharanya1307
Last edited Mar 23, 2023
Created on Mar 23, 2023

This scatter plot displays penguin flipper length against body mass, with each point colored by species using a custom color mapping function. The chart also encodes culmen dimensions in the circle’s rx and ry attributes, though these are not visually varied since the radius is fixed. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map scales and axes, while loading data from a CSV via `d3.csv`. Rendered as SVG in a React project, it includes axis labels and a title, with the body margin removed for a full-screen layout.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6_SharanyaSriram Scatterplot

This scatterplot visualizes penguin data, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (red, blue, or black). The code uses D3 v5 with SVG rendering in a React framework, loading CSV data via `d3.csv`, scaling axes with `scaleLinear` and `extent`, and drawing circles with `selectAll` and `join`. Axis labels and a title are added using SVG text elements, with tick styling via CSS.

SSharanyaSriram
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

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

SharanyaSriram-ICE6

This scatter plot displays the relationship between flipper length and body mass for penguins, colored by species (Adelie, Gentoo, and Chinstrap). The visualization loads a CSV dataset from a GitHub gist and renders circles as SVG marks using D3 v5, with `scaleLinear` for x–y axes and `axisLeft`/`axisBottom` for tick marks. Each circle’s fill is determined by a switch function mapping species to colors, while the circle’s `rx` and `ry` attributes are set from culmen measurements, though the radius remains fixed. Axis labels and a title are added as static SVG text elements.

SSharanyaSriram
91% match
Loading thumbnail…

ICE6 - Penguin Dataset Scatter Plot

This scatter plot visualizes the penguin dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (orange, brown, or green). The visualization uses D3.js v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, scale axes, and render SVG circles. Data is fetched from a GitHub Gist, and the chart is sized to the full browser window, with custom styling for tick font sizes and axis labels.

NNiharika-Guthikonda
91% match