Automatic Text Sizing

100%

Automatic Text Sizing

✓ Published0🌍 Public

Last edited Sep 20, 2018

Created on Sep 20, 2018

A circle-packing diagram shows the hierarchical Flare dataset as leaf nodes only, with each circle’s size proportional to its value. When a node is hovered, its circle turns orange. Text labels are automatically resized to fit within each circle using D3’s `getComputedTextLength` method, scaling the font size so that longer names shrink to remain readable. The visualization uses `d3.layout.pack` and SVG rendering in D3 v3, with data loaded from a JSON file.

AI-generated description

forked from <a href='http://bl.ocks.org/rlugojr/'>rlugojr</a>'s block: <a href='http://bl.ocks.org/rlugojr/3a8276b79beedae0cca8ae400ac1ee99'>Automatic Text Sizing</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Automatic Text Sizing

A circle-packing diagram displays the hierarchical Flare dataset, sizing each bubble by leaf-node value and placing every label inside its circle. The visualization uses the d3.layout.pack layout to compute circle positions and radii, then renders SVG circles and text. Each label’s font size is calculated dynamically using `getComputedTextLength` and the circle’s radius, shrinking text automatically to fit within the available space. Hovering highlights a node’s circle in orange.

Mmbostock

96% match

Loading thumbnail…

Automatic Text Sizing

A circle-packing visualization displays hierarchical data from a JSON file as nested circles, with each leaf node labeled by its name. The text size adjusts automatically to fit within each circle's diameter, using SVG text elements and a font-size calculation based on the circle's radius and the text's computed length. D3 v3's layout.pack positions the circles, while the code uses this.getComputedTextLength() to scale labels appropriately.

663anp3ca

87% match

Loading thumbnail…

Circle-Packing II

A circle-packing visualization displays the hierarchical structure of the Flare dataset, with each node represented as a circle whose size encodes a numeric value. The code uses D3 v4's `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the CSV data. SVG elements are generated manually, with circle nodes, clip-paths for text labels that split on capital letters, and tooltips showing full paths and formatted values via `d3.format`.

663anp3ca

84% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the hierarchical structure of the Flare class library using nested circles, where each circle’s area encodes the size metric from the underlying flare.json dataset. Clicking any circle triggers a smooth zoom transition, bringing that node and its descendants into focus, while clicking again zooms back out. The visualization is built with D3 v4 and rendered as SVG, with hover effects highlighting nodes and labels that adjust dynamically as the hierarchy expands and collapses.

663anp3ca

81% match

Loading thumbnail…

Circle Packing

This example visualizes the Flare class hierarchy as an enclosure diagram, using nested circles to represent the structure and size of each node. The visualization uses a circle-packing layout, where each circle’s area is proportional to the numeric value of its corresponding data item, and parent circles enclose their children to reveal the hierarchy. The implementation relies on `d3.pack()` for layout, `d3.hierarchy()` for data aggregation, and renders the result as an SVG with styled circles and labels. The color scheme distinguishes leaf nodes as orange with full opacity, while non-leaf circles are blue and semi-transparent.

Mmbostock

81% match

Loading thumbnail…

Improved Circle Packing

This visualization uses D3 4.0’s improved circle-packing layout, which computes the smallest enclosing circle for each node to fit circles more tightly than earlier versions. The example displays the hierarchical Flare JSON dataset, with circle size proportional to leaf values and color distinguishing top-level branches. It renders directly to a Canvas element via the d3 pack layout, avoiding SVG’s DOM overhead. The code also includes a bundled d3-xhr library for asynchronous data fetching.

Mmbostock

80% match

Loading thumbnail…

Untitled

This visualization shows a zoomable circle packing layout of the Flare software dependency hierarchy, where each node’s area encodes its size value. Clicking a circle zooms to that subtree, smoothly interpolating the view with `d3.interpolateZoom` and animating label opacity and display. It uses `d3.pack`, `d3.hierarchy`, and `d3.scaleLinear` with HCL interpolation, rendering in SVG within a React framework. Data comes from the bundled `flare.json` file.

Iilincaion

79% match

Loading thumbnail…

Trying circle packing VI

This circle packing diagram visualizes the hierarchical structure of the Flare dataset, with nested circles representing the data hierarchy and color encoding depth via d3.scaleSequential with interpolateMagma. The visualization uses d3.pack, d3.hierarchy, and d3.format to compute and display node values, while the Observable stdlib's DOM.uid generates unique identifiers for clipping paths that constrain text labels to leaf circles. The SVG rendering includes interactive tooltips showing ancestor paths and values, with the code loaded from @observablehq/flare via require().

CCelebrinu

79% match