DRY Bar Chart

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 11, 2013

A DRY bar chart displays letter frequencies from a TSV dataset using ordinal and linear scales for x and y positioning. The visual encoding is abstracted into composed functions: value accessors, scale mappings, and data-to-display maps, avoiding repetition. Rendered in SVG with D3 v3, it draws steelblue rectangles whose heights reflect frequency percentages, and includes formatted axes with a "Frequency" label. The code separates concerns by defining xValue, xScale, xMap and yValue, yScale, yMap before binding data via `d3.tsv`.

AI-generated description

A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:

The value accessor returns the value (or property) to encode for a given data object.
The scale maps this value to a visual display encoding, such as a pixel position.
The map function represents the composition value ○ scale, mapping from data to display.

Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.

gpl-3.0 Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

TDD Bar Chart

This bar chart displays the frequency of letters in the English language using a TSV dataset. The example demonstrates a test-driven approach to building a reusable, responsive D3.js chart, built upon Mike Bostock's original block and the Data Manager API for loading and parsing data. The chart uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` for display, with bars rendered as SVG rectangles. The code includes a Jasmine test suite that validates chart rendering, structure, and configurable properties like width, height, and margins.

GGolodhros

81% match

Loading thumbnail…

Bar Chart

A bar chart displays the frequency of each letter in the English language, using data parsed from a TSV file. The visualization encodes letters along the x-axis with an ordinal scale and frequencies on the y-axis with a linear scale, formatting tick labels as percentages. Built with D3.js, it loads data via `d3.tsv`, applies margins, and draws axes with `d3.svg.axis`. Purple bars animate their height upward over one second using a `transition` on the `y` and `height` attributes, while hovering changes their fill to brown.

RRoxIv

81% match

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, with letters arranged along the x-axis and their proportional occurrence on the y-axis. It uses D3 v4 with SVG rendering, parsing tab-separated values from a TSV file via `d3.tsv` and `d3.dsv`. The chart applies conventional margins and employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axis` components for tick marks. Hovering over a bar changes its fill from steelblue to brown, as defined in the CSS.

GGolodhros

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

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

80% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the frequency of letters in the English language, using a TSV file as its data source. The chart loads and parses the data with `d3.tsv`, formats percentage labels via `d3.format`, and encodes the x- and y-positions using `d3.scale.ordinal` and `d3.scale.linear`. Axes are rendered with `d3.svg.axis`, while `d3.max` computes the domain. When the page loads, bars animate upward over one second via chained `.transition().duration(1000)`, starting from the bottom of the chart before settling into place.

AAlvaroMoro

80% match