Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menu by mfr(legends)

✓ Published2🌍 Public
Ssrrajendran
Last edited Nov 7, 2018
Created on Oct 10, 2018

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.

AI-generated description

This plot gives the info on how cereals with sugar content (sugar being the most important ingredient to cut down for healthy diet) are rated. This scatter plot shows data about cereals, from https://perso.telecom-paristech.fr/eagan/class/igr204/datasets

MIT Licensed

Similar vizzes

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
100% 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
85% match
Loading thumbnail…

D3 Color Scatterplot

This scatterplot compares cereal manufacturers by plotting each product's rating against its calorie count. The visualization encodes the manufacturer as color, with Kellogg's points in red and Nabisco points in blue, and includes a categorical legend to distinguish the two brands. The chart is rendered as an SVG using D3 v7, with linear scales for both axes and a sequential color legend built with the d3-legend library. The underlying data is loaded from a CSV file containing manufacturer, rating, and calorie fields.

Mmariahdiaz
84% match
Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Ssrrajendran
84% match
Loading thumbnail…

Cereals Scatter Plot

This scatter plot visualizes the relationship between sugar content and consumer ratings for various breakfast cereals. Each red circle represents a cereal, positioned by its sugar level on the x-axis and its rating on the y-axis. Hovering over a point enlarges the circle and displays its exact coordinates. The visualization uses D3.js (v5) with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and an ordinal color scale for the legend. Data comes from a local CSV file containing nutritional information.

Ssrrajendran
83% 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
83% 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
83% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between the ratings and sugar content of various cereals. Each circle represents a cereal, positioned along the y-axis by its sugar level and the x-axis by its rating score. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for the axes, and d3.axisLeft and d3.axisBottom to render them in an SVG. A title and axis label are included, though the data source URL points to a cereal dataset from GitHub.

Vvpruden1
82% match