Skip to main content
SimilarExport ZIP
100%

Activity6_Task3

✓ Published0🌍 Public
Hhemanthdummy999@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

A scatter plot of cereal nutritional data maps calories on the x-axis against protein content on the y-axis. Each dot represents a cereal type, colored by manufacturer, with a tooltip showing the cereal name and values on hover. The visualization uses D3 v3 scales, axes, and SVG circles, with data loaded from a local CSV file.

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…

Activity6_Task3 tuto

This scatterplot shows the relationship between calories and protein for 77 breakfast cereals, with each dot color-coded by manufacturer. Hovering over a dot reveals the cereal name and its exact values in a tooltip. The visualization uses D3 v3 with SVG rendering, d3.csv to load the data, d3.scale.linear for axes, and d3.svg.axis to draw them. A legend identifies the color categories.

Kkaringusathwika@gmail.com
89% match
Loading thumbnail…

Activity6_Question3

This scatterplot shows the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer. Hovering over a circle reveals the cereal name and its exact values in a tooltip. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. A legend identifies the manufacturers, while axis labels and gridlines provide context for the quantitative comparison.

SSiddhartha Alwala
86% 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
85% 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
84% match
Loading thumbnail…

Untitled

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.

FFlorisPex
83% match
Loading thumbnail…

Activity 6_Task 2 Q2

This example visualizes the nutritional breakdown of 80 cereal products as a stacked bar chart. It uses a D3.js v7 SVG rendering with a horizontal layout, showing the contribution of three nutrient categories (calories, protein, fat) per cereal brand, as specified in the data.csv file. The chart employs `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the quantitative x-axis. Interactive tooltips display exact values per category and cereal when hovering over each bar segment, using D3’s event handlers (`mouseover`, `mousemove`, `mouseout`).

Aakankshareddygorla@my.unt.edu
83% match
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
83% 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
82% match