Gist 19433185a6aa63896a0e

100%

Gist 19433185a6aa63896a0e

✓ Published0🌍 Public

Last edited Nov 13, 2014

Created on Nov 13, 2014

This visualization presents a horizontal bar chart that ranks items by value, with bars extending from a central baseline. The chart is built using the D3.js library, specifically leveraging `d3.select` and `d3.scale` for data binding and scaling. The bar lengths are computed from a simple array of numeric values, and the chart includes value labels positioned at the end of each bar. The rendering relies on SVG primitives created through D3’s DOM manipulation, with a clean, minimal aesthetic that focuses on the rank order of the data points.

AI-generated description

Similar vizzes

Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock

79% match

Loading thumbnail…

Gist 95392bf4a37344793786

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

HHoffmannP

76% match

Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8

75% match

Loading thumbnail…

Bar Chart I

A basic bar chart visualizes a small fixed dataset of six numeric values, with each bar’s length and label representing its value. The chart uses green horizontal bars with white text, positioned through inline styles. This example, from the “Let’s Make a Bar Chart” tutorial, is built with D3 v3 and an HTML `<div>` per bar instead of SVG. The code employs the `d3.scale.linear` API to map data values to pixel widths, and uses D3’s selection and data-joining methods to create the bars.

MMTClass

75% match

Loading thumbnail…

Bar Chart IIb

A linear bar chart displays six numbers from a static array. Each bar's length is proportional to its value, with the value label placed at the bar's end. The chart uses D3 v3's `d3.scale.linear` to map data values to pixel widths on an SVG canvas. The code builds the visualization by selecting the SVG element, appending `g` groups for each data point, and adding `rect` and `text` elements with attributes derived from the scale.

Mmbostock

75% match

Loading thumbnail…

CS 725 Information Visualization - VI2

This example demonstrates a bar chart for a dataset of 20 numeric values, with each bar’s height and color intensity proportional to its value. The chart is rendered as an SVG using D3.js (version 3.5.5), where `d3.select` appends an SVG element, and `selectAll("rect")` with `data()` and `enter()` creates the bars. Text labels are positioned at each bar’s top using an inverted coordinate system, where `y` is calculated from the height. The source code is a standalone HTML file, and the dataset is hardcoded as an array. The rendering uses basic D3 APIs such as `attr` for styling and `text-anchor` for label alignment.

CChristosT

74% match

Loading thumbnail…

Sortable Bar Chart

A bar chart displays 24 random values from a normal distribution, with bars sorted and animated into ascending or original order every five seconds. The reordering uses d3.transition with staggered delays per bar to make individual movements traceable, referencing Heer and Robertson’s animated transitions. Built with d3.js v3, the chart uses d3.scale.ordinal with rangeRoundBands for vertical positioning, while bar rectangles and text labels are rendered as SVG elements. The x-axis is drawn via d3.svg.axis, and sorting is triggered by a setInterval toggling the index order.

Mmbostock

74% match

Loading thumbnail…

Class 1

This example shows a simple horizontal bar chart built with D3.js v4. The chart maps an array of nine numeric values to bar widths using a linear scale, with each bar rendered as a green div element and labeled with its corresponding value. The code uses `d3.scaleLinear` to create the scale and `d3.select` to target the chart container, then appends divs via `enter()` and sets their width style based on the scaled data. The data is hard-coded in the script, and the chart is styled with inline CSS.

MMTClass

74% match