Fork of SAVE POINT Circle Packing

100%

Fork of SAVE POINT Circle Packing - SEARCH

✓ Published0🌍 Public

Last edited May 13, 2024

Created on May 13, 2024

Forked from SAVE POINT Circle Packing - SEARCH

A circular packing visualization displays a hierarchical medical dataset as nested circles, with color encoding depth and interactive zooming into subtrees. Users can search by name via an input field with autocomplete, triggering animated zoom transitions on matching nodes. The implementation uses d3.pack for layout, d3.hierarchy for tree construction, and d3.interpolateZoom for smooth transitions, with data fetched from external JSON URLs. Search filtering relies on React state synced with the SVG elements, while rendering remains SVG-based.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

This visualization displays a hierarchical medical dataset as an interactive circle packing diagram. Users can click nodes to zoom into different levels of the tree, with smooth animated transitions between views, and hover over circles to see tooltips with descriptions. The implementation uses d3.pack for layout, d3.hierarchy for data structuring, and d3.interpolateZoom for zoom animations, all rendered as SVG with React. A search bar with autocomplete functionality filters the data, which is loaded remotely from a JSON file using d3.json.

QQuinn Sebso

95% match

Loading thumbnail…

SAVE POINT Circle Packing - SEARCH

This visualization uses a D3.js v4 circle packing layout to display a hierarchical medical dataset, with each node’s area proportional to its leaf count and color mapped via a linear scale. A search bar with autocomplete suggestions allows users to locate nodes by name; selecting a result highlights the corresponding circle and displays the full ancestor path below the search input. The rendering uses SVG and includes interactive zooming and panning, with tooltips on node click. Data is loaded from external JSON files, and the interface is built within a React framework.

QQuinn Sebso

93% match

Loading thumbnail…

SAVE POINT Circle Packing

This interactive circle packing visualization displays a medical dataset as a hierarchical arrangement of nested circles, where each node represents a category or item and its size corresponds to its value. Users can click on any circle to zoom into that subtree, with the view smoothly animating to focus on the selected level. Built with D3.js v4 and React, the visualization uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom()` for the zoom transitions. Node colors are assigned via a linear scale with HCL interpolation based on hierarchy depth. The visualization loads its data from a remote JSON file hosted on GitHub.

QQuinn Sebso

88% match

Loading thumbnail…

Final Circle Packing

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

QQuinn Sebso

86% match

Loading thumbnail…

Fork of SAVE SPOT Medical Data Tree - Category (retry)

This interactive tree visualization explores the Medical Subject Headings (MeSH) hierarchy, using a force-directed layout to display the relationships between medical categories and their sub-terms. Built with D3.js v6 and React, the tree is rendered as SVG elements, with animated transitions when nodes are clicked to expand or collapse child categories. The code processes flat MeSH data into a hierarchical structure, categorizing entries based on regex patterns matching their descriptions. Users can navigate through the tree by clicking nodes, which triggers smooth animations and displays node-specific information in a floating div.

QQuinn Sebso

79% match

Loading thumbnail…

Fork of SAVE SPOT Medical Data Tree - Category

This visualization presents a hierarchical medical data tree that organizes disease-related concepts into 18 broad categories, such as treatment procedures, biological processes, and genetic topics. Users can click nodes to expand or collapse branches, navigating the structure while a side panel displays the clicked node's name and key. Built with D3.js v6 and React, the tree uses animated transitions to smoothly update node and link positions. Data is sourced from a remote JSON file and processed by a custom categorizer that assigns nodes to categories based on regex pattern matching.

QQuinn Sebso

79% match

Loading thumbnail…

Fork of Project circularPacking

This example visualizes a hierarchical dataset of CERFACS researchers using a zoomable circular packing layout in D3. Clicking a non-root circle zooms into that node’s subtree, while clicking the background returns to the full view, with smooth animated transitions. It renders circles and text labels in SVG, using `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom`. The code also demonstrates ES6 module imports and loads data from a local JSON file.

YYiorgos Bagakis

79% match

Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1

78% match