Skip to main content
SimilarExport ZIP
100%

PackTree(logical Tree)

✓ Published0🌍 Public
11Cr18Ni9
Last edited Apr 8, 2020
Created on Dec 2, 2019

This example demonstrates an interactive pack layout for managing logical search queries. Users build a tree of data nodes representing query criteria, which can be merged into AND or OR logical groups using drag-and-drop or keyboard shortcuts. The visualization uses D3.js v4's pack layout algorithms, including `d3.packSiblings` and `d3.packEnclose`, to arrange circles representing criteria and logical containers. Built with Vue.js, it renders as animated SVG elements and fetches initial collection and document data from JSON files via axios, with the query-building interface provided by a Vue-based dialog form.

AI-generated description

Author: cxhair@163.com

Amended based on my previous work: Dynamic Pack.

Node category:

  • dataNode: created by use when filling dialog
  • andNode: logical node created by dataNode merged
  • orNode: logical node created by dataNode merged

How does node merging work

  1. If two dataNodes come close merge them into a new andNode
  2. If two andNodes come close,one of them will grow into a bigger andNode and the another will be removed
  3. If two orNodes come close merge them into a new bigger orNode
  4. If one node is dataNode and another is logic node(wrapper node), dataNode will be merged into that logic node
  5. If both are logic node but NOT the same type, andNode will be merged into orNode

Chart Events

  • Right click on blank canvas will pop the dialog that used for creating dataNode
  • Right click on nodes: dismissed from parent logical node or removed after user confirmed.
  • Ctrl + Click: hold on the Ctrl then click on dataNode under the root teee will merge those dataNode into a bigger orNode
  • Drag dataNode close to another dataNode will merged into a andNode
  • Double click on dataNode will pop dialog and update it after user confirmed.

Dialog Events

  • Esc: close dialog
  • Query items can be shifted by dragging on handlers
  • Data validation
mit Licensed

Similar vizzes

Loading thumbnail…

dynamic pack

This interactive pack layout uses a circle-packing algorithm from D3 v4 to represent a hierarchical tree. Users can drag nodes to merge them, right-click on the canvas to add new nodes, or right-click on a node to delete it along with its descendants. The underlying `rData` tree object updates dynamically, and all changes are rendered as animated SVG elements. The implementation relies on custom `d3.drag` behaviors and the `d3.pack` layout.

11Cr18Ni9
77% match
Loading thumbnail…

D3 + Vue.js

This interactive cluster dendrogram visualizes hierarchical data from a CSV file using D3 v4 (via `d3.stratify`) and Vue.js 2.2.4, rendering nodes and links as SVG elements. Vue’s template syntax replaces D3’s `enter`/`exit`/`update` pattern, with computed properties managing the tree layout and transitions. The interface includes controls for chart width, stroke color, and text search, plus a button to add nodes.

663anp3ca
71% match
Loading thumbnail…

Fork of Pack Layout

This example visualizes a hierarchical dataset using D3’s pack layout, rendering circles for nodes and text labels for leaf values. The code builds a tree from an inline JavaScript object, sums leaf values with `root.sum()`, and applies a `d3.pack()` layout with a 300×300 size and 10-pixel padding. Each descendant is drawn as an `indianred` circle with white strokes and centered text, positioned via `transform` attributes. The SVG canvas is 960×500 units, and styling comes from an external CSS file.

DDing
71% match
Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

AAkriti97
71% match
Loading thumbnail…

Pack Layout

This example demonstrates a circular pack layout for hierarchical data using d3.pack, showing nested circles that represent parent and child nodes with sizes proportional to their values. A small dataset with three levels of hierarchy is rendered as SVG circles with semi-transparent indianred fills, white strokes, and text labels only on leaf nodes. The code uses d3.hierarchy and the pack layout to compute positions and radii, then appends transformed groups for each descendant.

Ffloresh
70% match
Loading thumbnail…

D3 + Vue.js

This example demonstrates an interactive cluster dendrogram visualization built with D3.js v4 and Vue.js 2.2, rendered as SVG. It displays a hierarchical tree structure of the Flare dataset loaded from a CSV file, with nodes representing categories and connections drawn as paths. The chart includes user controls for adjusting width, stroke color, and searching nodes, while also supporting node selection and dynamic addition. Vue’s template syntax binds SVG attributes to computed properties, replacing traditional D3 enter/exit/update methods with reactive data-driven rendering.

663anp3ca
70% match
Loading thumbnail…

Basic Circle Pack - Add or Remove Trees from the DOM

A circle-packing visualization displays a hierarchical dataset as nested circles, with buttons to add or remove data nodes from the DOM. Using D3 v5’s `d3.pack` layout and `d3.hierarchy`, the SVG renders each node’s size proportional to its value. Clicking a circle zooms via a tween that interpolates the view, while mouseover and mouseout events add or remove stroke outlines. The code uses D3 selections, transitions, and the `transition.tween` API for smooth animation.

BBrett Cunningham
70% match
Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Mmiloparra
70% match