Skip to main content
SimilarExport ZIP
100%

Fastfood Scatter Plot With Menus, Legend, and Tooltips

✓ Published0🌍 Public
Wwangjonathan
Last edited Mar 6, 2019
Created on Oct 9, 2018
Forked from Cars Scatter Plot

This interactive scatter plot displays nutritional data for McDonald’s menu items, sourced from a McDonald’s CSV dataset. Users can select which two nutritional variables to compare via dropdown menus, with each category colored using `d3.scaleOrdinal` and a clickable legend. The chart includes tooltips for point details, and a brushing interaction with `d3.brush` allows zooming into a region. A coordinated data table and parallel coordinates chart are also linked, updating based on selections with SVG and canvas rendering.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

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
95% match
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…

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
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the nutritional values of ten popular McDonald's menu items, comparing carbohydrates, protein, and total fat. The data is loaded from a CSV file and rendered using D3.js v7. The chart uses a band scale for the x-axis and a linear scale for the y-axis, with each item positioned along the bottom. Three distinct symbol types—diamond, cross, and circle—represent the different nutrients, plotted using `d3.symbol` and colored red, blue, and green respectively. The visualization includes labeled axes, a titled chart, and rotated x-axis labels for readability.

Mmanthenasirisha06@gmail.com
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The scatter plot visualizes nutritional values—carbohydrates, protein, and total fat—for McDonald's top ten selling menu items, using a red, blue, and green circle for each nutrient per item. It loads CSV data via `d3.csv` and renders SVG circles positioned with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated labels, while `d3.select` and `append` build the chart.

Mmanthenasirisha06@gmail.com
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Total Fat and Protein content for a curated selection of McDonald’s menu items, with circle size encoding the Carbohydrate level. The chart uses D3.js (v7) to build linear scales and axes, drawing circles for each food item. A reusable scatter plot module, configured with accessor functions for the x, y, and z values, renders the data from a CSV file loaded via D3’s `csv` function. The visualization highlights nutritional comparisons among popular items, using axis labels and gridlines to clarify the quantitative values.

Mmanthenasirisha06@gmail.com
80% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes calories versus protein for McDonald’s menu items, with each circle colored by food category. The visualization uses d3 scales and axes to position points, and includes interactive tooltips that display item details on hover. A categorical color legend filters the display, dimming circles that don’t match the selected category. The data comes from the UCI Auto MPG dataset, though the code actually loads McDonald’s nutritional information via d3.csv.

Vveagy
80% match
Loading thumbnail…

McDonald's Nutrition

A scatterplot matrix displays nutritional data for McDonald’s menu items from a CSV file, using JavaScript’s `import` statement to load the data and coercing string values to numbers. The example shows the first item’s values in a JSON format, with the main function writing directly to a container using a template literal and a `pre` element with a fixed font size. The code defines a list of quantitative attributes and logs the keys to the console, but does not render any visual chart.

Ppbruss@bu.edu
79% match