Skip to main content
SimilarExport ZIP
100%

Fork of Fork of React & D3 Starter

✓ Published1🌍 Public
Ppvvaishnavi93@gmail.com
Last edited Mar 4, 2026
Created on Mar 4, 2026

This example shows average calories per restaurant from a fast food nutrition dataset, with each restaurant represented by a vertical bar. The bar chart is rendered as an SVG using D3 v7, with data processed through `d3.csv` and aggregated via `d3.rollups` and `d3.mean`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales (`d3.scaleBand`, `d3.scaleLinear`) position the bars and map calorie values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This bar chart displays the average calories for each fast-food restaurant, using a dataset of individual menu items with their nutritional information. The visualization is rendered as an SVG using the D3.js v7 library. The code loads the CSV data, groups it by restaurant, and computes the mean calorie value for each. It then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, drawing bars via appended `rect` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the x-axis labels are rotated for readability.

Ppvvaishnavi93@gmail.com
95% match
Loading thumbnail…

Fork of React & D3 Starter

A bar chart displays the average calories of fast-food menu items for eight restaurant chains, using data from a local CSV file. The visualization aggregates the dataset with `d3.rollups` and `d3.mean` to compute per-restaurant averages. Built with React and D3 v7, the SVG chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` with `.nice()` for the y-axis, rendering steel-blue bars. Both axes are labeled, and restaurant names are rotated on the x-axis for readability.

Ppvvaishnavi93@gmail.com
93% match
Loading thumbnail…

Fork of React

This bar chart displays the average calorie count for menu items across ten fast-food restaurants, using data from the fast_food_nutrition.csv file. The visualization computes averages with `d3.rollups` and `d3.mean`, then renders them as steelblue bars using D3’s `scaleBand` and `scaleLinear` functions. The chart includes rotated x-axis labels for readability, plus titled axes and a main title. Built with React and D3 v7, the SVG output is generated imperatively by selecting the root element and appending chart elements directly.

Ppvvaishnavi93@gmail.com
91% match
Loading thumbnail…

Fork of ICE-6 Marks and Channels

This bar chart displays the average calorie count for menu items at several fast-food restaurants, using data from a CSV file. The visualization encodes the average calories on the y-axis and restaurant names on the x-axis using rectangular bars. Built with React and D3.js (v7), the code uses `d3.csv` to fetch data, `d3.rollups` and `d3.mean` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes, rendering the final chart as SVG.

Ppvvaishnavi93@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Marks and Channels

This bar chart shows the average calorie count for each restaurant in a synthetic fast-food nutrition dataset. The visualization aggregates the provided CSV data, computing the mean calories per restaurant, and displays these averages as horizontal bars. The chart is built with D3.js v7, using its core API to calculate averages from the loaded data, create an SVG, and render the bars and axis labels.

Ppvvaishnavi93@gmail.com
84% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com
80% match
Loading thumbnail…

Fork of React & D3 Starter

This example displays average scores in Math, English, and Science as rounded, pastel-colored bars, calculated from a 100-student CSV dataset. It uses D3 v7 to load and aggregate the data with `d3.csv` and `d3.mean`. The visualization is built with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes, while SVG elements render the bars, value labels, title, and axis labels. The page layout is styled directly via D3 selections on the body element.

Kkarthikpavan1198@gmail.com
80% 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