Skip to main content
SimilarExport ZIP
100%

Overlapping labels - d3fc-label-layout

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jun 10, 2019
Created on Jun 10, 2019

A scatterplot-style visualization places five Roman emperor labels inside a fixed rectangular bounds, using greedy layout from the d3fc-label-layout library to prevent overlapping labels. Each label measures its text bounding box via SVG `getBBox()` and positions points along a linear scale, with simulated annealing replaced by the greedy strategy for collision avoidance. The code renders SVG rectangles and text through d3 selections, combining d3.v4 scales with d3fc components such as `fc.layoutTextLabel`, `fc.layoutGreedy`, and `fc.layoutLabel` to arrange labels near their assigned y-values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Label layout example

This example demonstrates how the d3fc-label-layout component places text labels on a scatterplot without overlap, using data from a CSV file that counts GitHub users and organizations per programming language. The code employs a greedy strategy combined with simulated annealing to remove overlapping labels, while each label is rendered as a text element with a circle marker at its data point. The visualization is built with d3 v4, d3fc, and React, and rendered as an SVG chart using d3fc’s Cartesian chart API.

CColinEberhardt
82% match
Loading thumbnail…

Vertical alignment of text labels

This example demonstrates a label-collision-avoidance algorithm for stacked bar charts, showing how text labels can be repositioned to prevent overlap when bars are small or near the chart’s border. The visualization uses three colored sets of rectangles—red for the initial random positions, orange for labels after bottom-alignment adjustments, and green for the final corrected positions after top-alignment passes. Built with D3 v4 and rendered as SVG, the code computes bounding boxes and shifts overlapping rectangles vertically in one or two passes. The data consists of eight randomly generated y-coordinates, sorted in descending order, with labels drawn at fixed width and height.

EEE2dev
72% match
Loading thumbnail…

Voronoi Labels in d3v4

This example uses a Voronoi tessellation to place labels in a scatterplot, showing how cell area and centroid direction determine which points get labeled and where. The code generates 200 random points, computes their Voronoi polygons with d3.voronoi, and filters for cells larger than 2000 square pixels. For each qualifying point, it compares the centroid to the point itself, choosing a label orientation among top, right, bottom, or left based on the angle. The visualization renders SVG paths for cell borders and centroid lines, with labels positioned via text anchors and offsets.

PPhilippe Rivière
70% match
Loading thumbnail…

Experimental Label Placement

This visualization experiments with automated label placement for stacked area charts, using a streamgraph of D3.js commit activity across repositories over time. It renders smooth, wiggle-offset layers in SVG with hover interactions, and computes a label position for each layer by finding the widest vertical gap along its midpoint line, then placing text via `d3.textPath`. The labels are sized according to the gap height, revealing the technique’s limitations when text overflows irregular area shapes.

CCurran Kelleher
69% match
Loading thumbnail…

text label test

This visualization demonstrates six distinct techniques for making text labels readable when placed on top of colored bars. It compares plain labels against those with background rectangles, SVG filters, paint-order strokes, and CSS text shadows, using black, blue, red, and yellow bars as backdrops. Built with D3 v5 and rendered as SVG, the example leverages SVG filter primitives like `feFlood` and `feComposite`, as well as CSS `text-shadow` and the `paint-order` property to enhance legibility. The code includes no data binding and is purely a static test of label styling approaches.

EEE2dev
68% match
Loading thumbnail…

Alignment of text labels - 2

This example demonstrates how text labels and axis ticks can smoothly transition to new positions when the underlying scale is rescaled. The visualization shows a set of categories along a point scale, where random data values are generated and the labels animate to their new y-positions while respecting constraints: labels do not overlap vertically, remain within the frame, and shift left or right depending on available space. The code uses D3 v4 with SVG and transitions via `d3.transition()`, updating the axis with `d3.axisLeft` and repositioning label groups using `.attr("transform", ...)`. A toggle button triggers the transition between original and rescaled states.

EEE2dev
68% match
Loading thumbnail…

d3fc-label-layout map example

This example shows a labeled map of the United Kingdom, with city names positioned to avoid overlap and removed when they collide. It adapts Mike Bostock's map tutorial, using d3.geoPath and topojson to render the geography, while d3fc-label-layout's layoutLabel component, combined with layoutGreedy and layoutRemoveOverlaps strategies, places the SVG text labels. The code loads UK map data from a JSON TopoJSON file and uses the d3fc text label component for layout.

CColinEberhardt
68% match
Loading thumbnail…

scatter rectangles

This example shows a scatterplot where each point is a rectangle, with its width and height encoded as, well, width and height—the actual visual size of the rectangle corresponds to the data values. The visualization uses a force-directed layout with a custom rectangle-collision constraint, so the rectangles push apart and settle into a non-overlapping arrangement. Rendered as an animated SVG, the rectangles drift and rearrange themselves in response to the forces, creating a dynamic, organic distribution. The code builds on an earlier rectangle-force block by Elijah Meeks and uses D3's force module (d3-force v1.0.0) along with the d3v4+jetpack convenience library. The animation makes the spatial encoding of each rectangle's dimensions immediately visible as the rectangles jostle and find their positions.

11wheel
68% match