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

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.

97% match

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.

94% match

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.

94% match

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.

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

This scatter plot visualizes the relationship between cholesterol and sodium levels across menu items from six fast-food restaurants, using the fast-food nutrition dataset from Kaggle. Circle size encodes calorie content, while color indicates the restaurant brand, with a legend and hover tooltip displaying item details. The visualization is built with D3.js, utilizing `scaleLinear`, `axisLeft`, and custom mouse event handlers for interaction, alongside the `@pbruss/responsive-axes` library for responsive resizing.

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 - 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.

CS573 Final Project - Cholesterol (mg) vs Sodium (mg)

This scatter plot visualizes the relationship between sodium and cholesterol content in fast food menu items, with each point’s radius encoding caloric value and color indicating the menu item name. The plot uses D3’s `scaleLinear`, `axisLeft`, and `extent` functions for axes and scaling, while `@pbruss/responsive-axes` handles responsive resizing. Hover interactions reveal a tooltip with item, company, sodium, cholesterol, and calories. The code imports data from the `@pbruss/fast-food-nutrition-dataset-v3` package and uses `circleOpacity` to manage point transparency.