Skip to main content
SimilarExport ZIP
100%

Fouzan Uddin's TikTok Dataset

✓ Published0🌍 Public
Ffouzanuddin
Last edited Feb 26, 2022
Created on Feb 25, 2022

This example displays an SVG image of the TikTok logo above a text summary of a CSV dataset, loaded from a GitHub gist. It uses D3’s `csv` utility to fetch and parse the data, and React (`useState`, `useEffect`) to manage the asynchronous loading state. The message text reports the file size in kilobytes, row count, and column count, computed with `d3.csvFormat` and array properties. The visualization is minimal, focusing on the dataset’s metadata rather than charting its contents.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates how to load and summarize a CSV dataset using D3 version 7. It fetches a TikTok dataset from a GitHub Gist via `d3.csv`, then uses `d3.csvFormat` to measure the formatted data size in kilobytes and displays that value inside an HTML `<pre>` element. The page uses Element IDs and `textContent` for DOM manipulation. A linked video provides additional guidance, while a separate `index.js` file shows a minimal `select` call from D3.

Ffouzanuddin
76% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v7 starter project that fetches a TikTok dataset from a GitHub gist and parses it with `d3.csvParse`. The visualization itself renders the text “Hello D3 version 7” in the browser body using `select().text()`, while the script logs the data’s file size, row count, and column count to the console. The code relies on the D3 v7 library loaded via a CDN and uses `fetchText` to retrieve the CSV before parsing.

Ffouzanuddin
75% match
Loading thumbnail…

Data Visualization

This example displays a static SVG composition featuring a black ellipse overlaid by a triangular form, paired with a text summary of a dataset. The page loads CSV data from a GitHub gist using `d3.csv` and reports its size in kilobytes, row count, and column count. The visualization uses D3 v7 for data parsing, while React is not actively employed despite being listed in the framework metadata, and the SVG rendering is hardcoded in the markup.

Hharika-1929
74% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3’s `csv` function. The app displays a text message showing the file size in kilobytes, the row count, and the column count of the loaded data. The data comes from a GitHub-hosted CSV of named CSS colors, and the visualization is rendered as an SVG-less React component that updates after the asynchronous data fetch completes.

SStefano Renzetti
73% match
Loading thumbnail…

Fork of Smiley Face Part II

This example displays a text-based summary of a CSV dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count. The visualization uses React hooks to fetch and store the data with `d3.csv`, then displays the computed message. Built with React and D3 v6, the app renders the result as an SVG-rendered preformatted text element, with the `csvFormat` API calculating the data length and the `columns` property determining the column count.

Hhasti khajeh
73% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display a CSV dataset from a GitHub gist using React and D3. It shows the file size in kilobytes, row count, and column count as plain text. The code uses the `useState`, `useEffect`, and `useCallback` hooks to manage asynchronous data loading, with the `csv` function from D3 v5 fetching the data and updating React state. The `message` utility formats the summary from the parsed CSV structure.

Hheiltutanvidare
73% match
Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and summarize a remote CSV dataset using React state and D3 utilities. It fetches data from a GitHub gist via `d3.csv`, displays a loading message while the data is pending, and renders the file size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization is a simple SVG-free text output, with React managing the asynchronous data flow through `useState` and `useEffect`, while D3 v7 handles the CSV parsing and formatting.

GGayan Priyadarshana
72% match
Loading thumbnail…

Fork of Teju ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset using D3.js version 7. The page displays a header message and a pre-formatted text block that counts the data's size in kilobytes, number of rows, and number of columns. The visualization uses the `d3.csv` API to fetch a remote CSV file from a GitHub gist, then processes the parsed data to calculate and present these summary statistics. The page also embeds an external SVG image depicting a virus, and uses minimal CSS styling for typography and background colors.

Ttejaswikalluri05
72% match