Magnitude as a position

100%

Magnitude as a position

✓ Published0🌍 Public

Last edited Feb 17, 2016

Created on Feb 17, 2016

This example shows a horizontal bar chart where each bar’s position along the x-axis encodes both the sign and magnitude of a numeric value: positive values extend to the right of a central zero line in blue, while negative values extend to the left in brown. The chart reads data from a tab-separated file and renders it using D3.js with SVG, applying a linear x-scale for magnitude, an ordinal y-scale for categorical names, and a top-oriented axis. Bar lengths are computed as the absolute difference between the value’s position and the zero position, and styling is handled via CSS classes. The axis line is drawn explicitly at the zero mark.

AI-generated description

I have taken a simple dataset which contains positive and negative value.This graph plots the positive values from dataset towards right side and negative values towards left side.All the positive values are represented in blue color and negative values are given red colors.

Channel used: Magnitude channel.(magnitude as position)

Marks : Bars.

R image

The discriminability is maintained here as the common scale is used for representing the both type of values and magnitude of bar changes with change in position along the axis

Similar vizzes

Loading thumbnail…

VI4 - Magnitude as Position on a Common Scale

A bar chart displays twenty numeric values as vertical bars positioned along a shared horizontal axis, with each bar’s height encoding the value on a common vertical scale. The bars are rendered in SVG using D3.js, with each rectangle’s x coordinate computed from its index, its y coordinate derived from the height, and its fill color set to a blue shade based on the value. The code uses d3.select and append to create the SVG container and rect elements, and the dataset is hardcoded within the script.

JJamestiberiuseanes

81% match

Loading thumbnail…

Bar Chart with Negative Values

This example shows a horizontal bar chart where the x-axis is centered at zero, with positive values extending to the right in steel blue and negative values extending to the left in dark orange. It uses a quantitative linear scale (d3.scale.linear) for the x-axis and an ordinal scale with rangeRoundBands (d3.scale.ordinal) for the y-axis. The bars are positioned by computing the rectangle’s x-coordinate and width conditionally based on the sign of the value, using Math.min and Math.abs. The data is loaded from an external TSV file, and axis labels are rendered with d3.svg.axis.

RRoxIv

76% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values using horizontal bars, with positive values in steelblue extending right from the zero axis and negative values in darkorange extending left. The chart loads tab-separated data from a local file and renders it as SVG elements. Using D3 v3, the code employs a linear scale to position bars along the x-axis and an ordinal scale with rangeRoundBands for the y-axis. Two conditional logic paths compute the bar’s x-coordinate and width based on the value’s sign, while axes are drawn using d3.svg.axis.

RRoxIv

75% match

Loading thumbnail…

Gist a198389d0150b3f23ce2

This example demonstrates a simple column chart that handles negative values on the y-axis, using categorical data on the x-axis. It shows how bars extend above and below a zero baseline, with positive values in steelblue and negative values in brown. The chart is built with D3 v2, using an ordinal scale for the x-axis and a linear scale for the y-axis. It renders via SVG, with a reusable chart function that configures margins, axes, and bar dimensions based on the data.

IIconicImagery

74% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Mmbostock

73% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values from a small dataset, with positive bars in steelblue extending right from the zero line and negative bars in darkorange extending left. It uses two D3 v3 scales: a linear scale for the x-axis positions and an ordinal scale with rangeRoundBands for vertical band placement. The code computes bar widths using the absolute difference between scaled values and zero, and positions each rectangle’s x-coordinate at the minimum of zero and the data value. An axis is rendered at the zero position, and data comes from a TSV file loaded via d3.tsv.

Aackuser

73% match

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

73% match

Loading thumbnail…

Bar Chart with Negative Values II

This example shows a horizontal bar chart where negative values extend to the left and positive values to the right, with each bar color-coded by sign. The visualization uses `d3.scale.linear` for the x-axis and `d3.scale.ordinal` with `rangeRoundBands` for the categorical y-axis. The code builds the chart in SVG using `d3.svg.axis`, and a custom axis adjustment flips the tick orientation for negative bars by repositioning their tick lines and labels. Data is loaded from a TSV file via `d3.tsv`, and the bars are drawn as `rect` elements with widths computed from the absolute difference between the zero point and each value.

Mmbostock

72% match