Gist 7c15fbfb157f2db0cfe3dfc4f5583a06

100%

Gist 7c15fbfb157f2db0cfe3dfc4f5583a06

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This visualization displays a bipartite matching between two sets of YouTube video IDs, likely representing recommended or related videos. Built with Vue, the page pairs each left-side video ID with a right-side counterpart via curved links. The matching algorithm produces a dense, organized network of connections that reveals the one-to-one relationships between the two groups. The layout positions the two sets as vertical columns with arcs connecting them, making the pairings immediately visible. The visualization functions as a practical tool for exploring how videos map to one another, with the gist providing a clean, functional interface for this data.

AI-generated description

Similar vizzes

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

65% match

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

63% match

Loading thumbnail…

Gist f0ea84b0d4d50604c405f5b74db1b498

This example visualizes the relationships between a set of JavaScript frameworks and their descriptions using a force-directed graph built with Vue.js and D3’s `d3.forceSimulation`. The graph reads from an inline `category.csv` dataset, mapping each of the three categories—Node.js, Vue.js, and Angular.js—to its respective description. Nodes are rendered as circles, with labels displayed alongside, while the simulation drives their positions through charge and link forces. The visualization demonstrates a compact, interactive network layout, though it does not include drag behavior or hover interactions beyond the static arrangement. The code relies on Vue’s reactivity to update the DOM as the simulation runs.

WWill Carter

63% match

Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees

63% match

Loading thumbnail…

Viz - biPartite - min

Two small groups of nodes with three categories on the left and two on the right are connected by curved links whose thickness represents the weight of each pair. The visualization uses the `viz.biPartite()` API from VizJS to create the bipartite layout, with the `.min(50)` threshold filtering out any links whose value is below 50. The chart is rendered as an SVG inside an HTML page, and the example passes a hard-coded JavaScript array of six triples as the data source. The code also relies on D3 v4 to select the SVG `<g>` element and apply the layout.

NNPashaP

63% match

Loading thumbnail…

HW-9-StackGroup

This visualization uses D3 v4 to display YouTube video data for the United States as a stacked bar chart. Each bar represents a video category (Music, News and Politics, How to and Style, etc.) and is broken into segments showing the proportion of views, likes, dislikes, and comments. The chart is rendered with SVG and includes animation, likely highlighting category comparisons through interactive transitions. The dataset is loaded from a CSV file containing video statistics across multiple categories.

VVarsha-Ravi

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

63% match

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

63% match