Skip to main content
SimilarExport ZIP
100%

CS573 Final Project - Average Saturated Fat (g) Levels by Restaurant

✓ Published1🌍 Public
Ppbruss@bu.edu
Last edited Nov 30, 2024
Created on Nov 15, 2024

This interactive bar chart displays the average saturated fat content (in grams) across different fast food restaurant chains, using data from a Kaggle dataset on fast food nutrition. The visualization aggregates rows by restaurant company and computes mean saturated fat values, rendering them as color-coded bars with a light gray inner plot background. Built with D3.js (v7), it employs `scaleBand` and `scaleLinear` for positioning, while a custom tooltip appears on mouse hover to show precise values. The chart is responsive, using the `observeResize` and `axes` helper APIs to adapt its dimensions and labels dynamically.

AI-generated description

An interactive and responsive bar chart showing the average saturated fat levels by fast food restaurant. Includes a tooltip feature to view the exact values.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

CS573 Final Project - Average Calories by Restaurant

This interactive bar chart shows the average calorie counts for six fast food restaurants, using data from a Kaggle fast food nutrition dataset. Colored bars represent each restaurant, and hovering over a bar turns it black and displays a tooltip with the exact calorie value. The visualization is built with D3.js v7, using `scaleBand` and `scaleLinear` for axes, and relies on the `@pbruss/responsive-axes` library for chart layout. The chart is responsive, with resizing handled by `observeResize`, and includes labeled axes for restaurant names and calorie counts.

Ppbruss@bu.edu
90% match
Loading thumbnail…

CS573 Final Project - Average Cholesterol (mg) Levels by Restaurant

This interactive bar chart compares average cholesterol levels (in milligrams) across fast food restaurant chains, using data from a Kaggle nutrition dataset. Each bar is color-coded by company, and hovering over a bar turns it black while displaying a tooltip with the precise average value. Built with D3, the visualization uses `scaleBand` and `scaleLinear` for axes, and the `viz()` function renders the chart with responsive dimensions from `observeResize`. The tooltip and hover interactions are implemented with D3 `select` and event listeners.

Ppbruss@bu.edu
90% match
Loading thumbnail…

CS573 Final Project - Average Sodium (mg) Levels by Restaurant

This interactive bar chart displays the average sodium levels (in mg) for six fast food restaurants, using data from a Kaggle nutrition dataset. Each bar is color-coded and includes a hover tooltip that reveals the exact average value. The visualization is built with D3.js, using `scaleBand` and `scaleLinear` for axes, while the `@pbruss/responsive-axes` library handles responsive sizing. Bars change color on mouseenter and revert on mouseleave, with tooltip positioning managed through mouse events. The chart also includes labeled axes and a background rectangle for clarity.

Ppbruss@bu.edu
88% match
Loading thumbnail…

CS573 Final Project - Average Sugar (g) Levels by Restaurant

This example shows a bar chart of average sugar levels (in grams) across six fast-food restaurant chains, using data from a Kaggle fast-food nutrition dataset. It uses D3.js version 7.8.5 with `scaleBand` and `scaleLinear` for positioning, and `d3.group` and `d3.mean` to aggregate the data. Hovering over a bar turns it black and displays a tooltip with the exact average value, while a responsive layout is handled by the `observeResize` and `axes` functions from external libraries.

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

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

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.

Ppbruss@bu.edu
84% match