D3 Page Template

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.

79% match

fresh block

This visualization tracks the popularity of YouTube videos in the Autos and Vehicles category over several days in November 2017. Each video appears as a circle whose size corresponds to its view count, positioned along a time axis from publish date through subsequent days. Hovering highlights a single video's trajectory across time, showing how view counts evolve. The animation reveals rapid early growth for viral hits, like the Lamborghini video, while others grow more slowly. Built with React and D3 v3, the chart uses SVG animation to smoothly transition between the daily snapshots, and the block is derived from the USAutos.csv dataset.

VVarsha-Ravi

78% match

Viewing Data with React & D3

A bar chart displays the number of video plays per course from a 10,000-person MITx dataset, sourced via CSV from a GitHub gist. Loaded into React with `useState` and `useEffect`, the data drives a D3 SVG visualization using `scaleBand` for courses on the y-axis and `scaleLinear` for the x-axis, rendering axis ticks and rectangles without axes.

Ssophburke

78% match

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.

78% match

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.

Fork of React & D3 Starter

This example presents a small dashboard that loads a CSV dataset, displays summary statistics (approximate file size, row count, and column count), and renders a simple bar-chart-like SVG picture. The page uses D3’s `csvParse` to read the data from a GitHub Gist, then updates the HTML stat cards and draws rectangles with `d3.select`’s `.join` API. The SVG bars are based purely on row index, not on data values, making the visualization a generic shape demo. The code is plain JavaScript within an HTML file, using D3 v7.

Ppvvaishnavi93@gmail.com

React App

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.

Loading Data with React & D3

This example demonstrates loading and visualizing a CSV dataset of bike availability from a GitHub-hosted file in a React application. It shows a scatterplot of randomly positioned circles, where each circle represents the total number of bikes available for a given hour, with the radius scaled by the summed value. The code uses React hooks (`useState`, `useEffect`) to fetch the data with D3’s `csv` method and `d3.rollups` to aggregate the dataset by date-hour. The circles are rendered as SVG elements, with random opacity and positions, displaying the processed data directly.

MManon ROMAIN