Skip to main content
SimilarExport ZIP
100%

Merkle Tree

✓ Published0🌍 Public
BBryan
Last edited Apr 4, 2023
Created on Apr 4, 2023
Forked from HTML Starter

This visualization renders a Merkle tree, a cryptographic data structure where each node’s ID is derived from its children’s hashes. Using D3 v5’s `tree` layout and `hierarchy` on a JSON file, it draws horizontal links with `linkHorizontal` and displays each node’s full hash as text, sized inversely by depth. The SVG output supports zooming via D3’s `zoom` behavior, and text styling uses the Playfair Display font with white shadows for 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…

Tree

This hierarchical tree visualization displays cartoon character relationships with color-coded labels, where node text size decreases with depth. Using D3 v5’s `tree()` layout and `linkHorizontal()` generator, it renders an SVG with curved links and zoomable panes via `zoom()`. The data comes from nested JSON, binding each node’s `id` and `color` from `d.data.data` to text elements. Font sizing scales by depth, while text shadows and the `event.transform` handler enhance readability and interaction.

Ssumitradevipolina
78% match
Loading thumbnail…

a Tree

A hierarchical family tree rendered as a horizontal node-link diagram. The visualization displays ancestor and descendant relationships using curved paths and text labels, with zoom and pan interaction enabled. The code uses D3 v5's `hierarchy`, `tree`, and `linkHorizontal` to compute the layout, `json` to load data from `family.json`, and `zoom` with event transforms for navigation. Nodes are drawn as SVG text elements positioned by the tree layout, while links are rendered as horizontal paths.

AAdam Sisk
77% match
Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR
76% match
Loading thumbnail…

familytree

This example renders a zoomable hierarchical tree visualization, displaying a color-themed taxonomy where root categories like Black, Blue, and Green branch into related items. The code uses D3 v5's `tree`, `hierarchy`, and `linkHorizontal` functions to compute the SVG layout, with node labels colored via data attributes and text shadows applied through CSS. Zooming is implemented using the `zoom` event, while font sizes scale based on node depth. The data loads from a local JSON file.

Vvaddepallinaveen
76% match
Loading thumbnail…

Dynamic Tree with D3.js

This example shows a hierarchical dataset of animals rendered as a dynamic tree diagram using D3.js v6. The tree layout positions parent and child nodes, with links drawn as horizontal curved paths via `d3.linkHorizontal`. Leaf nodes display custom colors from the data, while internal nodes are light gray, and each node is labeled with its name. The visualization is built with SVG, using D3’s `d3.hierarchy` and `d3.tree` to compute node coordinates, and the SVG height adjusts to fit the tree’s extent.

Hharsha
76% match
Loading thumbnail…

Tree graph

A tree visualization displays a hierarchical data structure from a JSON file, showing parent-child relationships through vertical links and labeled nodes. The graph represents an object model with classes, attributes, and methods, using D3 v5's `tree`, `hierarchy`, and `linkVertical` layouts to position elements. Interactive pan and zoom functionality is implemented via `d3.zoom`, while nodes are rendered as SVG text with `foreignObject` elements containing input fields. The visualization supports exploration of complex nested data through its expandable tree layout.

66264kusuma@gmail.com
76% match
Loading thumbnail…

React Starter

This example renders a hierarchical tree diagram as an interactive SVG visualization. Built with React and D3.js, the code uses the `hierarchy()` and `tree()` functions to process a JSON data structure, preparing it for layout before the `linkVertical()` path generator draws the connecting lines between nodes. The visualization displays the tree’s nodes as text labels, with font size varying by depth, and uses the `select()` API to append paths and text elements to the canvas. Data is fetched asynchronously from a local JSON file served in a public directory.

Ddavmaz
76% match
Loading thumbnail…

Tidy Tree

This example renders a tidy tree layout using D3’s `d3.tree` within a React component. It draws hierarchical nodes and links with SVG paths, positioning them via the computed `x` and `y` coordinates from the tree layout. The code imports React, ReactDOM, and d3 v6, but only logs the initial data and library objects to the console—no interactive behavior or data loading is visible. The visualization demonstrates a static, clean arrangement of parent-child relationships without animation or user interaction.

110may
75% match