Skip to main content
100%

Horizontal Bar Chart Sort

✓ Published0🌍 Public
Aadkinsc
Last edited Sep 28, 2017
Created on Sep 28, 2017

A horizontal bar chart displays letter frequencies from a TSV data file, with bars sorted ascending by frequency value. The visualization uses D3 v4’s `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendered as SVG rectangles. The code applies `d3.axisTop` and `d3.axisLeft` for axes, and bars change color on hover. The data is loaded via `d3.tsv` and sorted using a comparison function on the frequency field.

AI-generated description

forked from <a href='http://bl.ocks.org/rcrocker13/'>rcrocker13</a>'s block: <a href='http://bl.ocks.org/rcrocker13/66a11b84ff86edc61ffb61b3d99cf02a'>Horizontal Bar Chart Sort</a>

mit Licensed

Similar vizzes

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
84% match
Loading thumbnail…

Bar Chart

A bar chart displays the relative frequency of each letter in the English language, sourced from a TSV file. The bars are colored steelblue and turn brown on hover, with axes for letter categories and percentage values. Built with D3 v4, it uses `d3.tsv` for parsing, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for rendering the axes as SVG elements.

Mmbostock
83% match
Loading thumbnail…

Bar Chart in D3 v5

This bar chart shows the frequency of each letter in the English language, using a TSV file parsed with d3-dsv and rendered as SVG rectangles. The x-axis uses d3.scaleBand for letter categories, while the y-axis uses d3.scaleLinear with percentage formatting via d3-format. Hovering a bar changes its fill to brown, and axes are generated with d3-axis. Data loading is handled asynchronously through d3.tsv, with values converted to numbers using d3-array.

Aalex-rind
83% match
Loading thumbnail…

Sortable Bar Chart

This variation of a sortable bar chart displays letter frequencies from a tab-separated data file. Users toggle a checkbox to reorder bars either alphabetically by letter or descending by frequency, with staggered delays and reduced opacity improving readability during transitions. The visualization uses d3.svg.axis, ordinal and linear scales, and SVG rectangles, animating position changes through transition delays while updating the x-axis simultaneously. The technique follows Heer and Robertson’s recommendations for animated transitions.

Mmbostock
82% match
Loading thumbnail…

Horizontal Bars with Slalom Styles

This horizontal bar chart displays the relative frequencies of English letters, sorted in ascending order from Z to A. Built with D3 v4, it uses an SVG rendering approach with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart imports data from a tab-separated file and includes hyperlinked images and text, crediting Slalom and Seemant Kulleen.

EEndNight95
82% match
Loading thumbnail…

Bar Chart Demo

This bar chart displays the frequency of letters in the English language using data from a TSV file. It employs D3 v4 APIs including d3.tsv for parsing, d3.scaleBand and d3.scaleLinear for positioning, d3.axisBottom and d3.axisLeft for axes, and d3.schemeCategory20 for coloring each bar. The chart applies conventional margins and renders as SVG, with the y-axis formatted as percentages and letter labels along the x-axis.

Aadamjanes
82% match
Loading thumbnail…

Bar Chart in D3 v5

This bar chart displays the frequency of each letter in the English alphabet, with letters arranged along the x-axis and their proportional frequencies along the y-axis. It first parses a tab-separated values (TSV) file using `d3.tsv`, converting string frequencies to numbers. The visualization then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Rendered as SVG rectangles with a steelblue fill that turns brown on hover, the chart uses a conventional margin layout and highlights bars without tooltips or animation.

GGolodhros
81% match
Loading thumbnail…

Bar Chart

A bar chart displays the frequency of each letter in the English language, using a TSV data file. The bars are colored steelblue and turn brown on hover, with axes labeled to show the frequency percentage. The visualization is rendered as SVG using D3, and demonstrates the use of `d3.tsv` for data loading, `d3.scale.ordinal` and `d3.scale.linear` for positioning, `d3.svg.axis` for axes, and `d3.max` for domain computation.

SSmith5mr
81% match