ICE-8 Sushmitha B 2A Tree

100%

ICE-8 Sushmitha B 2A Tree

✓ Published1🌍 Public

Last edited Nov 2, 2025

Created on Nov 2, 2025

Forked from Tree

This interactive tree diagram visualizes the hierarchy of Netflix’s top four original shows organized by country. Root, country, show, and character nodes are represented with distinct geometric shapes and colors. The visualization uses the D3.js v7 library, loading CSV data from a GitHub gist. It employs the `d3.stratify`, `d3.tree`, and `d3.linkVertical` APIs to compute and render the layered layout as an SVG, with node styling and labels applied via D3’s selection and join methods.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Tree Diagram

This example presents a hierarchical tree diagram of streaming platforms, genres, and titles using D3.js v7. It visualizes the parent-child relationships among Netflix, Hulu, and their respective categories and shows, with node colors representing depth levels. The code uses the `d3.stratify` and `d3.tree` APIs to structure and layout the data, and constructs curved links with `d3.linkHorizontal`. The SVG rendering applies a static layout with colored circles and labels, based on a hardcoded dataset of streaming services and their content.

Nnishanththouta16@gmail.com

83% match

Loading thumbnail…

ice-8_TreeStructure

This visualization displays the hierarchical structure of a Netflix catalog, using a tree diagram to show how titles are organized by genre (such as Dramas and Comedies) and then by format (Movie or TV Show) before listing individual titles like *Sankofa* and *The Starling*. The data, provided as a flat array of child-parent pairs, is transformed into a nested tree structure using JavaScript. The visualization is built with D3 v5, utilizing `d3.tree()`, `d3.hierarchy()`, and the library’s SVG rendering capabilities to draw curved links and color-coded nodes (yellow for genres, blue for types, green for titles).

Sshanmukhadatta4040@gmail.com

82% match

Loading thumbnail…

Fork of ICE-8 Tree

This example shows a hierarchical tree visualization of Netflix titles, organized by media type, country, and release year. It uses d3.tree with SVG rendering and cubic bezier links to display the branching structure. The nodes use d3.symbol to render different shapes based on tree depth. The code transforms a flat dataset into a nested hierarchy before applying the tree layout.

Pprasaad.lakshme901@gmail.com

78% match

Loading thumbnail…

ICE-8 TREE GRAPH

This D3.js v7 visualization displays a hierarchical tree graph of Amazon Prime titles, categorizing movies and TV shows into genres like Comedy, Documentary, Drama, Kids, and Anime. The tree layout uses `d3.tree()` with `d3.hierarchy()` to structure the data, while `d3.linkHorizontal()` draws the connecting links between nodes. Each node renders as circles for categories and rectangles for titles, with text labels, all within an SVG canvas. The dataset comes from a CSV file containing Amazon Prime titles, loaded via `d3.csv()`.

Mmanthenasirisha06@gmail.com

78% match

Loading thumbnail…

Tree

This example displays a tree diagram of the Netflix ecosystem, breaking down content into originals and licensed shows, and technology into engineering and product management branches. The visualization uses interactive nodes that expand and collapse on click, with each node and its label colored to match the data. Built with D3.js v7 and rendered as SVG, the code employs `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` to compute the layout and draw curved links. Node sizes and positions animate smoothly via the update function, while colors come from the embedded `treeData` array.

Sshailajat1998@gmail.com

78% match

Loading thumbnail…

ICE-8 Hasini 2A Tree

This example visualizes a character hierarchy from the TV series Stranger Things as a vertical tree chart. The root node branches into four main groups—The Party, Teens, Adults, and Creatures—which then split into individual character leaves. Using d3.stratify() to convert flat parent-child data into a hierarchy, the layout is computed with d3.tree() and rendered as SVG paths via d3.linkVertical(). Node shapes vary by depth: a diamond for the root, squares for groups, and circles for characters, with colors assigned through a d3.scaleOrdinal.

Hhasinipriyad7@gmail.com

76% match

Loading thumbnail…

Netflix Titles Tree

A tree diagram visualizes a hierarchical catalog of Netflix titles, categorizing content by genre and format, such as Dramas, Comedies, and Action & Adventure, each split into Movies and TV Shows with specific examples. The visualization uses D3 v5’s `d3.tree` layout and `d3.hierarchy` to compute node positions and parent-child links. The SVG rendering draws curved paths (`M`/`C` commands) for links and styled circles with accompanying text labels. Data is hardcoded in `index.js`, with styling for internal and leaf nodes defined in `style.css`.

Rrobertotienonyaranga@gmail.com

75% match

Loading thumbnail…

Fork of ICE-8 Sushmitha B

This visualization presents a dual choropleth map of Netflix title distributions globally and across Indian states. Two SVG maps are rendered side-by-side using D3's geo-projection and path generation with a natural Earth projection for the world map and a Mercator projection for India. The maps use a sequential red color scale to encode the count of Netflix titles per country or state, with interactive tooltips that display the name and title count on hover. Data is sourced from a Netflix titles CSV and the world-atlas and india-atlas TopoJSON packages, with simulated state-level counts for India.

Ssushmitha bungatavula

75% match