sonakshi

@sonashine·9 public vizzes

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.

Feb 5, 2022

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`.

Dec 11, 2021

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.

Dec 9, 2021

Loading thumbnail…

Fork of Tree 7

An animated D3.js v3 tree diagram presents a hierarchical dataset loaded from a JSON file. The visualization uses `d3.layout.tree`, `d3.svg.diagonal` for links, and SVG transitions to expand and collapse nodes on click. Node colors reflect custom classes, such as `.blinkwarn` and `.blinkred`, which trigger CSS keyframe animations. The tree layout derives x and y positions from depth, normalizing vertical spacing to 120 pixels per level.

Oct 19, 2021

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.

Jul 28, 2021

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.

Jul 28, 2021

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.

Jul 28, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to display static text using D3 version 6, rendering “Hello D3 version 6” in the browser body. The page loads D3 from a CDN and uses the `select` method to target the `body` element, then calls the `.text()` method to insert the message. It serves as a bare-bones starting point for D3 projects, showcasing the library’s core selection and DOM manipulation API in a straightforward, single-page HTML file.

Jul 14, 2021

Loading thumbnail…

Mind Map

A hierarchical mind map displays the geographic structure of the world, starting with continents like Asia and drilling down through sub-regions to individual countries. The layout uses a horizontal tree, where each node’s depth determines its font size, and the connecting links are drawn as smooth horizontal curves. Built with D3 v5, the visualization leverages `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal`, and includes a zoom interaction via `d3.zoom`. Text labels are rendered with SVG elements, and the styling uses the Playfair Display font.

Jul 4, 2021