Scatter Plot with Different Colors

100%

Scatter Plot with Different Colors

✓ Published0🌍 Public

Last edited Jul 20, 2023

Created on Jul 20, 2023

A scatter plot displays penguin bill length against bill depth, with each point colored by species using a D3 ordinal color scale. The visualization loads data from an external CSV file and renders circles in an SVG container. It uses D3 v6 scaleLinear for the axes, scaleOrdinal with schemeCategory10 for colors, and includes axis labels and a legend generated from the color scale's domain.

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…

Scatter plot with color

This scatter plot displays the relationship between bill depth and bill length for penguins, with each point colored by species. Built with React and D3 v7, it renders as an SVG using modular components for axes and marks. The data loads from a remote CSV via `d3.csv`, and the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for species-based coloring, and `extent` to set the domain. The axis labels are rotated, and tick marks are styled with a light gray color.

Rrvdv

90% match

Loading thumbnail…

Penguin Scatter Plot With Interactive Color Legend

A scatter plot of penguin bill length versus bill depth, colored by species using a D3 ordinal color scale. The visualization uses React for component structure and renders as SVG. An interactive color legend allows users to hover over species names to highlight corresponding data points, applying a fade effect to non-selected species. Data comes from a cleaned penguins CSV dataset loaded via d3.csv.

PPrashish Paudel

89% match

Loading thumbnail…

Scatter plot with color legend

This scatter plot visualizes the relationship between bill depth and bill length for penguin species, colored by species with a categorical legend. The React-based visualization uses D3 v7 scales (scaleLinear, scaleOrdinal) to map data to SVG circle positions and colors, with data loaded from a CSV file. Custom axis components generate tick marks and labels, while tooltips display formatted values on hover.

Rrvdv

89% match

Loading thumbnail…

scatter Plot

This scatter plot visualizes penguin data showing flipper length against body mass, with each point colored by species. It also encodes bill dimensions through circle position attributes, though these are not visually distinct. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates. Data is loaded via `csv` from a GitHub gist, and points are rendered as circles with species-based fill colors.

BBala Sai Krishna

88% match

Loading thumbnail…

Penguin Scatter Plot

A penguin scatter plot displays the relationship between bill length and bill depth for individual penguins, with each data point represented as a semi-transparent circle. The chart uses D3.js to create a linear scale for both axes, render the plot marks, and draw labeled axes with directional arrows indicating increasing values. The data comes from the @curran/penguins dataset, and the visualization is built using reusable modules that separate axis rendering, scatter plot logic, and the main visualization setup. The code relies on d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom.

SSubhendu Karmakar

88% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, showing flipper length against body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). Circle radii are also mapped to bill measurements. The visualization uses D3 v6 to load CSV data from a remote GitHub gist, parse numeric fields, and render an SVG with `scaleLinear` scales, `axisLeft` and `axisBottom` for axes, and `.join('circle')` to create the data points.

Ssuryavamsi00024

87% match

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays penguin bill length against body mass, with each point colored steelblue and labeled by species on hover via a tooltip. The chart loads data from a CSV file hosted on GitHub and renders as SVG using D3 v6. Code defines margins, linear scales, and axis groups, while a tooltip follows the mouse to show species, bill length, and body mass. The example demonstrates modular function creation with `createScatterPlot`, and imports D3 from UNPKG.

HHarshithaAmbilpur

87% match

Loading thumbnail…

Assignment 2 - Scatter Plot with color

This scatter plot visualizes the Palmer Penguins dataset, mapping bill length to the x-axis and bill depth to the y-axis. Each dot is color-coded by penguin species (Adelie, Gentoo, Chinstrap) using a categorical palette, with a legend positioned on the right. The visualization loads data from a CSV URL and renders using SVG circles via D3 v6, employing `d3.csv`, `d3.scaleLinear`, `d3.extent`, and the `select` API to construct axes and marks.

Ppasyasahas

87% match