Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

scatter plot for menu items vs carbohydrates, protein, total_fat

MIT Licensed

Similar vizzes

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

92% 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

91% 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

86% 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

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Pima Indians diabetes dataset, cycling through different variable pairings every two seconds to reveal correlations. The visualization renders circles for each data point using D3.js version 7, with scales computed from the current x and y value accessors. It employs the reusable `scatterPlot` module pattern, updating axes and circle positions via D3’s data join. The animation cycles through eight columns, including Glucose, BMI, and Age, while the SVG canvas fills the browser window. Axes are drawn using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

AArun

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through columns of the Iris Dataset, switching the x-axis mapping every two seconds among petal width, sepal width, petal length, and sepal length. Using D3 v6 APIs such as `scaleLinear`, `axisLeft`, and `axisBottom`, it renders SVG circles and updates axes via a reusable chart function pattern. The visualization also applies the Share Tech font and loads data from a CSV URL, with the animation driven by `setInterval`.

NNaimisha-M

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four variables from a grocery store dataset, cycling Profit, Quantity, Selling_Price, and Cost_Price on the x-axis while Cost_Price remains on the y-axis. SVG circles are colored by category (Frozen, Grocery, Produce) using a switch statement, with the reusable `scatterPlot()` module handling scales and axes via `scaleLinear`, `axisLeft`, and `axisBottom`. A `setInterval` triggers the x-value changes, rebuilding the plot and updating the axis labels, while custom legends and titles are appended dynamically. Data comes from a CSV loaded with `d3.csv`.

NNaveed945

82% match