Skip to main content
SimilarExport ZIP
100%

Automatic Text Sizing

✓ Published0🌍 Public
663anp3ca
Last edited Sep 20, 2018
Created on Sep 20, 2018

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.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Automatic Text Sizing

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.

663anp3ca
87% match
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
85% match
Loading thumbnail…

Circle Packing

This visualization displays a hierarchical dataset as nested circles, using area to represent the number of descendants in each node. Color distinguishes between constrained and unconstrained nodes, with constrained items shown in gray and unconstrained ones in blue. The layout is computed using D3’s `pack` algorithm, which positions circles within a viewport sized to the browser window. Data is loaded from `data.json` via D3’s `json` function, then processed with `hierarchy` and rendered as SVG `<circle>` elements, with white strokes providing visual separation between adjacent circles.

CCalvin Gomez
76% match
Loading thumbnail…

Circle-Packing II

This example visualizes a flat dataset of names and values using a circle-packing layout, where each person’s name appears as a separate circle. The visualization shows the hierarchical structure of the data through nested circles, with each circle’s size proportional to its value, though all values are equal here. The code uses the d3.pack layout to compute circle positions and radii, then appends SVG circles and text labels with clip paths to keep text within the circles. Data is loaded from a CSV file via d3.csv, and the hierarchy is built with d3.hierarchy and .sum().

CCBasis
75% match
Loading thumbnail…

Circle Packing

A circle packing visualization displays a hierarchy of data points as nested circles, using the D3 `d3.layout.pack` layout. The code masks a background image with the circular layout, while leaf nodes are rendered as circular-clipped silhouette images using SVG `clipPath` and `mask` elements. The visualization uses D3 v2 and reads hierarchical JSON data from a `flare.json` file. It renders as SVG, with circles styled by depth and each leaf node containing an image clipped to its circular boundary.

GGerHobbelt
75% match
Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Oocean1225
74% match
Loading thumbnail…

Exercise 4(c)

This example shows a circle-packing visualization of a hierarchical dataset, where the size of each circle represents the summed value of its leaf nodes. The code uses `d3.pack()` with a padding of 20 to create non-overlapping circles within a 300x300 area, rendering them as red, semi-transparent SVG circles with white strokes. Leaf nodes display their names as centered white text, while parent nodes remain unlabeled. The data is a hardcoded JSON object with nested children, and the layout is computed by calling `rootNode.sum()` and `packLayout(rootNode)`.

Yyuva24
74% match
Loading thumbnail…

Pack Layout

This example demonstrates a circular pack layout for hierarchical data using d3.pack, showing nested circles that represent parent and child nodes with sizes proportional to their values. A small dataset with three levels of hierarchy is rendered as SVG circles with semi-transparent indianred fills, white strokes, and text labels only on leaf nodes. The code uses d3.hierarchy and the pack layout to compute positions and radii, then appends transformed groups for each descendant.

Ffloresh
74% match