missing portfolio emissions intensity

[samhuestis]

No portfolio emissions intensity for Aviation/Listed Equity or Automotive/Listed Equity. Both have values of 100 micro tons of CO2 per [X] as Scenario target, with no change year to year.

[cjyetman]

The line (and dots) for portfolio values are there, it's just obscured because the scenario's line and dots are directly on top of it. @jdhoffa I could probably swap the order of them so the portfolio line is on top pretty easy, but then you won't see the scenario line. Something more sophisticated, like adding jitter or avoidance, would be much more complicated. Could also maybe make one of the lines and dots thicker so that you can still see it a bit even when it's underneath the other.

[cjyetman]

@jdhoffa do you want me to look into this?

[jdhoffa]

Maybe! let me just talk to myself a bit first

[jdhoffa]

The problem identified is that the "portfolio" emission line displayed is identical to the "benchmark" line. They are displayed overtop each other, and thus one (or other other) would always appear invisible:

[jdhoffa]

Putting portfolio on top seems to be just kicking the can (folks will ask why there is no scenario line).

I think the jitter solution is probably preferable.

Some resources here:
https://stackoverflow.com/questions/17093922/how-to-add-jitter-to-a-d3-plot
https://observablehq.com/@john-guerra/overlapping-scatterplots

@cjyetman could you give it a shot, and we see what it looks like? Doesn't need be perfect (might still decide not to go this way if it looks wonky).

[cjyetman]

Another (slightly easier and maybe better looking option than jitter) option would be to use "dodging", where one of the lines is slightly bumped on the y-axis but always in the same direction so you don't end up with wavy lines.

@jdhoffa can you try going to the test site, go to the sector-level tab, click go, switch to Aviation, then run the following code in the console and see if you like that result..

document.querySelector(".emission-intensity-plot path#Aviation_scen").style.transform = 'translateY(4px)';

let elements = document.querySelectorAll('.emission-intensity-plot .dot');

if (elements != undefined) {
  for (let i = 0; i < elements.length; i++) {
    if (i % 2) {
      elements[i].style.transform = 'translateY(4px)';
    }
  }
}

[cjyetman]

@jdhoffa and I agreed that dodging is the best way to go, using 8px y-axis dodge on the line and 8px x-axis and y-axis dodge on the dots