fresh block

100%

✓ Published0🌍 Public

Last edited Apr 15, 2018

Created on Apr 15, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Page Template

This example uses D3 v4 to plot YouTube trending video statistics from a CSV dataset, with SVG rendering inside a React component. The visualization tracks views over time for automotive videos, encoding the data as circles whose size represents view count and whose position encodes time and value. A line chart connects repeated videos across multiple dates, showing how popularity evolves. The author uses D3 scales and axes to map the temporal and quantitative dimensions, with the data loaded from the included USAutos.csv file. The code provides a reusable template for building D3 visualizations in a React framework, styled minimally with HTML/CSS, and published under the MIT license.

VVarsha-Ravi

78% 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

71% match

Loading thumbnail…

fresh block

This visualization shows multiple time-series lines representing different metrics (views, likes, dislikes, and comment counts) from a CSV dataset, plotted against dates in November 2017. The lines are smoothed using a basis curve and colored via a categorical color scale. A bottom time axis and left linear axis labeled "Temperature, ºF" frame the chart, while each line is labeled with its metric name at its final value. The data is parsed with d3.timeParse and rendered as SVG using D3 v4.

VVarsha-Ravi

70% match

Loading thumbnail…

fresh block

The visualization displays annual changes in seven categories (A–G) as grouped bar segments, with each category’s value represented by a row of dots whose size and position encode magnitude. Keyboard arrow keys or clicking timeline buttons animate transitions between years, smoothly morphing dot positions and colors. Built with D3 v3, it uses ordinal scales for axes, `d3.svg.axis` for ticks, and `transition.attr` with random delays to animate dot movement. Data comes from a CSV file with year-based columns, rendered as SVG with a color scale per category.

YYkelf

69% match

Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu

69% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

69% match

Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

BBrunoDumas

69% 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

68% match