Skip to main content
SimilarExport ZIP
100%

Fastfood Scatter Plot

✓ Published2🌍 Public
Wwangjonathan
Last edited Oct 31, 2018
Created on Sep 9, 2018
Forked from Making a Bar Chart

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.

AI-generated description

This scatter plot shows data about the protien that is contained in each item on the fastfood menu, from Nutritional Data for Fast Food 2017.

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

Fastfood Scatter Plot With Menus, Legend, and Tooltips

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.

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
88% 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
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…

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
82% 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
82% match