Skip to main content
SimilarExport ZIP
100%

React App

✓ Published0🌍 Public
HHuldahMerlinKolli
Last edited May 12, 2023
Created on May 12, 2023
Forked from HTML Starter

This interactive React app searches YouTube channels and visualizes the usage and views of video tags. An SVG scatterplot plots each tag's total view count against how often it was used, with colored circles representing individual tags. The app uses the YouTube Data API v3 to fetch channel data, and the D3 library for data parsing, scaling, and axis generation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive scatterplot visualizes YouTube channel tag data, plotting the number of views per tag against how frequently each tag is used. The React application lets users search for a channel via the YouTube Data API v3, then aggregates tag statistics from the returned video items. Rendered as SVG circles with randomized colors, the visualization uses D3 scales, axes, and formatting functions. The code imports React hooks, D3 utilities, and custom axis and mark components to display the relationship between tag popularity and usage frequency.

HHuldahMerlinKolli
92% match
Loading thumbnail…

Untitled

This interactive web application analyzes YouTube channel data through several linked D3.js visualizations rendered as SVG in React. It fetches video statistics from the YouTube Data API, displaying a grouped bar chart comparing views, likes, and comment counts across recent videos, plus a scatterplot mapping tag usage frequency against total views. The code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.extent` to process and scale the data, with axis components and marks built from SVG primitives.

HHuldahMerlinKolli
86% match
Loading thumbnail…

Untitled

This example visualizes YouTube channel growth by plotting monthly total view and like counts as two overlaid line charts, with time on the x-axis and counts on the y-axis. It uses React with useState and useEffect for state management, d3-scaleTime, d3-scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG chart. The data comes from the YouTube Data API v3 via GoogleLogin authentication, fetching up to 50 videos for the channel. The code groups videos by month using d3.timeMonth and sums counts with d3.sum.

HHuldahMerlinKolli
80% match
Loading thumbnail…

Fork of Refactored Bar Chartasd

This example renders a scatterplot of YouTube channel data, plotting channels along the x-axis and their actual subscriber counts along the y-axis. The visualization uses React to structure SVG elements, with D3 v5 providing the linear scales and tick generation through `scaleLinear` and `extent`. The data is loaded asynchronously from a CSV file using `d3.csv` in a custom `useData` hook. Axes are built manually from scale ticks, while the marks are ten-pixel-radius circles positioned via the scales. The source data comes from a GitHub gist containing channel statistics.

AAhmeTyAtakan
74% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization shows the top 15 YouTube channels by follower count using horizontal bars. The chart renders an SVG with D3 scales for positioning, while React manages the component state and lifecycle. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with the d3.scaleBand and d3.scaleLinear APIs mapping channel names and follower values to screen coordinates. A custom grid of tick marks and labels is drawn manually rather than using d3.axisBottom.

IIndhuKrishnaraj
74% match
Loading thumbnail…

SCATTER PLO SUBHASH

A reusable scatter plot built with D3.js visualizes YouTube channel analytics, mapping metrics like views, likes, and watch time onto x and y axes. An animated loop rotates the x-axis dimension every two seconds, letting users explore correlations across five variables. The SVG renders circles positioned via `d3.scaleLinear` and `d3.extent`, with axes from `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV gist, normalized, and parsed with `d3.csvParse` and `d3.text`.

SSubhash
73% match
Loading thumbnail…

Fork of HTML Starter-ic6

This scatter plot visualizes YouTube channel analytics, mapping total views on the x-axis against watch time in hours on the y-axis. Each circle represents a week of data, with hover interactions revealing a tooltip containing additional metrics like likes, comments, and subscriber gains. The visualization uses d3.scaleLinear for axes and d3.axisBottom/axisLeft for tick marks, while circles animate into place via d3.transition. Data is loaded from a remote CSV file using d3.csv, and the SVG rendering incorporates a dark theme with responsive sizing.

SSubhash
72% match
Loading thumbnail…

YouTube

This example recreates a snapshot of the 2017 YouTube homepage, showing its dense grid of video thumbnails, sidebar navigation, and header controls. Built as a React application, it renders the interface using a mix of SVG and canvas elements, with the page layout and many interactive components driven by Polymer, as seen in the included HTML file. The visualization also incorporates the YouTube player API and search box logic, animating elements and loading data from the live site to faithfully capture the experience of browsing the platform at that time.

NN0taN3rd
71% match