Untitled

100%

✓ Published1🌍 Public

Last edited Aug 30, 2020

Created on Aug 30, 2020

Forked from SVG Face

This interactive icicle chart visualizes the hierarchical classification of several butterfly species within the animal kingdom, from life down to the specific Latin names. Built with D3 v5, it uses a partition layout to render the tree as nested rectangles, with colors assigned via a rainbow interpolator. Clicking any rectangle smoothly animates the chart, zooming in or out to refocus the view on that branch of the data.

AI-generated description

SVF face with animated Eyebrows

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive zoombox visualization displays a hierarchical partition of biodiversity data loaded from a JSON file, breaking down the tree of life from “Life” down to individual butterfly species. The visualization uses `d3.layout.partition` to compute the rectangular layout, with `d3.scale.linear` for positioning and `d3.scale.category20c` for coloring nodes. Clicking a rectangle triggers a smooth transition using `rect.transition()`, which animates the x and y scales to zoom into that node’s domain, revealing deeper taxonomic levels. The SVG rendering is styled with white strokes between rectangles to distinguish partitions.

Aarun-subba

83% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This interactive visualization displays hierarchical data as a zoomable icicle chart, using rectangles sized by value and colored by category. Users can click any rectangle to zoom into that branch, while a breadcrumb trail above shows the current path and percentage of the total. The example uses d3.partition, d3.hierarchy, and d3.scaleOrdinal to build the layout, with SVG rect and foreignObject elements for rendering. Breadcrumb polygons are dynamically generated from the ancestor sequence. The code loads data from either biodiversityData.json or data.json, and includes animated transitions via rect.transition and fo.transition.

Aarun-subba

79% match

Loading thumbnail…

Untitled

This interactive zoomable icicle chart visualizes the hierarchical Flare-2 dataset through animated rectangular partitions. Users click nodes to zoom, with smooth SVG transitions recalibrating the layout to focus on the selected subtree. Built with React and D3’s `partition` layout, it uses `scaleOrdinal` and `interpolateRainbow` for color encoding, while `transition.attr` animates rectangle and text positions. The visualization loads JSON data via `d3.json` and renders entirely in SVG, with tooltips showing ancestor paths and numerical values.

BBen McCarty

79% match

Loading thumbnail…

Data visualization ICE-8 Animals tree Chart

This visualization presents a hierarchical tree chart of animals, showing the classification of species into groups like Invertebrates, Amphibians, and Fish, with leaf nodes for specific examples such as insects and frogs. The chart uses a D3.js tree layout algorithm, where the thickness of each node’s circle reflects its assigned value, and color encodes both the node’s type and level. Curved links connect parent and child nodes, with stroke colors derived from the data’s level field. The visualization is built with React, renders as an SVG, and relies on D3 v5 APIs including `d3.tree()` and `d3.hierarchy()`.

Vvamshisoletii

78% match

Loading thumbnail…

ICE8_Tree

This interactive tree diagram displays a hierarchical classification of animals, with branching categories for vertebrates and invertebrates. The visualization uses D3.js to render an SVG layout with collapsible nodes, where clicking a node toggles its children in an animated transition. Data is loaded directly from a static JavaScript object, while the tree layout and diagonal link projections come from D3’s layout library. The animation updates node positions smoothly over a set duration, with circles and styled text labels for each species.

Ssrividya-bachina

78% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This example presents an interactive zoomable icicle chart that visualizes hierarchical biodiversity data, with a breadcrumb trail showing the current path and percentage of the total. The visualization uses D3.js v4 to render SVG rectangles, with foreignObject elements for labels that can be clicked to zoom into a subtree. The breadcrumb trail updates dynamically on click, displaying each ancestor node and the proportion of the total value it represents. The chart uses d3.partition to compute the layout and d3.scaleOrdinal with the Category20c color scheme to differentiate nodes.

Aarun-subba

78% match

Loading thumbnail…

ICE 8-3 Tree

This interactive tree diagram visualizes a three-level biological classification of animals, from the root “Animals” down to specific classes like Mammals and Insects. Built with D3.js (version 3.5) using `d3.layout.tree` and `d3.svg.diagonal`, it renders nodes as SVG circles with text labels and animated curved links. Each node’s fill color corresponds to its hierarchical level, while the stroke color remains uniformly grey, helping distinguish taxonomic depth at a glance.

HHARSHA BUDDANA

78% match

Loading thumbnail…

ICE-8 Animal Tree

This interactive visualization presents a hierarchical classification of animals as a branching tree. Built with D3.js v3, it uses an SVG-based layout with collapsible nodes, colored rectangles, and directional links to illustrate relationships between categories like vertebrates and non-vertebrates. The tree reads from a JSON data file and supports zoom and drag navigation via `d3.behavior.zoom`. Node colors correspond to taxonomic levels, while tooltips and click interactions reveal additional details about each group.

AAbhinav-Mullapudi

78% match