Adding Key Axis

100%

Adding Key Axis

✓ Published0🌍 Public

Last edited Dec 15, 2016

Created on Dec 13, 2016

Four bar charts display the same categorical dataset with five values, each docking the chart’s axis to a different side: left, right, top, or bottom. The code uses the viz.js `viz.bar()` function to generate the bars and `dock()` to position them. It then adds a key axis using `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, or `d3.axisBottom` with the bar’s keyScale, translating the axis to the zero line via `valueScale()(0)`. The bars are rendered as SVG rectangles.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Add Value axis

Four small multiples of a bar chart demonstrate the effect of docked value axis placement. Each panel uses the same categorical data array (A through D) with positive and negative values, but positions the quantitative axis at left, right, top, or bottom. Rendered as SVG via the viz.js `viz.bar()` API, each chart pairs bars with dashed gridlines from d3.axisTop or d3.axisLeft, sized to span the full plotting area using `tickSize`. This isolates how axis orientation changes visual reading of magnitude and sign.

NNPashaP

84% match

Loading thumbnail…

bar - dock

This example demonstrates a bar chart rendered in four orientations—left, right, top, and bottom—using the SVG-based viz.js library layered on D3 v4. The `viz.bar()` API accepts a simple two-column dataset mapping categories to numeric values, and its `dock('l'|'r'|'t'|'b')` method repositions the axes and bars accordingly. Each chart is placed in a separate SVG `<g>` container via `d3.select().call()`, with a single blue fill applied to all rectangles. The code uses d3-selection for DOM manipulation and D3’s standard SVG coordinate system for output.

NNPashaP

81% match

Loading thumbnail…

Viz - Bar - default

A simple bar chart displays four categorical values, mapping keys to bar heights. The chart is rendered as SVG inside a 960x500 viewport, with bars offset by a translation. The code uses D3 v4 to select the SVG group and calls the `viz.bar()` function from the Viz.js library (v1.3.0), passing the dataset directly. Bars are styled with a steelblue fill via CSS. The data is defined inline as an array of objects with key and value properties.

NNPashaP

78% match

Loading thumbnail…

Viz - Bar - axis

This example displays a basic bar chart with ten randomly generated values, rendering each bar in steelblue within an SVG. The bars are positioned along a bottom axis and a left axis, both generated using D3’s `d3.axisBottom` and `d3.axisLeft` scales. The chart is constructed by calling the `viz.bar()` API from the vizjs library, which handles the bar layout, while the axes are appended manually to the same SVG group. The data consists of key-value pairs produced by `d3.range` and `Math.random`, and the entire visualization is rendered with D3 v4.

NNPashaP

78% match

Loading thumbnail…

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.

NNPashaP

77% match

Loading thumbnail…

Viz - Bar - orient - left

Four data points are drawn as horizontally oriented bars in a simple bar chart, with steel blue bars extending leftward from a baseline. The chart uses an SVG container and the viz.js library’s `viz.bar()` function, configured with `.orient("left")` to set the direction. Data is supplied inline as an array of key–value pairs, and the chart is rendered via D3 v4’s selection and call pattern. The visualization is minimal, showing only the bars without axes or labels, focusing on the orientation and mapping of values to bar lengths.

NNPashaP

77% match

Loading thumbnail…

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.

NNPashaP

75% match

Loading thumbnail…

Viz - Bar - keyScale

This example demonstrates a bar chart with ten randomly generated data points, where the x-axis positions are controlled by a custom scale. The chart renders as an SVG using D3 v4 and the Viz.js library. The `viz.bar()` function creates the bar geometry, while a `d3.scaleBand` key scale maps the data indices to the chart’s width. The result is a simple grid of steel-blue bars, with each bar’s height representing a random value from 0 to 1. The visualization is rendered inside an SVG element with a translated group, and the bar chart is invoked via `d3.select("g").call(bar.keyScale(keyScale))`.

NNPashaP

75% match