Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
KKacieW
Last edited May 23, 2018
Created on May 23, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

Bar Chart

This bar chart displays the frequency of each letter in the English alphabet, using steelblue bars that turn brown on hover. The chart is rendered with SVG and loads its data from a TSV file containing letter-frequency pairs. It uses D3’s ordinal scale for the x-axis (letters) and a linear scale for the y-axis (frequencies, formatted as percentages), with axes generated via `d3.svg.axis`. The code leverages `d3.tsv` for data parsing, `d3.max` to set the domain, and D3’s selection and data-join methods to draw the rectangles. Margins follow the conventional layout, with the y-axis labeled "Frequency".

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

Bar Chart: stripped easier

This bar chart displays the frequency of letters in the English language, with each letter represented as a steelblue bar that turns brown on hover. The chart loads data from a TSV file using `d3.tsv`, parses the frequency values, and encodes the x-position with `d3.scale.ordinal` and the y-position with `d3.scale.linear`. Axes are rendered via `d3.svg.axis`, and the domains are computed using `d3.max`. The SVG output uses conventional margins and a 10px sans-serif font for the axis labels.

BBeaupe
82% match