Let's build a bar chart - d3fc version

100%

Let's build a bar chart - d3fc version

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Dec 4, 2016

This example recreates Mike Bostock’s classic bar chart using d3fc, showing letter frequencies from a tab-separated data file. The bars are colored by category, with vowels in indianred and consonants in steelblue, applied via the `decorate` pattern on `fc.seriesSvgBar`. Value labels appear above each bar using a custom `text` element added during decoration. The chart uses `fc.chartCartesian` with `d3.scaleBand` and `d3.scaleLinear`, while `fc.extentLinear` pads the y-domain and formats ticks as percentages. Data is loaded with `d3.tsv` and rendered as SVG.

AI-generated description

A re-implementation of Mike Bostock's classic "Let's Make a Bar Chart" example, using d3fc. This example highlights the power of the decorate pattern, with the bar colour changed on decorate, and value labels added.

mit Licensed

Similar vizzes

Loading thumbnail…

Let's build a bar chart - d3fc canvas version

This example shows a bar chart of letter frequencies in English, coloring vowels in indianred and consonants in steelblue while displaying percentage labels above each bar. It uses d3fc’s `seriesCanvasBar` with `autoBandwidth` to render the bars on a canvas, paired with `chartCartesian` for axes. The chart reads data from a TSV file, scales the y-axis as percentages via `d3.scaleLinear`, and uses `decorate` to draw custom text and fill styles directly on the canvas context.

CColinEberhardt

87% match

Loading thumbnail…

Let's build a bar chart - d3fc version

This example shows the frequency of each letter in the English language as a set of steel-blue bars on a Cartesian chart. It uses the d3fc library to construct a bar series with a point scale on the x-axis and a linear scale on the y-axis, which is formatted as percentages. The chart’s y-domain is computed via `fc.extentLinear` with padding and an explicit zero inclusion. Data is loaded from a tab-separated file using `d3.tsv`, and the chart is rendered as SVG by `fc.chartSvgCartesian`.

CColinEberhardt

85% match

Loading thumbnail…

Bar Chart IIIa

This example shows a simple SVG bar chart of letter frequencies, with steel-blue bars and white value labels. Each bar’s height corresponds to a data point from a tab-separated `data.tsv` file, and the chart is sized to 960 by 500 pixels. The code uses d3.v3’s `d3.scale.linear`, `d3.tsv`, and data joins via `selectAll`, `enter`, and `append` to create `g`, `rect`, and `text` elements, with the scale mapping values to pixel heights.

Mmbostock

81% match

Loading thumbnail…

Bar Chart IIIb

This example displays the relative frequencies of letters in the English language as a set of vertical bars, one per alphabet letter. The chart is generated with D3 version 3, using an ordinal scale with `rangeRoundBands` to position bars and a linear scale to map value to height. Data is loaded from a tab-separated file via `d3.tsv` and rendered as SVG rectangles with white value labels. The design uses a fixed steelblue fill for all bars, creating a simple, unadorned visualization.

Mmbostock

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

79% match

Loading thumbnail…

Bar Chart IIIc

This bar chart displays the relative frequency of each letter in the English alphabet, using data loaded from a TSV file. The visualization uses D3 v3 to construct an SVG with ordinal and linear scales, and renders bars with a steelblue fill. Axes are generated using `d3.svg.axis`, with the x-axis oriented at the bottom and the y-axis on the left. The bar heights and positions are computed from the data values, and the chart includes margins and a rounded band scale for bar spacing.

Mmbostock

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

78% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the letter frequency data for the English language from a `letters.tsv` file. The visualization uses a band scale for the categorical y-axis and a linear scale for the quantitative x-axis, with axes rendered via `axisLeft` and `axisBottom`. The chart's bars are drawn as SVG `<rect>` elements, filled with steelblue. The code loads data using the d3 `tsv` function, and the layout is positioned within an SVG canvas using computed margins and inner dimensions.

Mmatt-hooper

76% match