scale percent

Author: mbostock

src/axes.js

@@ -102,10 +102,11 @@ function inferLabel(channels = [], scale, axis, key) {
     else if (candidate !== label) return;
   }
   if (candidate !== undefined) {
-    const {invert} = scale;
+    const {percent, invert} = scale;
     // Ignore the implicit label for temporal scales if it’s simply “date”.
     if (scale.type === "temporal" && /^(date|time|year)$/i.test(candidate)) return;
     if (scale.type !== "ordinal" && (key === "x" || key === "y")) {
+      if (percent) candidate = `${candidate} (%)`;
       if (axis.labelAnchor === "center") {
         candidate = `${candidate} →`;
       } else if (key === "x") {

src/facet.js

@@ -60,7 +60,7 @@ class Facet extends Mark {
       }
       const named = Object.create(null);
       for (const [name, channel] of channels) {
-        if (name !== undefined) named[name] = channel.value;
+        if (name !== undefined) Object.defineProperty(named, name, {get: () => channel.value}); // scale transform
         subchannels.push([undefined, channel]);
       }
       marksChannels.push(named);

src/plot.js

@@ -33,10 +33,8 @@ export function plot(options = {}) {
       const {scale} = channel;
       if (scale !== undefined) {
         const scaled = scaleChannels.get(scale);
-        const {transform} = options[scale] || {};
-        if (transform !== undefined) {
-          channel.value = Array.from(channel.value, transform);
-        }
+        const {percent, transform = percent ? x => x * 100 : undefined} = options[scale] || {};
+        if (transform !== undefined) channel.value = Array.from(channel.value, transform);
         if (scaled) scaled.push(channel);
         else scaleChannels.set(scale, [channel]);
       }

src/scales/quantitative.js

@@ -137,6 +137,7 @@ export function ScaleQ(key, scale, channels, {
   clamp,
   zero,
   domain = (registry.get(key) === radius ? inferRadialDomain : inferDomain)(channels),
+  percent,
   round,
   range = registry.get(key) === radius ? inferRadialRange(channels, domain) : undefined,
   scheme,
@@ -167,7 +168,7 @@ export function ScaleQ(key, scale, channels, {
 
   if (range !== undefined) scale.range(range);
   if (clamp) scale.clamp(clamp);
-  return {type: "quantitative", invert, domain, range, scale, inset};
+  return {type: "quantitative", invert, domain, range, scale, inset, percent};
 }
 
 export function ScaleLinear(key, channels, options) {