Skip to main content
SimilarExport ZIP
100%

Fork of Downing 5320 ice6: Rendering Marks and Channels (React + D3)

✓ Published0🌍 Public
Ddldowning
Last edited Mar 12, 2023
Created on Mar 12, 2023

This scatter plot shows the relationship between body mass and flipper length for three penguin species, using colored circles to distinguish Adelie, Chinstrap, and Gentoo penguins. The visualization loads CSV data via d3.csv, scales the axes with d3.scaleLinear and d3.extent, then renders SVG circles with attributes set by d3.select and join. Axis labels and tick marks are generated using d3.axisLeft and d3.axisBottom, while the custom marker function maps species names to red, green, and blue fills.

AI-generated description

A program that shows info about the top 10 fantasy worlds.

Data: This data is purely fictional. Literally. I made it up. (https://gist.githubusercontent.com/dldowning/f3bd6a897eb5038e765ce74f4ec8b46d/raw/1b56ee7987f1d5518f22aaa7106634ca7942782d/Downing_ice6_data.csv).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Penguin Data

This visualization displays a scatter plot of penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis. Each point is colored by species (Adelie, Gentoo, and Chinstrap) using a color switch function. The code loads data from a CSV file via `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes and circles. The SVG is appended to the body, with labels for the axes and title, using D3 v5 within a React framework.

NNikitha123171
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with color-coded circles distinguishing Adelie, Gentoo, and Chinstrap species. The code loads CSV data via `d3.csv`, parses numeric columns, and renders an SVG chart using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. Circles are positioned with `d3.attr` for x and y coordinates, while fill colors are assigned via a custom marker function. The visualization includes labeled axes and a title, with axis text styled using cursive font.

Bbhanuteja1807@gmail.com
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or other). The visualization uses D3 v5 and React, rendering with SVG. It loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for axes, and draws circles with `data.join`. Axis labels and a title are added using D3’s `axisLeft`, `axisBottom`, and text elements.

Ssnehareddygurram
88% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This interactive scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and using circle color to distinguish species (Adelie, Gentoo, and Chinstrap). The SVG-based visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft/axisBottom for axes. Each circle’s rx and ry attributes are set from bill dimensions, creating an elliptical distortion, while d3.selectAll().join() manages the marks. Axis labels and a title are added via SVG text elements.

Vvryvarma5577@gmail.com
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass across three penguin species, using color to distinguish Adelie, Gentoo, and Chinstrap. The visualization reads a CSV dataset and renders SVG circles with d3.select, scaleLinear, extent, axisLeft, and axisBottom. Additional variables—bill length and depth—are set as circle corner radii, though they do not visibly affect the circular marks. The chart includes labeled axes and a title, with species-specific coloring applied via a custom marker function.

Ssnehareddygurram
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species—Adelie, Gentoo, and Chinstrap—using color-coded circles. It loads a CSV dataset via `d3.csv`, parses numeric fields, and maps axes with `d3.scaleLinear` and `d3.extent`. The SVG rendering uses `d3.select`, `svg.append`, and `data.join` to draw circles, with axes added via `d3.axisLeft` and `d3.axisBottom`, plus custom axis labels and a title.

VVineela Reddy
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, visualizing flipper length against body mass. Each point is colored by species (Adelie, Gentoo, or Chinstrap), with additional fields for culmen length and depth stored in the data binding. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) to map the dataset, rendering circles as SVG elements with a fixed radius. The code also adds axis labels and a title styled with custom fonts, all within a React-compatible HTML page.

MMounishSeeni
87% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin dataset visualizes flipper length against body mass as a scatter plot, with circles colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5's `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG circles to render the data. A secondary pair of attributes—bill length and bill depth—are stored on each mark but not directly displayed. The chart includes rotated axis labels and a title, rendered via SVG within a React-free HTML page.

Kkarumanchimanasa
87% match