Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
FFlorisPex
Last edited Apr 29, 2020
Created on Apr 29, 2020
Forked from HTML Starter

A scatterplot visualizes cereal products by calories on the x-axis and protein content on the y-axis, with each dot colored by manufacturer. Hovering a dot displays a tooltip with the cereal name and coordinates. Built with d3.v3 and React, it uses d3.csv to load data, d3.scale.linear for axes, d3.svg.axis for ticks, and d3.scale.category10 for color mapping, rendered as SVG with mouseover transitions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
93% 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
92% 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
88% match
Loading thumbnail…

Cereal Scatter

This scatter plot visualizes the nutritional properties of various cereals, allowing users to compare any two attributes from the dataset via dropdown menus. Each cereal is represented as a colored dot, with the color mapping to the cereal's name. The visualization is implemented in React, using D3's `scaleLinear` and `scaleOrdinal` for scaling and color assignment. Hovering over a point fades all other points, highlighting the selected cereal. Data is loaded from a CSV file containing the cereal dataset.

AAnthony Ynami
86% match
Loading thumbnail…

Scatterplot Tutorial

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.

CCodyWeisbach
82% 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
82% match
Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Ssrrajendran
82% match
Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Ssrrajendran
82% match