Wrapping Long Labels 2.0

100%

Wrapping Long Labels 2.0

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on Dec 8, 2016

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.

AI-generated description

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7555321'>Wrapping Long Labels 2.0</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/b237b631ac184c9f9fa4'>Wrapping Long Labels 2.0</a>

forked from <a href='http://bl.ocks.org/ericsoco/'>ericsoco</a>'s block: <a href='http://bl.ocks.org/ericsoco/647db6ebadd4f4756cae'>Wrapping Long Labels 2.0</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Wrapping Long Labels

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`.

Mmbostock

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

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

79% match

Loading thumbnail…

Wrap Long Labels Bar Chart

This example uses D3 v3 to create a horizontal bar chart with wrapped axis labels. It displays the number of issues per company from a tab-separated data file, with each bar’s frequency shown on hover via the d3-tip plugin. The chart applies an ordinal x-scale and linear y-scale, formatting the y-axis ticks as percentages. Long company names are automatically broken into multiple lines using a custom `wrap` function that checks text length against the bar width, and the SVG rendering includes styled axes, hover color changes, and a bold title.

LLGBY4

77% 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`.

深深度碎片

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

68% match

Loading thumbnail…

Horizontal Bars with Slalom Styles

This example displays the relative frequencies of English letters as horizontal bars sorted in ascending order, with a blue Slalom logo and a credit link to Seemant Kulleen overlaid at the bottom-right. The chart uses D3 v4 with an SVG rendering, employing `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.axisTop` and `d3.axisLeft` for tick marks, and `d3.tsv` to load the `data.tsv` file. Bars are hoverable, changing color, while axis labels use Open Sans and Montserrat fonts.

EEndNight95

68% match

Loading thumbnail…

Fork of Formatting axis

This example displays a bar chart of population data for the ten most populous countries, with each bar's height proportional to its value. The visualization uses a Data-Driven Documents (D3.js) version 7 library with an SVG rendering, and it showcases a custom axis formatting technique where tick labels are styled with CSS. The chart is minimal, featuring steel blue rectangles and large san-serif font text.

JJoshua Arnold

67% match