ICE6_SharanyaSriram Scatterplot

100%

ICE6_SharanyaSriram Scatterplot

✓ Published0🌍 Public

Last edited Mar 11, 2023

Created on Mar 11, 2023

Forked from ICE6_Nitheesh-Sama-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.

AI-generated description

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

Similar vizzes

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

92% match

Loading thumbnail…

ICE-6 Scatter Plot- Sharanya Javvaji

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.

SSharanya1307

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

89% 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

89% 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

89% 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

89% match

Loading thumbnail…

ICE-6

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each point by species using a custom color function. The code loads data from a CSV file via `d3.csv`, scales the axes with `scaleLinear` and `extent`, and renders circles with SVG. Axis ticks are drawn using `axisLeft` and `axisBottom`, with text labels added for both axes and a title.

EEeshwarReddy

88% 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

88% match