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

100%

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

✓ Published0🌍 Public

Last edited Jul 28, 2021

Created on Jul 28, 2021

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

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.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

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

94% match

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

92% 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 Fork of Mind Map

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.

MMing LIU

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

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

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

74% match

Loading thumbnail…

Fork of Fork of Fork of Tree 7

This example presents an animated, interactive tree diagram built with D3.js. It visualizes a small hierarchical JSON dataset starting from a root node, with branches expanding three levels deep. Users can click any node to collapse or expand its children, triggering smooth transitions of the SVG paths and circles. The layout uses `d3.layout.tree` and `d3.svg.diagonal` for the curved links, with nodes repositioned over a fixed horizontal depth. The rendering relies on SVG elements and timed transitions via `.transition()` with a set duration.

Ffkukcha

73% match