Fork of Fork of Simple Bar Chart

100%

Fork of Fork of Simple Bar Chart

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

A hierarchical tree diagram displays brand-model relationships. The visualization shows a root "Brands" node branching into brand categories like OnePlus and Samsung, which further split into individual model names. The code uses `d3.rollup` to aggregate sample data into the tree structure, then applies `d3.tree()` and `d3.hierarchy()` to compute node positions. `d3.linkHorizontal()` draws curved links between nodes, while SVG circles and text labels render the hierarchy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of a model

This visualization presents a hierarchical dataset as an indented tree layout rendered with SVG. The root node, labeled "bruh," branches into a deep structure of numeric values, and each node displays its name as text with a font size that decreases with depth. The code uses d3.hierarchy and d3.tree to compute the layout, while linkHorizontal generates the curved paths connecting parent and child nodes. Pan and zoom interactions are enabled through d3.zoom, applying transforms to a group element. The styling uses a green stroke for links, a serif font, and text shadows for readability. Data is loaded from the JSON file data.json.

JJavaDummy4

79% match

Loading thumbnail…

Fork of -scatter

This example visualizes a hierarchical tree of mobile phone data, organized by brand, model, and processor type. It uses the D3.js v7 library to construct a tree layout from the nested dataset and renders it as an SVG. The tree layout is applied with d3.tree() and d3.hierarchy(), with links drawn using d3.linkHorizontal() and nodes displayed as circles with labels. The visualization groups phone models under their respective brands, with processor brands as leaf nodes, and styles the connections with red links and black nodes.

Ssridhardubala106@gmail.com

79% match

Loading thumbnail…

Fork of bhavana

This interactive tree diagram visualizes a hierarchical dataset of car brands and their parent companies, including Volkswagen, BMW Group, and Hyundai. The visualization uses the D3.js library's tree layout and diagonal link generator to render nodes and connections as scalable vector graphics (SVG). Users can click on nodes to expand and collapse branches through an animated update function that transitions nodes between states. The graph displays custom-styled blue nodes with violet borders and sky blue connecting links on a white background.

TTekmal-Bhavana

78% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

77% match

Loading thumbnail…

Fork of Bhanu Prasad ICE-8

This interactive tree diagram displays a hierarchy of car brands, grouping them under parent companies like Volkswagen, BMW Group, and Hyundai. Users can click nodes to expand or collapse branches, revealing or hiding child brands. The visualization uses the D3.js library, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs, to compute and draw the layout. It renders as an SVG with animated transitions (`duration = 750`), using circles for nodes and curved links for connections, with data hardcoded in a JavaScript array.

GGalineeharika

77% match

Loading thumbnail…

Fork of Fork 1

This example shows a hierarchical tree of car types, branching into transmission categories (Automatic, Manual, Semi-Automatic) and then door counts, with nodes rendered as distinct shapes (rectangles, circles, rotated squares) and colored per depth level. It uses d3.csv to load a remote dataset, then processes the data into a nested structure before applying d3.tree and d3.hierarchy to compute the layout. The visualization renders as SVG, drawing curved links via d3.linkHorizontal and positioning nodes with explicit translate transforms, while each node’s shape and fill color are assigned conditionally based on its depth.

NNaveen Kumar Kolla

77% match

Loading thumbnail…

Fork of MY Tree ICE-8

This example shows a tree visualization of smartphone models grouped by brand, with leaf labels displaying model names and branch sums reflecting processor speed. The data is parsed from an inline CSV string. Built with D3.js, it uses `d3.tree` for the layout, `d3.hierarchy` to aggregate numeric values, and `d3.linkHorizontal` for the path generator. Nodes are rendered as circles with white fills and steelblue strokes, while links are gray paths. An interactive zoom, enabled via `d3.zoom`, responds to user gestures to scale the SVG viewport.

Ssrividyamadas@gmail.com

77% match

Loading thumbnail…

Fork of Fork of Fork 1

A static tree diagram called "Fork of Fork of Fork 1" visualizes a three-level hierarchy of car types. The root node "Car Types" branches into three transmission categories—Automatic, Manual, and Semi-Automatic—each with children representing door counts. Built with D3.js v7, the example uses `d3.tree()` and `d3.hierarchy()` to compute node positions, drawing horizontal links with `d3.linkHorizontal()`. Nodes are custom-styled: the root as a purple rectangle, depth-1 nodes as blue circles, and leaf nodes as orange diamonds. Although the code loads a CSV dataset, the displayed tree uses a hardcoded structure rather than the fetched data.

NNaveen Kumar Kolla

76% match