Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

099c8f1985d24690be33112148632419

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

0 stars1🌍 Public

This scatter plot visualizes the relationship between cholesterol and sodium levels across menu items from six major fast food chains, with bubble size representing calorie count. The visualization uses D3.js scales and axes from the `@pbruss/responsive-axes` library, rendering circles with opacity values and a tooltip that displays item details on hover. An interactive legend allows users to highlight specific restaurant categories by fading non-matching bubbles. Data comes from the Kaggle fast food nutrition dataset, and the chart responds to container resizing through the `observeResize` function.

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