fresh block

100%

✓ Published0🌍 Public

Last edited Apr 22, 2018

Created on Apr 20, 2018

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.

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

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

86% match

Loading thumbnail…

fresh block

Five vertical bars form a simple bar chart, with a single red bar highlighted among blue ones. The chart encodes an array of five numeric values as bar heights, with each bar positioned along the x-axis. The visualization is built with D3.v4 and rendered as SVG, using `d3.selectAll('rect')` to bind data to existing rectangle elements. The code then sets each rectangle’s x, y, width, height, fill, and stroke attributes, where the y-coordinate is calculated as the container height minus the data value.

MMailnickko

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

84% match

Loading thumbnail…

fresh block

A bar chart displays two percentage values (`perc1` and `perc2`) for sixteen letter-labeled categories (A–P) on a light orange background. Hovering over a blue circle recolors all bars blue, while clicking it triggers a staggered elastic transition that swaps each bar's height to its second percentage value. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition.attr` with `d3.easeElastic` and per-bar delays for the animated update.

MMartinanddre

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

84% match

Loading thumbnail…

fresh block

A simple bar chart displays five blue rectangles of varying heights, encoding the array `[100, 250, 175, 200, 120]` as vertical bars. The visualization uses D3 v4 to bind data to SVG `rect` elements, setting their `x`, `y`, `width`, and `height` attributes with data-driven values. Each bar is positioned sequentially along the horizontal axis, with its height proportional to the data value and filled in solid blue with white strokes. The chart demonstrates basic data binding and attribute manipulation in SVG, without axes or scales.

BBenPiggot

83% match