Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Mmanthenasirisha06@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Reusable D3 Scatter Plot

This example presents three separate scatter plots visualizing nutritional information from a menu items dataset, comparing carbohydrates, protein, and total fat across different food items. Using D3.js v7, each plot renders with SVG circles, band scales for the categorical menu items along the x-axis, and linear scales for numeric nutritional values on the y-axis. The code loads the CSV data with `d3.csv`, then calls a reusable `createScatterPlot` function to generate each chart with rotated axis labels, titles, and rotated text ticks.

Mmanthenasirisha06@gmail.com
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3.js scatter plot animates through three pairings of nutritional data from a CSV file of menu items: carbohydrates versus protein, carbohydrates versus total fat, and protein versus total fat. The code uses D3 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles with an SVG. A `setInterval` callback updates the x and y value mappings every two seconds, changing the chart’s title accordingly. The visualization employs a custom `scatterPlot` function and D3’s `selectAll` and `join` for efficient updates.

Mmanthenasirisha06@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery item presents a fork of a reusable D3 scatter plot that visualizes nutritional data from a Food dataset, plotting variables like Protein and Calories as points. The chart cycles through different x-axis dimensions—Calories, Carbohydrates, Fat, and Protein—every two seconds using `setInterval`, updating the visualization with animation. Built with D3 v6, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined and updated dynamically. The implementation follows a reusable chart pattern, using closures and setter functions to configure the plot’s properties.

Mmounishnaidu96@gmail.com
83% 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
82% 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
82% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This example visualizes nutritional component comparisons across ten McDonald’s menu items, plotting three lines for total fat, protein, and carbohydrates on a shared band scale. It uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` for smooth paths. Data is loaded from a CSV via `d3.csv`, and `d3.schemeCategory10` colors the lines. The chart includes rotated x-axis labels and a legend, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Mmanthenasirisha06@gmail.com
81% match