Skip to main content
SimilarExport ZIP
100%

Upload food nutrition data

✓ Published0🌍 Public
MMing Liu
Last edited Sep 29, 2021
Created on Sep 8, 2021

This example displays the size and structure of a filtered USDA foundation food nutrition dataset from 2020, showing the file size in kilobytes, the number of data rows, and the number of columns. It fetches a remote CSV file using `d3.csv` and then formats the result with `d3.csvFormat` to calculate the data’s byte length. The output is rendered as large text in a `<pre>` element using the `document.getElementById` and `textContent` API.

AI-generated description

Foundation food nutrition

This data is about nutrition in foundation food that recently acquired (by 2020).
Foods whose nutrient and food component values are derived primarily by chemical analysis.

Original data is from US Department of Agriculture, published in April 2021. I have filtered data on foundation food only and acquiring date by 2020

Variables of interest:

Name Type Description
Description categorical Food description
name categorical Nutrition name
amount quantitative Amount of the nutrient per 100g of food.
unit_name categorical The standard unit of measure for the nutrient (per 100g of food)

Possible questions:

  • In a specific nutrition category, say Zinc, what foods contains the most Zinc and what foods contains the least.
  • Look at different categories that important to human bodies, such as Zinc, fiber, vitamin, etc.. and answer question 1.

*This is a part of week 2 assignment: Load Your Data

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying file size, row count, and column count in a large pre-formatted text element. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub-hosted CSV file containing NYC social media usage data, then formats the statistics with `d3.csvFormat()` to calculate kilobyte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse()` for manual parsing. The example concisely shows the core workflow of retrieving and inspecting tabular data in a browser environment.

KKarenNg
76% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying file size, row count, and column count in a large pre-formatted text element. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub-hosted CSV file containing NYC social media usage data, then formats the statistics with `d3.csvFormat()` to calculate kilobyte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse()` for manual parsing. The example concisely shows the core workflow of retrieving and inspecting tabular data in a browser environment.

KKarenNg
76% match
Loading thumbnail…

Loading and Parsing the CDC Dataset

This example displays a text summary of a CDC health dataset’s size and structure, showing the file’s kilobyte count, row count, and column count in large type. After loading the CSV from a GitHub gist via `d3.csv`, it uses `d3.csvFormat` on the resulting parsed data to calculate its byte length, then writes the formatted message into a `<pre>` element using standard DOM manipulation. The code relies on D3 v7’s promise-based CSV loading and formatting APIs.

RRidhima Saxena
75% match
Loading thumbnail…

Loading data

This example demonstrates how to load and parse a remote CSV file using D3’s `d3.csv` method, reporting the dataset’s size in the browser. The page displays three lines of text: the number of columns, the number of rows, and the file size in kilobytes, computed via `d3.csvFormat` and `Math.round`. Data is fetched asynchronously from a GitHub Gist URL, and the results are rendered into a `<pre>` element using DOM manipulation. The minimal styling uses large CSS font sizes to emphasize the metadata.

Ccaineosborne
75% match
Loading thumbnail…

Loading Parsing CSV Data

This example demonstrates how to load and parse a CSV file, displaying file size, row count, and column count on a webpage. It uses d3.csv to fetch a remote dataset from a GitHub gist raw URL, then formats the results with d3.csvFormat to calculate kilobytes. The page also includes commented-out code showing an alternative approach using fetch, async/await, and d3.csvParse. A large pre element displays the final statistics as text.

RRaphael Fogha
75% match
Loading thumbnail…

Loading and parsing csv data

This example displays the size of a parsed CSV file in kilobytes within a large-format text element. It fetches a remote CSV file containing CSS color names from a GitHub gist, parses it using `d3.csv`, and formats the data back into a CSV string with `d3.csvFormat` to calculate its byte length. The result is rendered as plain text inside an HTML `<pre>` element. The page uses D3 v6 loaded via CDN, with minimal CSS styling for the text display.

Mmarianamartins87
75% match
Loading thumbnail…

CSV Data

This example displays a summary of a remote CSV file's contents: its approximate size in kilobytes, the number of data rows, and the number of columns. It fetches the data from a GitHub gist URL using the `d3.csv` API, then formats the loaded data with `d3.csvFormat` to calculate its length. The resulting statistics are rendered as large text inside an HTML `<pre>` element, which is updated via JavaScript's `textContent` property. The styling is applied through a CSS class that sets the font size.

SSam Hege
75% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV dataset containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns. The program loads the remote CSV file using `d3.csv`, which parses the text into an array of objects, and uses `d3.csvFormat` on the parsed data to compute its byte length. The results are rendered as large text in a `<pre>` element.

CCarlos Caballero
74% match