bar - valuePrimary

bar - valueSecondary

This example demonstrates a grouped bar chart where each categorical bar is further subdivided by a secondary key. The visualization uses the VizJS API built on D3 v4 to render two SVG bar charts from a small dataset, with the default view showing raw values and a custom view appending a percent sign to each bar’s value label. The `viz.bar()` method is configured with `keySecondary` to group data by the third array element, while `valueSecondary` customizes the text formatting for the second chart’s bars.

87% match

bar - Showing primary value labels at start

This example demonstrates a bar chart with primary value labels displayed at the start of each bar, alongside a secondary label position. It uses the D3.js v4 library and the VizJS API, specifically the `viz.bar()` function, to render the chart. The default setup displays both primary and secondary labels, while a custom instance removes the secondary label by returning an empty string from the `valueSecondary` callback. The code manually adjusts the primary label’s vertical position based on bar height (using the `d.hf` flag) to ensure labels appear within the bar. The data is a simple six-row array of categorical and numeric values, including a negative value, rendered as SVG rectangles.

86% match

bar - keyPrimary

Two bar charts compare the same small dataset, grouping values by a primary key. The default chart groups by the first column, while the custom chart uses a `keyPrimary` function to group by the third column instead. Both render as SVG using d3.v4 and the viz.js library, with bars colored blue via CSS. The data is an inline array of arrays containing labels, numeric values, and group identifiers.

86% match

bar - value

This example demonstrates the `viz.bar` API from the vizjs library, which builds bar charts from a small dataset. Two charts are rendered as SVG: the default chart plots each data row’s second value, while a custom chart uses the third value by passing a `value` function. The dataset includes negative numbers, which are visualized as bars extending downward from the baseline. The code relies on D3 v4 for SVG selection and styling, while vizjs handles the bar geometry and layout.

85% match

bar - keySecondary

This example demonstrates a grouped bar chart where each bar’s color and grouping are determined by a secondary key. Two chart variants are rendered side-by-side: the default grouping by a primary key and a custom grouping using a secondary key function. The visualization uses the `viz.bar()` API from the vizjs library, with data supplied as an array of tuples. The SVG-based rendering uses D3 v4 for selection and layout, and the chart’s bars are filled with a default blue color and black strokes.

bar - Removing value labels

This example compares a default bar chart with a custom version that removes value labels. Both charts render the same six data points as SVG rectangles, with the default showing primary and secondary values above each bar while the custom chart suppresses them using empty value functions. The visualization uses D3 v4 for SVG rendering and the viz.js library, invoking `viz.bar().data(data)` to generate the charts within separate `<g>` groups. The custom chart demonstrates how to hide label text by overriding the `valuePrimary` and `valueSecondary` accessors, leaving only colored bars with black outlines.

bar - Custom Example

This example displays a horizontal bar chart with ten labeled categories, each bar’s length representing a value on a fixed 0–100 scale against a gray backdrop with light gridlines. Built with D3 v4 and the viz.js extension, it uses `viz.bar()` to generate the bars and `d3.axisLeft()` to render the value axis, with numeric labels positioned inside the bars via `.primaryvalue` selection.

bar - Basic example

This example shows a basic bar chart where five data points map categorical labels (A through D) to numeric values, with all bars rendered in a uniform blue color. The visualization is generated using the viz.js library’s `viz.bar()` function, which receives the data array directly and is applied to a new SVG group element translated 50 pixels from the top-left. The underlying SVG container is selected via D3, and the chart is drawn using SVG rectangles, styled through a CSS rule that sets the fill color.