Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

23453bd0bfd64096a1ae6adadf3147f5

Open

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

0 stars1🌍 Public
Ppbruss@bu.edu
Last edited Nov 29, 2024
Created on Nov 5, 2024

This scatter plot from the CS573 Final Project visualizes the relationship between sugar (g) and sodium (mg) across menu items from six fast-food chains, with bubble size encoding calories. Data comes from a Kaggle fast-food nutrition dataset. The D3.js visualization uses `scaleLinear` for axes, tooltips on hover, and an interactive legend that highlights bubbles by restaurant category when hovered, while `observeResize` ensures responsive rendering.

AI-generated description

CS573 Final Project Chart showcasing a <b>responsive</b> Sugar vs Sodium levels scatter plot for menu items belonging to six of the most popular fast food restaurants. Circle size is derived by the calories of the menu item.

Circles are color-coded by restaurant name as follows:

  • McDonald's (Pink)
  • Wendy's (Gray)
  • KFC (Brown)
  • Pizza Hut (Green)
  • Burger King (Orange)
  • Taco Bell (Purple)

Dataset: https://www.kaggle.com/datasets/joebeachcapital/fast-food