fresh block

100%

✓ Published0🌍 Public

Last edited Oct 20, 2016

Created on Oct 20, 2016

A bar chart shows the frequency of letters in the English alphabet, sorted by default in descending order. The chart uses D3 v4 and SVG rendering to draw rectangles, with a button to toggle between descending and ascending order. The code loads data from a CSV file using `d3.csv`, scales the bar widths with `d3.scaleLinear`, and re-sorts the dataset on button clicks.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A bar chart displays the frequency of each letter in the English alphabet, with steelblue bars that turn brown on hover. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` to map letters and frequencies, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data comes from a tab-separated `data.tsv` file, and the visualization is drawn as SVG inside a viewBox.

KKacieW

88% match

Loading thumbnail…

fresh block

This example displays the relative frequencies of English letters as a horizontal bar chart, using data from a CSV file. The bars are sorted ascending by frequency and rendered as SVG rectangles with a blue fill, with hover effects changing their color. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisTop and d3.axisLeft for the axes, with the x-axis formatted as percentages.

KKaitoKid

88% match

Loading thumbnail…

fresh block

A vertical bar chart displays the relative frequencies of the first five letters, A through E, using bright green bars. Built with D3 v4, the visualization employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering positions each rectangle using the scales, and the data is hardcoded as an array of letter-frequency objects.

KKacieW

85% match

Loading thumbnail…

fresh block

A horizontal bar chart displays numerical values from a TSV file, with each bar labeled by its value. The chart uses D3.js version 3.5.5 to load the data, scale the bar widths linearly, and append SVG rectangles and text elements. The bars are rendered in an SVG container sized dynamically based on the data length, with heights fixed at 20 pixels minus a 1-pixel gap. Data values are coerced to numbers for scaling.

NNastasi7

82% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

82% match

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

81% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

80% match

Loading thumbnail…

fresh block

A set of vertical bars represents five data values, with one bar highlighted in red and the rest in blue, showing a clear visual contrast for the largest value. The chart uses D3 v4 to bind an array of numbers to SVG rectangles, scaling bar heights linearly from a maximum domain of 2500 down to zero. The code applies the scale to position each rectangle’s top and height, while a fixed bar width and white stroke separate the bars for readability.

44xDMG

80% match