Automatic choosing of scales (linear, power, logarithmic) for legends

Question

This is more a data-science question than d3.js but I guess other people must have thought about that too.

I have a dataset with daily updating values. The set also contains the historical data of all or several days. Basically like this:

{data: [
    "ItemA" : {
        "24.10.2020" : 123,
        "25.10.2020" : 134,
        "26.10.2020" : 145,
        "27.10.2020" : 156,
        "28.10.2020" : 167      
    },
    "ItemB" : {
        "24.10.2020" : 123,
        "25.10.2020" : 234,
        "26.10.2020" : 456,
        "27.10.2020" : 567,
        "28.10.2020" : 678      
    },
    "ItemC" : {
        "24.10.2020" : 123,
        "25.10.2020" : 136,
        "26.10.2020" : 149,
        "27.10.2020" : 152,
        "26.10.2020" : 165,
        "28.10.2020" : 178      
    },
]}

As you see ItemB is an outlier with values growing much faster than those of the other Items.

Setting up a scale for a Legend to display the growth over time was easy as long as the values grew at almost the same rate. A d3.scaleLinear().domain([0, upperBoundValues]) was fine. While the values grew the user could still differentiate between smaller an higher values.

Since one Item grew faster, the one with slower growth get pushed in one part of the scale. So if I had a color range like d3.interpolateTurbo suddenly most values get displayed as the colors near to black and one always to the red.

Manually I'd switch to a power scale or a log scale. Especially because I'd have to check daily for what happens.

I'd prefer to have a function that tests for such developments and automatically switches the scale if the values. Even better it would be nice to choose a fitting scale (Basically choosing the best fitting exponent of a power scale and/or base for the log scales). I don't need a base10 log scale if my values will never grow to ultra large digits.

Is there any approximation function/algorithm I can implement that makes choosing easier, or that returns a value upon I could choose the scale (Like: 0...1 -> Linear // 1...n -> Log)

user_5015356 · Answer

As an extension of my comment, consider the following, which uses scaleThreshold with the decile values. I've drawn 5 circles, and the first one's value increases much faster than the others. But you'll still see enough difference between them, because of the threshold scale.

const data = d3.range(5).map(i => {
  let values = [1];
  d3.range(50).forEach(() => {
    // Either a multiplier [0.9, 1.2], or (if it's the first one, [1.2, 1.5]
    const multiplier = (i === 0 ? 1.2 : 0.9) + (Math.random() * 0.3);
    values.push(values[values.length - 1] * multiplier);
  });

  return {
    x: 50 + i * 100,
    y: 50,
    r: 40,
    values: values,
  };
});

const allValues = data.map(d => d.values).flat().sort((a, b) => a - b);
const colours = d3.scaleThreshold()
  .domain([0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9].map(i => d3.quantile(allValues, i)))
  .range(d3.schemeSpectral[10]);

const svg = d3.select("svg")
  .attr("width", 500);

const colourbar = svg.append("g");

colourbar
  .selectAll("rect")
  .data(colours.range())
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 50)
  .attr("y", 100)
  .attr("height", 20)
  .attr("width", 50)
  .attr("fill", d => d);

colourbar
  .selectAll("text")
  .data(colours.domain())
  .enter()
  .append("text")
  .attr("x", (d, i) => (i + 1) * 50)
  .attr("y", 135)
  .text(d => d.toFixed(1));

const circles = svg.append("g")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", d => d.r);

const labels = svg
  .append("g")
  .selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .style("fill", "white")
  .attr("dy", 5)
  .attr("x", d => d.x)
  .attr("y", d => d.y);

let counter = -1;

function colour() {
  counter = (counter + 1) % 50;
  labels.text(d => d.values[counter].toFixed(1));
  circles
    .transition()
    .duration(1000)
    .ease(d3.easeLinear)
    .attr("fill", d => colours(d.values[counter]))
    .filter((d, i) => i === 0)
    .on("end", colour);
}

colour();

text {
  text-anchor: middle;
}

Automatic choosing of scales (linear, power, logarithmic) for legends

1 Answers