Skip to main content
SimilarExport ZIP
100%

Scatterplot Tutorial

✓ Published0🌍 Public
CCodyWeisbach
Last edited May 14, 2018
Created on May 14, 2018

This scatterplot shows the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. Built with D3.js v3, it loads data from a CSV file and uses linear scales, SVG circles for the dots, and axes with labeled ticks. A categorical color scale assigns manufacturer colors, and a legend identifies each brand.

AI-generated description

from <a href='http://dataforradicals.com/2017/03/20/the-absurdly-illustrated-guide-to-your-first-d3-scatterplot/'>This tutorial</a>

Similar vizzes

Loading thumbnail…

D3 Scatterplot Example

This example visualizes the relationship between calories and protein content for various breakfast cereals using a scatterplot. Each dot represents a cereal, with its horizontal position mapped to calorie count, vertical position to protein grams, and color indicating the manufacturer. The chart includes labeled axes, a categorical color legend, and interactive tooltips that display the cereal name and exact values on hover. Built with D3.js v3, the code uses the `d3.scale.linear` API for axis scaling, `d3.svg.axis` for rendering, and SVG circles for the data points. The dataset is loaded from a local CSV file and processed with `d3.csv`.

BBTKY
93% match
Loading thumbnail…

ScatterPlot Forked

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer. Built with D3.js v3, it renders the chart as an SVG with axis labels, a legend, and interactive tooltips that display the cereal name and coordinates on hover. The code uses D3 scales, axes, and transitions, reading data from a local CSV file to map the quantitative variables.

MMohamedZaki
93% match
Loading thumbnail…

Untitled

This scatter plot displays the relationship between calories and protein content for 77 breakfast cereals, with each dot colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. The visualization is built with D3 v3, using `d3.scale.linear` for axes, `d3.svg.axis` for tick marks, and `d3.scale.category10` for categorical coloring. Data is loaded from a local CSV file containing nutritional information from the UCI Machine Learning Repository. Animated transitions appear on mouseover, and a legend identifies each manufacturer's color.

SSushanta77
91% match
Loading thumbnail…

ScatterPlot

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals from the `cereal.csv` dataset. Each dot represents a cereal, positioned by its calorie and protein values, with its name and exact coordinates shown in an interactive tooltip on mouseover. Built with d3.v4, the visualization uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles for the data points. The tooltip is implemented with a D3 transition that fades the element in and out.

MMohamedZaki
91% match
Loading thumbnail…

Untitled

This scatter plot visualizes the relationship between calories and protein content for 77 breakfast cereals, with each dot colored by manufacturer. Built with d3.v3 in a React framework, it uses `d3.select` to append an SVG canvas and `d3.svg.axis` for labeled x/y-axes. Dots render as circles with `d3.scale.category10()` for color, and hover tooltips, enabled via `d3.event`, display the cereal name and coordinates. A legend identifies manufacturers.

FFlorisPex
89% match
Loading thumbnail…

Untitled

This example displays a scatter plot of breakfast cereals, mapping calories on the x-axis against protein content on the y-axis, with each point colored by manufacturer. It uses d3.scale.linear for axis scaling, d3.svg.axis for axes, and d3.scale.category10 for categorical color assignment. A custom HTML tooltip appears on mouseover, showing the cereal name and its values. The data is loaded from a CSV file using d3.csv.

Vvenkatajayanth03
87% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, plotting calories against potassium while encoding protein in the dot area and manufacturer with color. Users can zoom and pan through the d3.behavior.zoom interface, and a button click switches the x-axis to carbohydrates with a transition. Hovering reveals tooltips via d3-tip. The SVG rendering uses d3.scale.linear for axes and circle elements with dynamic radius calculations based on protein values.

AAndresAnayaIsaza
86% match
Loading thumbnail…

Visualization

This zoomable scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, encoding each cereal as a circle positioned by calories and protein, with size reflecting sodium content. The SVG-based chart uses d3.v3 and animates smoothly on zoom, letting viewers pan and scale to explore the distribution of cereal brands by manufacturer. Built as a D3.js example, it adapts zoom behavior from earlier scatterplot blocks, rendering the data as an interactive, animated graphic.

GGerardoFurtado
85% match