Skip to main content
SimilarExport ZIP
100%

CS573 Final Project - Average Calories by Restaurant

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

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.

AI-generated description

An interactive and responsive bar chart showing the calories 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
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
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
89% 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…

ICE-6 Marks and Channels

This visualization shows a bar chart comparing the average calorie content of menu items across eight fast-food restaurants, using data from a CSV file with nutritional information. The chart uses steelblue bars to represent each restaurant’s average, with the x-axis listing restaurant names and the y-axis showing calorie values. Built with React and D3 v7, the code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric axis, and `d3.rollups` to compute the mean calories per restaurant. SVG rendering handles all graphical elements, and axis labels and a title are added through D3’s SVG text functions.

Ppvvaishnavi93@gmail.com
82% match
Loading thumbnail…

CS573 Final Project - Viz Summary

This visualization gallery presents an analysis of nutritional data from six major fast-food chains, sourced from a Kaggle dataset. The first phase uses D3.js bubble charts to compare relationships between key nutrients, such as cholesterol, saturated fat, and sugar against sodium content. The second phase employs bar charts to display the average values of these nutrients per restaurant. The visualizations are built with the D3.js library, rendered interactively and responsively within embedded iframes on VizHub.

Ppbruss@bu.edu
81% match
Loading thumbnail…

Fork of ICE-6 Marks and Channels

This bar chart displays the average calorie count for menu items at several fast-food restaurants, using data from a CSV file. The visualization encodes the average calories on the y-axis and restaurant names on the x-axis using rectangular bars. Built with React and D3.js (v7), the code uses `d3.csv` to fetch data, `d3.rollups` and `d3.mean` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes, rendering the final chart as SVG.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This bar chart displays the average calories for each fast-food restaurant, using a dataset of individual menu items with their nutritional information. The visualization is rendered as an SVG using the D3.js v7 library. The code loads the CSV data, groups it by restaurant, and computes the mean calorie value for each. It then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, drawing bars via appended `rect` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the x-axis labels are rotated for readability.

Ppvvaishnavi93@gmail.com
81% match