index.html

100%

✓ Published0🌍 Public

Last edited Feb 26, 2026

Created on Feb 26, 2026

This bar chart visualization summarizes food nutrition data from a CSV file fetched via d3.csv, displaying calories per food item. It provides a summary box with total item count, average calories, and the highest-calorie food. The SVG chart uses d3.scaleBand and d3.scaleLinear to render seagreen bars with rotated x-axis labels and a centered title.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

index(11823810).html

This interactive D3 visualization demonstrates how to load and explore CSV data, displaying it as a bar chart and computing summary statistics. Users can filter the dataset by category and previous value through dropdown menus, with hover tooltips showing detailed records. The page also includes a small SVG icon showcase and prominent metric cards alongside the main visualization. The implementation uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for scales, and d3.transition for animated bar updates.

Vvineelaviswanadham07@gmail.com

82% match

Loading thumbnail…

Food

This example shows a horizontal bar chart of nutritional data for the top ten foods, using a bar’s length to encode each item’s 2019 nutrient value. The chart renders as an SVG using React, with the `d3.csv` loader fetching data from a GitHub Gist. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars and axes, while D3’s `axisBottom` and `axisLeft` are manually replaced by custom tick rendering. The visualization highlights the relative nutrient amounts across food categories.

KKeerthipriyaBankuru

79% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays the calorie content of 77 cereals from a CSV file, with each bar labeled by cereal name and rotated for readability. The visualization uses D3.js v7 to load data via `d3.csv`, scales the y-axis with `d3.scaleLinear`, and renders bars with `d3.selectAll` and `.enter()`. The x-axis is created with `d3.axisBottom`, featuring custom tick formatting that truncates long names. Interactive hover effects, defined in CSS, change bar color to orange. The chart includes axis labels for "Cereal Name" and "Calories," with a clean SVG layout and fixed margins.

Rrajivkarri98@gmail.com

78% match

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

78% match

Loading thumbnail…

Loading

This example displays a minimal bar chart of food deliciousness ratings from a CSV file, with the data loaded asynchronously using the D3 `csv` method. The code creates an SVG container and fetches `data.csv` to log the parsed data to the console, though no visual encoding is currently rendered beyond the empty SVG element. It relies on D3 v5 and is embedded within a React framework, serving as a basic template for data loading and inspection.

NNaveenaS12

78% match

Loading thumbnail…

D3 Pie Chart_ICE7

This pie chart visualizes the calorie content per 100g for the top ten food items, sorted in descending order. The visualization is built using D3 version 7, rendering via SVG, with each slice’s value labeled directly on the chart. It uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and appends interactive text elements. The data is loaded from a CSV file, and legends display the food name alongside its formatted calorie count, with the chart centered at (250,250).

NNiharika-Guthikonda

77% match

Loading thumbnail…

Scientific Data Visualization ICE-6: Marks and Channels

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

Ppravalika.thogaru10@gmail.com

77% match

Loading thumbnail…

q-3

A bar graph displays the distribution of percentages across ten food categories, from Fast Food to Meat. The chart uses D3 v7 to load data from a local CSV file and render the visualization as SVG. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on mouseover, changing bar color via `select` and CSS transitions.

AArunVurukonda@my.unt.edu

77% match