Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

e49582f90246493499c04c7a77b4279e

Open

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

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

This example shows a scatter plot of saturated fat versus sodium for fast-food menu items, with bubble size representing calories. It uses D3.js version 7.8.5 to render the visualization and includes an interactive legend that highlights specific restaurant categories on hover. The plot displays tooltips with detailed nutritional information for each data point. The chart uses the `scaleLinear`, `extent`, and `axisLeft` APIs from D3.js, along with a custom `axes` function from the `@pbruss/responsive-axes` library. Data comes from a Kaggle dataset of fast-food nutrition information.

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