ICE8-Tree graph

100%

ICE8-Tree graph

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

This visualization displays Amazon Prime titles organized hierarchically by type and primary genre, with individual titles appearing as leaf nodes. The tree layout uses rectangular nodes for internal categories and circles for leaf titles, with colors indicating depth. Built with D3.js v5, the code loads CSV data from a GitHub gist and applies `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` to position nodes and render SVG paths. Text labels are positioned differently for internal versus leaf nodes to improve readability.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

ICE-8:Network graph

This network graph visualizes the relationships between Amazon Prime titles and their primary genres. Red genre nodes connect to blue title nodes through a force-directed layout, with node positions determined by a physics simulation. The visualization uses D3 v5 with the `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to manage attraction and repulsion forces. Data is loaded via `d3.csv` from a GitHub gist, and nodes are rendered as SVG circles with text labels, supporting interactive dragging through D3's drag handlers.

Yyvarshachowdary@gmail.com

86% match

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

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

81% match

Loading thumbnail…

ICE-8 Network Graph

This visualization displays a network graph of Amazon Prime movies, organized into three genres—Comedy, Documentary, and Drama—with each genre connected to up to three movie titles. A central "Movies" node links to the genre nodes, and all connections are rendered as directed links with arrow markers. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, styled via SVG circles and text labels colored by node type. Data is loaded from a CSV file, filtered to movies, and grouped by genre.

Mmanthenasirisha06@gmail.com

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

81% match

Loading thumbnail…

ICE-8 Tree graph

This example demonstrates a product category hierarchy using an ICE-8 tree graph. It shows the relationship between product categories like Furniture and Technology, with subcategories and individual products as leaf nodes. The visualization uses D3.js v7 to render an SVG with distinct shapes (rectangles, ellipses, and circles) for different tree depths, color-coded by level. Data is hardcoded in JavaScript, and the layout uses d3.tree() and d3.linkHorizontal() for positioning nodes and drawing curved links.

Ssai snehith nadipally

80% match

Loading thumbnail…

ICE game Tree

This visualization displays a tree diagram of popular video games, organized top-down into genres like Shooter, BR, Competitive, and Open World, with specific game titles as leaves. The code uses D3 v6’s `d3.stratify()` to convert the flat data into a hierarchy, `d3.tree()` to compute layout coordinates, and SVG circles, paths, and text for rendering. Links animate via a two-step `transition()` on path `d` attributes, while node fill colors shift by generation depth using a custom `setGeneration()` function.

TTejamod

79% match