Fork of Fork of Mind Map

100%

Fork of Fork of Mind Map

✓ Published0🌍 Public

Last edited Mar 18, 2022

Created on Mar 18, 2022

Forked from Fork of Mind Map (adding the context menu)

This interactive mind map visualizes a hierarchical tree of Leonardo da Vinci-related topics, using a branching layout with labeled boxes and links that can be expanded or collapsed on click. Built with D3.js (v3) and jQuery, it loads JSON data and renders the structure as an SVG with smooth animations. The visualization supports zooming and dragging via d3.behavior.zoom, and includes a custom right-click context menu for additional actions. Node colors and tooltips are styled through CSS, while the tree layout is computed with d3.layout.tree.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Mind Map (adding the context menu with html)

This interactive mind map visualizes Leonardo da Vinci’s biography and related topics using a hierarchical tree layout rendered as SVG with D3.js v3. Users can pan, zoom, and click nodes to expand or collapse branches, while a custom HTML context menu appears on right-click with options like Share, Rename, and Delete. The visualization uses the `d3.layout.tree` API for positioning, with data loaded from a JSON file containing node names, types, and Wikipedia links. It includes smooth animations and a drop-shadow effect, with the tree structure dynamically sized based on the deepest node depth.

Ssonakshi

93% match

Loading thumbnail…

Fork of Mind Map (adding the context menu)

This interactive mind map displays a hierarchical tree of Leonardo da Vinci and related figures like Michelangelo, using a JSON data file. The visualization, built with D3.js v3 and SVG, uses a custom `treeBoxes` function to render nodes and animated links. A custom context menu, triggered by a right-click, presents a list of options, while the zoom and pan behavior is handled by D3's `behavior.zoom` API. The tooltip system and node styling are defined in the accompanying CSS.

Ssonakshi

93% match

Loading thumbnail…

Fork of Fork of Mind Map (adding the context menu 2.0)

This interactive mind map visualizes a hierarchical tree of topics related to Leonardo da Vinci, using data from a JSON file that includes nodes linking to Wikipedia articles. Built with D3.js (v3) and jQuery, it features a custom right-click context menu that appears at the cursor position, with menu items sized dynamically based on text measurement. The SVG-based tree includes collapsible nodes, tooltips, zoom and drag capabilities, and animated transitions, with node colors assigned by type.

Ssonakshi

92% match

Loading thumbnail…

Fork of Mind Map (adding two directions)

This example presents an interactive tree layout that visualizes a mind map centered on Leonardo da Vinci, with branches extending to related topics such as Polymath, Michelangelo, and specific works. The visualization uses D3.js v3 to render SVG nodes and links, with animated transitions when expanding or collapsing nodes. The tree layout is computed with `d3.layout.tree`, and nodes display tooltips on hover. The code also includes zoom-and-drag behavior via `d3.behavior.zoom`, while node data is loaded from a JSON file containing hierarchical information with names, URLs, and link directions.

Ssonakshi

91% match

Loading thumbnail…

Fork of Fork of Mind Map (adding the context menu with d3)

This example shows a hierarchical mind map exploring Leonardo da Vinci and related figures, with a custom context menu that appears on right-click. The tree layout is built using D3 v3’s `d3.layout.tree`, rendering nodes as SVG rectangles and links as paths, with data loaded from a JSON file. The context menu is implemented with D3 selections, dynamically sized based on text measurement, and uses mouse events for hover styling and dismissal. The visualization also supports zoom and drag via `d3.behavior.zoom`, and includes tooltips and animated updates.

Ssonakshi

89% match

Loading thumbnail…

Mind Map

This interactive mind map visualizes a hierarchical tree of concepts related to Leonardo da Vinci, including “Polymath,” “Michelangelo,” and specific works, with each node linking to a Wikipedia article. Built with D3.js v3 and jQuery, the SVG diagram uses an animated collapse/expand interaction on node click, illustrating parent-child relationships through colored, labeled links. The code employs `d3.layout.tree` for layout, custom zoom and drag behavior, and tooltips, dynamically sizing the canvas based on tree depth and breadth. Data is loaded from a JSON file via `d3.json`.

Ssonakshi

85% match

Loading thumbnail…

Fork of Fork of Fork of D3 Tree with Multiple Parents

This interactive visualization displays a hierarchical tree with multiple parent links, allowing nodes to connect across branches. Clicking a node collapses or expands its children with smooth transitions. Using D3 v5’s tree layout, linkHorizontal paths, and zoom behavior, the code renders SVG text labels and links, with node positions recalculated from a JSON dataset via Underscore utility functions.

AASHA

77% match

Loading thumbnail…

Fork of Fork of Tree with rectangular links

This interactive tree diagram visualizes hierarchical data from a JSON file, using rectangular links to connect parent and child nodes. The visualization is built with D3 version 6, employing the `d3.cluster` algorithm for layout and custom SVG path generation for the orthogonal edges. Users can click on individual nodes to expand or collapse their subtrees, triggering smooth animated transitions that reposition the remaining elements. The diagram displays node labels alongside colored rectangles indicating whether each node has children, with the viewport automatically adjusting to fit the current layout through transitions.

SSEDKI91

77% match