100%

Simple Scatter Plot Fast Food Nutrition

✓ Published0🌍 Public

Last edited Sep 17, 2024

Created on Sep 17, 2024

This scatter plot visualizes the relationship between calories and protein content in fast food items, with each point representing a menu item from the fast-food nutrition dataset. The chart uses a light gray background for the plot area and semi-transparent circles to show overlapping data points. The code relies on d3's scaleLinear, extent, and axis functions to compute scales and render axes, while the @curran/axis-labels library provides labeled axis text. Circle radius and opacity are configured through parameters passed to the viz function.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fastfood Scatter Plot

This scatter plot visualizes nutritional data for fast food menu items, plotting calories against protein content. Each circle represents a menu item, colored by its food category using a categorical color scale. The visualization includes labeled axes, grid lines, and a clickable legend for category selection. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs. Data is loaded via D3's `csv` function from a McDonald's nutritional dataset (2017). The SVG rendering includes axis tick marks, axis labels, and a title, with legend items that respond to click events.

Wwangjonathan

89% match

Loading thumbnail…

ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content in fast food items, with each circle representing an individual menu item. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and SVG circles with steelblue fill to encode the two nutritional variables. Restaurant names and item details from the dataset are not shown, but the chart includes labeled axes and a title. The code applies opacity to reveal overlapping points across the 147 items in the dataset.

Ppvvaishnavi93@gmail.com

82% match

Loading thumbnail…

Fork of ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content across fast food items from various restaurants. Each circle represents a single menu item, plotted with its calorie count on the x-axis and protein grams on the y-axis. The visualization uses d3.scaleLinear to map data values to pixel positions, with circles appended to an SVG canvas at 4px radius. Calorie and protein values are parsed from the CSV data using d3.csv, and d3.axisBottom and d3.axisLeft render the axes with labeled text annotations.

Ppvvaishnavi93@gmail.com

81% match

Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot visualizes the relationship between calories and protein content across fast food menu items from a CSV dataset. Each orange circle represents a menu item, positioned by its calorie and protein values. The chart includes labeled axes and a title, rendered as an SVG. The visualization uses D3 v7 in a React framework, employing `d3.csv` for data loading, `d3.scaleLinear` for coordinates, `d3.axisBottom` and `d3.axisLeft` for axes, and D3 selections to append and style the circles.

Ppvvaishnavi93@gmail.com

80% match

Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content for 146 fast food items, with each point representing a menu item from restaurants like McDonald’s, Taco Bell, and Subway. The visualization uses d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft to render the scales, while d3.csv loads the data from a CSV file. Circles are drawn with SVG attributes. The chart title and axis labels are added using SVG text elements.

Ppvvaishnavi93@gmail.com

79% match

Loading thumbnail…

Fastfood Scatter Plot With Menus, Legend, and Tooltips

This interactive scatter plot visualizes nutritional data for McDonald’s menu items, sourced from a CSV hosted on VizHub. Users select which two nutritional attributes (e.g., Calories, Sodium) to compare using dropdown menus, while colored circles represent item categories (Beef, Chicken, etc.). A clickable color legend filters the data, and hovering over a circle reveals a tooltip with the item’s name, category, and values. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition()` for animated circle updates, with SVG rendering and interactive menus.

Wwangjonathan

79% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for menu items, with each point colored by category using a D3 ordinal color scale. The visualization uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is loaded asynchronously from a GitHub gist via `d3.csv`, then mapped to SVG circles with `d3.select` and `append`. The SVG rendering includes styled axes and labeled dots within a fixed 460×400 viewport.

Vvp9156623@gmail.com

79% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes McDonald’s menu items, plotting calories against protein with each point colored by food category. Users can click the color legend to highlight a specific category, dimming other points, while hovering over a circle displays a tooltip with item details. The visualization is built with D3 v5, using `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and data is loaded from a CSV via `d3.csv`. The chart includes interactive dropdown and legend components, rendered as SVG with mouse event handlers.

Wwangjonathan

78% match