Dinosaur D3 Scatter Plot

100%

Dinosaur D3 Scatter Plot

✓ Published2🌍 Public

Last edited May 8, 2021

Created on May 2, 2021

This scatter plot visualizes dinosaur length against weight, with each point representing a species and hovering revealing its genus, period, diet, and measurements. Using D3 v6, the code loads JSON data from a GitHub gist via `d3.json`, parses numeric fields, scales axes with `scaleLinear`, and renders circles in an SVG. Axis labels are generated with `axisLeft` and `axisBottom`, while `d3.format` handles comma-separated weight values. The dataset originates from the Natural History Museum, London.

AI-generated description

A scatterplot of the length (x-axis) vs. the weight (y-axis) of dinosaurs.

Hover over each plot for further details about the dinosaur.

Uses the Dinosaur Directory Dataset, courtesy of the Natural History Museum, London (nhm.ac.uk)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Dinosaur D3 Scatter Plot

A scatterplot of dinosaur length versus weight, with each circle representing a dinosaur specimen. Hovering over a point reveals its genus, period, diet type, and measurements via an SVG `<title>` element. The visualization uses d3.json to load data, d3.scaleLinear for the axes, and d3.axisLeft/axisBottom for ticks. Rendered with SVG circles and D3 v6, data comes from the Natural History Museum's Dinosaur Directory dataset.

CCurran Kelleher

93% match

Loading thumbnail…

Fork of Dinosaur D3 Scatter Plot

A scatterplot of dinosaur length versus weight, plotted with D3 scales and axes. Each point is a circle positioned by `d3.scaleLinear` domains, with an SVG `<title>` tooltip revealing the genus, period, diet type, length, and weight on hover. Data comes from a JSON dataset via `d3.json`, parsed with a custom row-accessor, and rendered using SVG circles and `d3.axisLeft`/`d3.axisBottom`. Values are formatted with `d3.format` for comma-separated weight labels.

Hharika-1929

92% match

Loading thumbnail…

D3 Scatter Plot H/W finalised

This scatter plot visualizes the relationship between height and weight for individuals ranging from newborns to over 20 years old, using a self-generated dataset stored as a CSV on GitHub. The SVG rendering uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the data points, with each circle representing a single observation. Hovering over a point transitions its fill to orange, while the axes include labeled weight and height scales. The chart is styled with the Share Tech font and positioned using absolute CSS elements.

CChawin Sungwalngern

75% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and coloring each point by species (Adelie, Gentoo, and Chinstrap). The code loads data from a CSV URL using `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to build the axes. SVG circles are appended to the DOM with radius and fill attributes derived from bill dimensions and species, respectively.

LLakshmanRangisetti

74% match

Loading thumbnail…

Scatter Plot

A scatter plot maps penguin flipper length to body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using cyan, magenta, and green. The SVG visualization is built with D3 v5, using `scaleLinear` for axes, `extent` to compute domains, and `axisLeft`/`axisBottom` for ticks. Data is loaded as CSV from a GitHub gist, and each circle’s size is fixed at radius 5 while bill dimensions are stored as extra attributes. The chart includes a title and cursive font styling for axes.

Kkrishnareddy23

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

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

73% match

Loading thumbnail…

Penguin Scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species using an ordinal color scale. The visualization uses D3 v7’s `d3.csv` to load a remote penguin dataset, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are drawn as SVG elements with `d3.selectAll` and `.join`, while axis labels are added via SVG text elements. The code loads data from a GitHub Gist and renders the chart within an SVG container.

SSomu1433

73% match