Skip to main content
SimilarExport ZIP
100%

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping

✓ Published1🌍 Public
Ppbruss@bu.edu
Last edited Oct 25, 2024
Created on Oct 24, 2024

This scatter plot shows the relationship between sugar and sodium levels for menu items from six major fast-food chains, with circle size encoding calorie content and color distinguishing restaurants. The visualization uses D3’s scaleLinear and scaleOrdinal functions to map data to positions and categorical colors, while a custom responsive-axes library handles dynamic resizing. Interactive tooltips appear on mouseover, revealing item details from the Kaggle fast-food nutrition dataset. The chart filters out entries with missing values and displays a title above the plot.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This scatter plot visualizes the relationship between sugar and sodium levels across menu items from six fast-food chains, with circle size encoding calorie count and colors distinguishing restaurants by name. It uses D3’s `scaleLinear` and axis functions to map nutritional values, while the `axes` utility from `@pbruss/responsive-axes` handles responsive scaling. Interactive tooltips appear on mouseover via D3 event handlers, and a static legend displays the hard-coded category colors. Data comes from the Kaggle fast-food nutrition dataset, with rendering handled through SVG circles and rectangles.

Ppbruss@bu.edu
97% match
Loading thumbnail…

CS573 Final Project - Sugar (g) vs Sodium (mg)

This scatter plot displays the relationship between sodium (mg) and sugar (g) levels across menu items from six popular fast food restaurants, with circle size encoding calorie count and color distinguishing individual menu items. The visualization uses D3.js APIs including `scaleLinear`, `scaleOrdinal`, and `axisLeft` to construct the axes and scales, while a custom `observeResize` function from `@pbruss/responsive-axes` enables responsive width and height adjustments. Interactive tooltips appear on hover via D3 event handlers, and the data originates from a Kaggle dataset of fast food nutrition facts.

Ppbruss@bu.edu
96% match
Loading thumbnail…

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

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.

Ppbruss@bu.edu
96% match
Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg) w/ category grouping

This scatter plot from the CS573 Final Project visualizes the relationship between saturated fat (grams) and sodium (milligrams) for menu items from six popular fast-food restaurants, using circle size to represent calorie count and color to distinguish restaurant brands. Built with D3.js, it uses `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and the `@pbruss/responsive-axes` library for dynamic resizing. Interactive tooltips display item details on hover, with data sourced from the Kaggle "Fast Food" dataset.

Ppbruss@bu.edu
90% match
Loading thumbnail…

CS573 Final Project - Cholesterol (mg) vs Sodium (mg) w/ category grouping

This scatter plot shows the relationship between sodium and cholesterol for menu items from six fast food chains, with circle size encoding calorie count and color distinguishing each restaurant. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for color coding, and includes interactive tooltips on hover. The chart is rendered responsively using the @pbruss/responsive-axes library, pulling data from a Kaggle fast food nutrition dataset.

Ppbruss@bu.edu
89% match
Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg)

This interactive scatter plot visualizes the relationship between saturated fat (in grams) and sodium (in milligrams) for menu items from six popular fast-food restaurants, using a Kaggle dataset. It shows individual menu items as circles, with the circle size encoding calorie count and color representing the restaurant. Built with D3.js v7, the plot uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values, while a custom tooltip appears on hover. The visualization is responsive, using `@pbruss/responsive-axes` to adapt the axes to the container's dimensions.

Ppbruss@bu.edu
88% match
Loading thumbnail…

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

This scatter plot visualizes the relationship between sodium and cholesterol levels in menu items from six major fast-food chains, with bubble size indicating caloric content. The visualization uses D3.js APIs including `select`, `scaleLinear`, `axisLeft`, and `zoom` to provide interactive pan-and-zoom functionality. Data from a Kaggle fast-food nutrition dataset is rendered as color-coded circles, with a tooltip displaying item details on hover and an interactive legend for toggling restaurant categories.

Ppbruss@bu.edu
88% match
Loading thumbnail…

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

This chart displays a responsive scatter plot of saturated fat versus sodium for menu items from six fast food restaurants, with circle size encoding calorie count. Color-coded circles represent each restaurant, and a legend identifies the categories. Tooltips reveal item details on hover. The visualization uses D3.js scales and axes, with the `observeResize` and `axes` libraries to handle responsive dimensions, and filters missing data from the Kaggle fast food nutrition dataset.

Ppbruss@bu.edu
88% match