Fork of Bubble tree test

100%

Fork of Bubble tree test

✓ Published2🌍 Public

Last edited May 10, 2024

Created on May 10, 2024

Forked from Medical Data Tree CURRENT FINAL - testing

This visualization displays a hierarchical bubble tree of microbiology terms, using nested circles to represent taxonomic and structural relationships within the domain. The tool enables interactive zooming through circle clicks, with smooth animated transitions between hierarchy levels. Built with D3 v4's `d3.pack` layout, the code fetches JSON data from a GitHub repository, then applies `d3.interpolateZoom` and `transition.tween` for the zoom effect. Circles are colored by depth using an HSL color scale, and labels fade in and out based on the current focus node.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Bubble tree test

This interactive bubble tree visualizes a hierarchical dataset of microbiology and immunology terms, displaying parent-child relationships as nested circles. The visualization uses a D3.js pack layout to arrange nodes by depth, with clicking on a circle zooming to reveal that branch’s context. Built with d3.v4, it employs SVG rendering, animated zoom transitions via transition.tween, and a linear color scale to encode hierarchy depth. The data loads from a remote JSON file, with text labels shown for root-level nodes and revealed dynamically during zoom interactions.

KKatharina Simma

93% match

Loading thumbnail…

Fork of Bubble tree test

This example presents an interactive bubble tree visualization of hierarchical medical data. It displays a collapsible node-link diagram where clicking a node reveals its children, recentering the tree, and showing detailed information about the selected item in a separate panel. The visualization uses D3.js v6 with SVG rendering and smooth transitions, loading data from a remote JSON file hosted on GitHub. The chart dynamically sizes node radii based on the number of children and categorizes nodes by their medical descriptions. The code also demonstrates recursive tree traversal and data categorization logic within a React framework.

QQuinn Sebso

87% match

Loading thumbnail…

Layout

This interactive circular visualization uses a zoomable bubble layout to display hierarchical data, with circles sized by a `size` value and colored by depth. The visualization presents a root node with a single child "abc" that contains six leaf nodes, each with sub-elements. Users can click any circle to zoom into that hierarchy level, with smooth animated transitions between views. Built with D3 v4, the code applies `d3.pack()` for the circle layout, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom` for camera-like zooming. The SVG rendering includes hover effects on nodes and labels that fade in only for visible parents. Data comes from a local `flare.json` file.

AAkriti97

78% match

Loading thumbnail…

Fork of Bubbles with Json Data

This visualization displays a bubble chart built from JSON data, with each circle representing a person and sized according to a numeric value. The bubbles are labeled with truncated names and monetary amounts, and clicking one triggers a process load. The code uses d3.pack for hierarchical layout, d3.hierarchy for data structuring, and D3 selections to append SVG circles and text. The visualization is rendered in a React framework with SVG, using the d3.v5 library.

Yyeeet0421

78% match

Loading thumbnail…

Fork of SAVE POINT Circle Packing

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

77% match

Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

LLaowei42

77% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

77% match

Loading thumbnail…

Fork of Fork of Bubbles with Json Data

This visualization displays a bubble chart of 18 individuals, with each bubble sized according to a monetary value and labeled with the person's name and that value. The code uses D3 v5's `d3.pack` layout to position bubbles within a hierarchical JSON dataset, rendering circles and text as SVG elements. Clicking a bubble triggers a process-loading function, and the chart is embedded in a React-based HTML page. The visualization demonstrates D3's declarative data joining with `d3.hierarchy` and `d3.pack`.

Yyuli19991001

77% match