All examples By author By category About


Percentage Change

Assuming you bought AAPL stock at its closing price on January 2, 2008, how would your investment fare over the next four and a half years? (Quite well, for the most part…)

Rather than simply plot the absolute price on a linear scale, which would exaggerate gains and understate losses, instead compute the relative price, i.e., the current price divided by the purchase price. Then, use a log scale to accurately show proportional gains and losses: a +100% gain (2×) is as good as a -50% loss is bad (0.5×). As long as the current value never reaches absolute zero, meaning as long as the stock is not completely worthless, the scale domain never crosses zero.

To show percentage change (+20%, -20%), simply subtract 1 from the relative price:

var formatPercent = d3.format("+.0%");

// Formats a relative price (e.g., 2) as percentage change (e.g., +100%).
function formatChange(x) {
  return formatPercent(x - 1);

Although the log scale ticks are adequate in relative price space, a second linear scale can also be used to generate uniformly-spaced ticks.

A nice related technique is to add color to show positive or negative change.