Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
XXin Li
Last edited Mar 25, 2021
Created on Mar 24, 2021
Forked from HTML Starter

A flame graph visualizes hierarchical profiling data, showing how time accumulates across nested function calls. The chart uses the d3-flame-graph plugin, built on D3 v4, to render stacked rectangles sized by each function’s value. The `flamegraph()` constructor sets the width, and `d3.json` loads the data from `data.json`. Clicking a frame logs its name, while a button calls `chart.resetZoom()` to restore the original view.

AI-generated description

Simple example using d3 flame graph plugin: https://github.com/spiermar/d3-flame-graph

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu
71% match
Loading thumbnail…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

BBhavyatulasi
71% match
Loading thumbnail…

Untitled

This interactive visualization uses a circular packing layout to display a hierarchical dataset from the file `flare.json`. The code employs D3.js v4, React, and SVG with animation, leveraging `d3.hierarchy` to aggregate leaf sizes and `d3.pack` to position circles. Clicking on a node triggers a smooth zoom transition via `d3.transition` and `interpolateZoom` to focus on that subtree, while text labels fade in and out based on parent relationships.

LLaowei42
70% match
Loading thumbnail…

Untitled

This interactive zoomable circle packing visualization displays the hierarchical structure of the flare.json dataset, with nested circles representing parent and child nodes sized by their numeric values. Users click circles to zoom into deeper levels, with smooth animated transitions between views. The visualization uses D3.js v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to animate the zooming effect, rendered as SVG elements with a linear color scale distinguishing depth levels. Text labels appear and fade based on the current zoom focus.

CCHENNI-Nidhaleddine
70% match
Loading thumbnail…

Fork of Untitled

This interactive visualization displays a hierarchical circular packing diagram of the Flare software project's class structure, where nested circles represent parent-child relationships and their sizes encode the relative code volume. Built with D3.js v4 within a React framework, the SVG-based animation supports zooming and panning through the `d3.pack` layout algorithm. The visualization uses smooth transitions via `d3.transition` to animate between hierarchy levels, with color gradients applied based on depth using `d3.scaleLinear`. Users click on circles to explore the tree, while labels fade in and out to show only the currently focused level.

TTanviwalanj
69% match
Loading thumbnail…

Untitled

This interactive bubble chart visualizes a hierarchical dataset from the imported `flare.json`, organizing terms by crime categories such as theft, assault, and drugs. Built with D3 v4’s `d3.pack`, it renders circles as SVG nodes, with zoom and pan handled via `d3.interpolateZoom` and transition tweens. Clicking a node zooms to that subtree, while leaf nodes remain unfilled and only root-level labels display. The color scale uses HSL interpolation to denote depth.

LLaowei42
69% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst chart visualizes the hierarchical structure of the Flare software project, using nested arcs where each ring represents a level in the tree and arc angles are proportional to each node's value. The example, ported from an Observable notebook, loads the data from the `@observablehq/flare` library and renders it using SVG. User interactions trigger the `clicked` function, which sets new target values for the `d3.partition()` layout and uses `g.transition().duration(750)` along with `attrTween` on the path elements to animate the zoom across its layered structure.

Ddrmurugesh
69% match
Loading thumbnail…

Untitled

This interactive tree diagram visualizes the hierarchical structure of the flare codebase, with each node representing a class or category and its size indicating relative importance. Users can expand and collapse branches, zoom and pan the view, and rearrange nodes by dragging them to new positions within the hierarchy. The visualization is built with D3.js version 3, using the tree layout, SVG rendering, and a custom drag-and-drop implementation that temporarily removes and reattaches nodes. Data comes from the bundled flare.json file, and the interface supports smooth animated transitions between states.

AAndrew Helgeland
69% match