Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ppavan vasamsetti
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from HTML Starter

This network graph visualization maps Hulu movie data by genre, revealing connections between movies, their genres, and the overarching category. Using d3.forceSimulation, the visualization positions nodes representing movie titles, genre groupings, and a central category, with links styled as arrows to indicate hierarchy. The code loads CSV data, filters for movies only, and groups up to three titles under Romance, Drama, and Thriller genres. The SVG rendering uses a color scale to distinguish node types, with hover states and directional markers enhancing readability.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example presents a hierarchical tree visualization of movies organized by year, genre, and title. It uses D3.js version 3 to render SVG shapes—circles for years, rectangles for genres, and ellipses for individual movies—with distinct color coding per category. The tree layout is built from a static JavaScript data structure that lists movies under release years and genres. A legend in the top-right corner explains the shape-color mappings, while CSS styling controls the visual appearance, including node cursors and link colors. The visualization demonstrates a simple, static branching structure without interactive behavior.

Ppavan vasamsetti
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This visualization uses a force-directed graph to show the distribution of PG-13 movies across four major streaming platforms: Netflix, Amazon Prime, Disney Plus, and Hulu. Each movie is represented as a circular node, color-coded cyan, with the platform as a central hub. The interactive chart uses `d3.forceSimulation` to apply link, charge, collision, and centering forces, while user drag events allow manual repositioning of nodes. SVG rendering draws connecting lines with arrow markers to indicate relationships, and hover effects highlight individual nodes.

Ppmbhupathibalu@gmail.com
85% match
Loading thumbnail…

Fork of HTML Starter

This D3.js (v7) visualization shows the relationship between movie runtime, rating, and votes, with genre as a categorical color channel. It presents a scatterplot of movie data loaded from a GitHub-hosted CSV file, with axes for runtime and rating. The code uses D3 APIs including `d3.csv`, `d3.extent`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.select` to build the SVG chart. It also computes summary statistics like mean and median rating using `d3.mean` and `d3.median`. The page includes a summary box with data dimensions and field ranges.

Ttanubuddideepthi@gmail.com
81% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays the number of movies per genre from a 100-sample CSV dataset, with genres on the x-axis and counts on the y-axis. The chart is rendered as scalable vector graphics (SVG) using D3.js v7. The code loads the data with d3.csv, aggregates counts via d3.rollup, and constructs scales with d3.scaleBand and d3.scaleLinear, with axes drawn using d3.axisBottom and d3.axisLeft.

AAbhiram-Janagama
80% match
Loading thumbnail…

Fork of Fork of HTML Starter

This scatterplot visualizes the evolution of movie genres over time by plotting IMDb ratings against release years for a dataset of over 100 films. Each circle is color-coded by genre, with its position determined by the film’s release year and rating. The visualization is built using D3.js (v7) with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Interactive features include hover tooltips that appear after a delay and click-to-select highlighting.

SSaba Siddiqi
79% match
Loading thumbnail…

Fork of HTML Starter

This network graph visualizes the chronological sequence of Netflix release years, with each node representing a unique year and links connecting adjacent years to form a temporal chain. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position the nodes dynamically in an SVG container. Data is loaded from a GitHub-hosted CSV file using d3.csv, and circles are rendered as nodes with teal fill and gray connecting lines. Node positions update on each simulation tick, allowing the network to settle into a stable layout.

Pprasaad.lakshme901@gmail.com
79% match
Loading thumbnail…

Fork of Netflix titles network graph

A force-directed network graph visualizes the hierarchical structure of Netflix titles, categorizing a central catalog into genres, sub-genres, and individual movies or TV shows. Nodes are colored by group and labeled with their names, while links connect each level. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the SVG elements, with circle radii and stroke styling defined in CSS. The underlying data is hardcoded in JavaScript, representing a small, curated subset of the Netflix catalog.

Vviveknaroju999@gmail.com
79% match
Loading thumbnail…

Fork of fork 8.2

A force-directed graph maps PG-13 movies to their availability across Netflix, Amazon Prime, Disney Plus, and Hulu. The visualization uses `d3.v3` with an SVG rendering and a `forceSimulation` layout to position nodes, where the central hub connects to four streaming platforms, which in turn branch to individual film titles. Node and link styling is applied directly through CSS classes, with circles and text labels for each movie. The graph's static layout and explicit edge list present a clear, non-interactive overview of content distribution across these services.

Ppmbhupathibalu@gmail.com
79% match