Wrapping Long Labels

100%

Wrapping Long Labels

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 20, 2013

This example demonstrates how to automatically wrap long axis labels onto multiple lines using D3.js (v3) in an SVG render. It visualizes satirical survey data from The Onion explaining why people are leaving Facebook, with each humorous reason plotted as a steel-blue bar. The custom `wrap` function splits label text into words, measures each line’s width via SVG’s `getComputedTextLength()`, and appends `tspan` elements to create multi-line tick labels sized to fit the bar’s range band. The chart uses `d3.scale.ordinal` for the x-axis and `d3.svg.axis` for labeling, with data loaded via `d3.tsv`.

AI-generated description

This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Wrapping Long Labels 2.0

This example demonstrates how to wrap long axis labels onto multiple lines in a horizontal bar chart, using satirical survey data from The Onion about why people are leaving Facebook. The chart displays six humorous reasons as categories on the x-axis, with corresponding percentage values plotted on the y-axis. The code uses the d3.svg.axis API to generate the axes, and a custom wrap function that leverages the getComputedTextLength() method on SVG text elements to measure and split label text into multiple tspans. The data itself is loaded from a TSV file using the d3.tsv method, and all rendering is done as SVG elements.

FFrissAnalytics

94% match

Loading thumbnail…

Wrapping Long Labels

This example shows a horizontal bar chart of satirical survey responses from The Onion, with long category labels wrapped onto multiple lines using a custom `wrap` function. The code uses D3 v3 with SVG rendering, ordinal `x` and linear `y` scales, and `d3.svg.axis` for axes. The `wrap` function splits label text on spaces and appends `tspan` elements, measuring each line with `getComputedTextLength()` to fit within the bar width. The chart dynamically adjusts the bottom margin based on the number of wrapped lines, while bar colors change on hover.

GGerardoFurtado

87% match

Loading thumbnail…

Text Wrap

This bar chart displays the percentage of people leaving Facebook, with each bar labeled by a humorous reason, such as "Family in feud with Zuckerbergs" and "Discovered how to 'like' things mentally." The chart uses React for the user interface and D3.js (v4) for rendering SVG graphics. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and a custom `wrap` function that utilizes SVG text manipulation to split long labels across multiple lines, ensuring they fit within each bar’s width.

Ssghanapuram

77% match

Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart where each data point is labeled directly on the line, with the final point of each series showing the series name in bold. The chart reads from a TSV file using `d3.requestTsv` and `d3.timeParse` for dates. The code uses `d3.line` to draw the paths, scales `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleCategory10` for colors. For each label, `element.getBBox` computes the text bounding box, and a white rectangle is drawn behind it with padding for legibility.

Mmbostock

72% match

Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart with inline data labels, showing values for Apples and Bananas across several years. Every point is labeled directly on the line, with a white rectangle behind the text to ensure legibility, computed via SVG’s `getBBox` and a small padding. The chart is built with D3 v4 Alpha, using `d3.requestTsv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. The final label in each series appends the series name as a bold `tspan`.

深深度碎片

71% match

Loading thumbnail…

Labels on multiple lines v4

This example shows a multi-line chart with two time-series lines for stock open and close prices, with labels placed directly at the end of each line. The labels “Open” and “Close” are positioned manually using SVG text elements, colored to match their respective lines (red and steelblue), and anchored to the final data points. The visualization uses d3.csv to load the data, d3.timeParse to parse dates, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths in an SVG canvas.

Dd3noob

70% match

Loading thumbnail…

Labels on multiple lines v7

This example shows two time series lines—one for “close” and one for “open” values—plotted against a date axis, with each line labeled directly at its right‑end point using SVG `<text>` elements. The data is loaded from a local CSV via `d3.csv` and parsed with `d3.timeParse`. The chart is built with D3 v7 primitives: `d3.line` generates the path geometry, `d3.scaleTime` and `d3.scaleLinear` map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` render the axes. Red and steel‑blue strokes distinguish the two lines, and their labels are positioned using the scaled y‑values of the first data point.

Dd3noob

69% match

Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that binds JSON data to SVG elements, showing municipal census values as horizontally sorted bars. The visualization uses D3.js v5 to load data from a GitHub-hosted JSON file and renders two separate SVG containers, though only the first is populated. The code employs D3’s data join pattern with `selectAll`, `data`, and `enter` to append rectangles for bars and text labels for municipality names. A linear scale maps the data domain to pixel widths, while bar heights are fixed and y-positions are computed by index. The chart sorts data in descending order by census value before rendering.

663anp3ca

69% match