Text Wrap

100%

✓ Published0🌍 Public

Last edited Mar 19, 2020

Created on Mar 12, 2020

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.

AI-generated description

A bare minimum HTML page.

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

79% match

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

77% match

Loading thumbnail…

Line Chart

This line chart displays the annual number of Facebook users from 2008 to 2017. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG with labeled axes and a red, bold stroke. The data is loaded via `d3.csv` from a GitHub gist, with year values parsed into Date objects and user counts converted to numbers. The chart includes a title, axis labels, and grid lines styled via CSS.

RRupeshGandham

68% match

Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most-liked companies for crypto, based on social sentiment analysis data loaded from a CSV file. The visualization uses React and D3.js v5 to render SVG marks and channels, with a band scale for the categorical y-axis and a linear scale for the quantitative x-axis. Each company is represented as a rectangular bar, with the width encoding the number of likes, and axis ticks are generated using `scaleLinear.ticks`. The chart includes a styled title and uses a custom React component with `useState` and `useEffect` to fetch and process the data.

RRohithReddy-thoughts

68% match

Loading thumbnail…

Bar chart Interactive

This interactive bar chart displays the "love meter" percentages for various programming languages, allowing users to hover over a bar to see its value highlighted with a reference line and divergence labels. The visualization uses D3.js v5 within a React environment, rendering SVG elements with animation transitions. It employs `d3.scaleBand`, `d3.scaleLinear`, and axes for structured plotting, while mouse events trigger opacity changes, bar enlargement, and the temporary display of difference annotations. The data is embedded directly in the code, inspired by the Stack Overflow 2018 developer survey.

KKeerthipriyaBankuru

68% match

Loading thumbnail…

Line_chart_facebook_users

This line chart displays Facebook's annual user count from 2008 to 2017. The visualization, rendered as an SVG, plots the number of users against each year. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart with labeled axes and a styled path. Data is loaded from a CSV file hosted on GitHub Gist via `csv()`, with the year parsed as a date and user numbers converted to numeric values.

MMeghanaArepalli

68% match

Loading thumbnail…

Making a bar chart

A horizontal bar chart ranks social media platforms by user count, using Font Awesome icons instead of text labels for each bar's category. The visualization loads data from a CSV file and renders SVG rectangles with D3 v5's `scaleLinear`, `scaleBand`, `csv`, `axisLeft`, and `max`. The bars are filled with a red color, while the y-axis displays the platform names. The chart includes margins and uses a linear scale for the quantitative user values, with the x-axis hidden in the final output.

BbeauMarko

68% match

Loading thumbnail…

Line Chart for Facebook Users

This line chart shows the annual number of Facebook users from 2008 to 2017. The visualization uses D3 v5 to load CSV data from a GitHub gist. The code employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for tick marks. A `d3.line` generator creates the path, which is rendered as an SVG element with a custom stroke style.

PPavaniMangugari

67% match