Skip to main content
100%

Gist d06f6ae8d5891ececa24207a8849fee2

✓ Published0🌍 Public
SStephanieReilly
Last edited Dec 6, 2017
Created on Dec 6, 2017

A bar chart titled "Why Are We Leaving Facebook?" visualizes categorical survey responses, with the y-axis formatted as percentages and x-axis labels wrapped onto multiple lines. The SVG rendering is built with D3 v3, using ordinal scaling with `rangeRoundBands` for bar positioning, linear scaling for values, and `d3.svg.axis` for axes. The code also applies a hover effect that changes bar color to brown, and loads tab-separated data from a `data.tsv` file.

AI-generated description

Similar vizzes

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
78% match
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
76% 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
75% 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
74% match
Loading thumbnail…

Gist 4e7e44e2d03bdcba11e6

A bar chart displays the relative frequency of birthdays across the twelve months, with values ranging from 0.04 in February to 0.13 in July and September. The chart uses D3 version 3 to render SVG elements, manually computing bar widths from the dataset length and mapping monthly values to a linear y-axis scale with `d3.scale.linear()`. Data is loaded from a tab-separated file via `d3.tsv`, and each bar is drawn with a rectangle and a white value label, all styled with a steelblue fill.

QQinita
74% match
Loading thumbnail…

Gist ab606e427fd05966a6fc

A grouped bar chart displays monthly event frequencies as percentages from January through December, loaded from a CSV file. The bars are steel blue and turn brown on hover. D3’s ordinal scale with `rangeRoundBands` positions the bars, while a linear scale maps frequency values. SVG rectangles render the bars, and `d3.svg.axis` generates the bottom and left axes with percentage tick labels. The y-axis is labeled “Frequency,” and the chart uses a fixed 960×500 pixel canvas.

QQinita
73% match
Loading thumbnail…

Gist 95392bf4a37344793786

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

HHoffmannP
73% match
Loading thumbnail…

MyBarChart

This interactive bar chart, built with D3 v4, displays the percentage of individuals using the internet alongside mobile cellular subscriptions per country across multiple years. The grouped bars, rendered as SVG rectangles, use an ordinal color scale to distinguish the two metrics. The code loads data from a CSV file and constructs the visualization using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for the axes. A legend and percentage labels are included to clarify the two plotted series.

QQ-Zhao
73% match