Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
KKaitoKid
Last edited Sep 21, 2016
Created on Sep 21, 2016

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/aac65b96e29c4c2f3ab7d477887f1876'>fresh block</a>

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

fresh block

A horizontal bar chart displays the number of cases by resolution type, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Rectangles represent each value, with a custom tooltip showing the category and amount on mouseover. Data loads from a CSV file via d3.csv, and axes are drawn with d3.axisBottom and d3.axisLeft under d3.v4.

GGoomble
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
81% 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
80% match
Loading thumbnail…

fresh block

This example combines a bar chart and a line chart, each rendered in its own SVG element, to visualize two datasets side by side. The bar chart displays the frequency of letters in the English language (loaded from `bardata.tsv`), using steelblue bars that turn brown on hover, with an x-axis for letters and a y-axis for frequency. The line chart shows stock price over time (from `linedata.tsv`), using a steelblue line with round joins and a clean axis without a domain line. Both charts are built with D3 v4, use SVG, and share a minimal, uncluttered aesthetic with axis labels and hover interactions on the bars.

GGerardoFurtado
80% match
Loading thumbnail…

fresh block

This example combines a bar chart and a line chart, each rendered in its own SVG element, to visualize two datasets side by side. The bar chart displays the frequency of letters in the English language (loaded from `bardata.tsv`), using steelblue bars that turn brown on hover, with an x-axis for letters and a y-axis for frequency. The line chart shows stock price over time (from `linedata.tsv`), using a steelblue line with round joins and a clean axis without a domain line. Both charts are built with D3 v4, use SVG, and share a minimal, uncluttered aesthetic with axis labels and hover interactions on the bars.

GGerardoFurtado
80% match
Loading thumbnail…

Alpha frequencies

This example displays the relative frequencies of letters in the English language as horizontal bars, sorted from most to least frequent. It uses a linear x-scale (d3.scaleLinear) to map frequency values to pixel widths, with each bar’s height fixed at 10 pixels and positioned vertically by index. The chart renders as an SVG element appended to the page body, with data loaded from a local CSV file via d3.csv, parsed, and sorted in descending order before drawing. The visualization is built with D3 v4.

KK-Du
79% match