Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of D3.js collapsible tree with boxes

This example shows a hierarchical tree of movies organized by release year and country of origin, with each movie as a leaf node. The visualization uses colored shapes—circles for years, rectangles for countries, and ellipses for movies—to represent different levels of the hierarchy. The D3.js v3 library builds the collapsible tree layout, using SVG elements for rendering. The code defines `treeData` as a static JavaScript array, and the legend explains the shape-color mappings for the categorical data.

BBelede Rahul

85% match

Loading thumbnail…

Fork of 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.

Ppavan vasamsetti

85% match

Loading thumbnail…

Fork of HTML Starter

This example shows an interactive tree diagram visualizing a hierarchical data model of actions, children, and parents with attributes. Built with D3.js v3 and React, it renders nodes as blue circles connected by lines, using a tree layout with animated transitions as nodes expand or collapse on click. The data structure contains nested objects with type and name properties, while SVG rendering and D3’s hierarchy and tree APIs handle positioning and updates.

SShinyaHosoyamada

84% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a hierarchical tree visualization of vehicle categories—Land, Air, and Water—with their subcategories as leaf nodes. The code uses d3.hierarchy and d3.tree to compute the layout, then renders the structure as SVG circles and connecting lines, with colors indicating depth (red for root, green for categories, blue for leaves). Labels are added as SVG text elements, while React wraps the D3 logic in a useEffect hook. The accompanying React component in index.jsx only sets static text, demonstrating a minimal React-D3 integration pattern.

SSanjayRamaSwamyAdla@my.unt.edu

82% match

Loading thumbnail…

Movie tree

This visualization shows a hierarchical tree of movie genres and film titles, with a central “Movies” root branching into Action, Horror, Thriller, and Drama, each leading to specific movies. The D3.js `stratify()` method converts flat parent-child data into a hierarchy, which is then laid out using `d3.tree()`. SVG circles represent nodes, connected by animated paths that draw straight lines, while text labels fade in with a staggered duration based on depth. The rendering emphasizes a simple, colorful circular-node aesthetic over explicit positional encoding.

Bbindusreeja

82% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

82% match

Loading thumbnail…

Fork of HTML Starter

This interactive tree chart visualizes a hierarchy of physical activity levels across demographic categories. The radial layout displays branches for gender, age, and activity rating, with distinct colors and shapes distinguishing each level. Built with D3.js version 3, the visualization uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for connecting links. The SVG rendering includes clickable nodes and a color-coded legend, with data structured as nested JSON objects within the HTML page.

Mmounishnaidu96@gmail.com

81% match

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays a static tree diagram of vehicle categories, showing the hierarchical relationships between land, air, and water vehicles. The layout uses D3’s `d3.hierarchy` and `d3.tree` APIs to position nodes in a branching structure (svg.attr-encoded). Nodes are rendered as circles (`circle`), colored by depth (red for root, green for categories, blue for leaves), with connecting lines and text labels. The code is embedded in an HTML file using D3 v7’s `.select()`, `.enter()`, and `.append()` methods, while the accompanying `index.jsx` uses React to render a simple text message, though the diagram itself relies on the SVG API.

SSanjayRamaSwamyAdla@my.unt.edu

81% match