CS573 Final Project - Viz Summary

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.

81% match

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.

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.

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.

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.

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.

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.

79% match

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

This scatter plot visualizes the relationship between cholesterol and sodium levels across menu items from six major fast food chains, with bubble size representing calorie count. The visualization uses D3.js scales and axes from the `@pbruss/responsive-axes` library, rendering circles with opacity values and a tooltip that displays item details on hover. An interactive legend allows users to highlight specific restaurant categories by fading non-matching bubbles. Data comes from the Kaggle fast food nutrition dataset, and the chart responds to container resizing through the `observeResize` function.