Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

An interactive and responsive bar chart showing the average sugar 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 Saturated Fat (g) Levels by Restaurant

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.

Ppbruss@bu.edu
88% 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 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
88% 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
87% match
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
84% 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
84% 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
83% match
Loading thumbnail…

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

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.

Ppbruss@bu.edu
83% match