Legend to show Temp in °F

New To Observable
1

Hi All, I am new to Observable Plot and excited to be here. I would like my legend to show air temperature in °F instead of °C. I managed to transform the x-axis into °F but I have tried to do the same for the legend. I have tried domain and range within the color channels but its breaking. Any help would be great.

Code snip:

color: {
    legend: true, 
    scheme: "BuRd", 
    label: "Air Temperature",
    domain: d3.extent(data, (d) => d.air_temp), range: [transform: (f) => f *9 / 5 + 32]  
  }

Screen Shot 2024-05-23 at 10.00.28 AM

2

Use the transform option on the color scale:

  color: {
    legend: true, 
    scheme: "BuRd", 
    label: "Air temperature (°F)",
    transform: (f) => f * 9 / 5 + 32
  }

(Note that you probably don’t want a diverging color scheme if you’re using Fahrenheit since 0°F isn’t especially meaningful. Or consider setting the pivot option explicitly rather than using the default pivot of zero.)

If you are specifying the domain manually, you should specify the transformed domain (i.e., the domain in Fahrenheit rather than Celsius). If you don’t need to specify the domain manually, I’d suggest removing the option. But if you do, it might look like this:

  color: {
    legend: true, 
    scheme: "BuRd", 
    label: "Air Temperature",
    domain: d3.extent(data, (d) => d.air_temp * 9 / 5 + 32),
    transform: (f) => f * 9 / 5 + 32
  }
1 Like
3

Thank you so much Mike! And I like the pivot suggestion.

1 Like