How to change display values of a Legend?

Community Help
1

Dear all, I was trying to change the values directly in the legend function, for example let all values divide 100 to get a percentage:

legendPercentage = legend({
color: colorCountry, colorInterpolator,
title: ‘Articles publicated from 1970 - present of total articles filed on WoS’,
tickFormat: “.0f”,
tickSize: 5,
marginTop : 20,
marginBottom : 20,
marginRight : 5,
marginLeft : 5,
tickValue: ???
})

Should I operate in ‘tickValues’?

Thank you very muh for your time!

1 Like
2

You probably want to use tickFormat, whose value can be any specifier for d3.format. To generate percentages, you might do something like so:

pic = legend({
  color: d3.scaleSequential([0, 1], d3.interpolateViridis),
  tickFormat: "0.0%"
})

Alternatively, the value of tickFormat can be a function, which gives you more control. Thus, the same result could be achieved like so:

legend({
  color: d3.scaleSequential([0, 1], d3.interpolateViridis),
  tickFormat: s => `${100 * s}%`
})

In either case, the result looks like:

3

Thank you very much! Then what it I still want to keep 2 effective digits, like 100.00%?

4

Your tickFormat could be "0.2%" or

s => `${d3.format('0.2f')(100 * s)}%`

I updated my notebook to illustrate.

1 Like
5

Thank you very much!