Label layout example

100%

Label layout example

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 12, 2017

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.

AI-generated description

A demonstration of the d3fc-label-layout component.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Overlapping labels - d3fc-label-layout

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.

PPatrick Wojda

82% 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

72% 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

72% match

Loading thumbnail…

Reusable Scatterplot with D3.js

This example demonstrates a reusable scatterplot built with D3.js v6 and React, displaying two sample CSV datasets that users can toggle between via a button. The visualization shows grouped data points as colored circles, with linear scales mapping X and Y values to SVG coordinates, ordinal color encoding for group categories, and axes with titles. Rendering relies on SVG elements and D3’s axis, scale, and CSV parsing APIs, while the legend updates based on the active dataset’s group domain.

Hharsha

72% 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

71% match

Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

71% match

Loading thumbnail…

Let's make a scatterplot with D3.js

This example uses D3.js v5 within a React framework to render an SVG scatterplot of the top 10 countries by population. The code leverages `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft` to map country names to the y-axis and population values to the x-axis. It formats x-axis tick labels with `d3.format` to abbreviate large numbers, and includes grid lines and a chart title. Data is loaded from a CSV file.

BB Sundaresan

70% 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

70% match