Different background color for pos / neg

[Hvass-Labs]

Is it possible to use different background colors for positive and negative regions?

This probably violates all kinds of "International Plotting Treaties & Conventions" but I like it because it makes it very easy to see which data is pos / neg.

The way I do this in Matplotlib for Python, is that I first add all the objects of the plot, then I ask for the min/max axis values, and if the y-axis contains positive values then I call a function called fill_between with the relevant min/max axis values and the color green, and likewise for negative values and the color red. I give these a low z-order to push them into the background even though they were added last to the plot.

Furthermore, the example below draws something called a "boxen-plot" or "letter-value plot" which shows more details than a box-plot, but less details than a violin-plot. I like it and you don't seem to have it, so you may consider adding that in the future. This is made using Seaborn which is an extension for Matplotlib [Ref 1] [Ref 2]

Thanks!

[mbostock]

One way to do this would be to add rect marks for the positive and negative regions. The rect mark would be defined on y (y1 and y2) but not on x and hence spans the horizontal extent of the chart. The challenge is that there’s no way currently to specify a one-sided interval with the rect mark, so you have to specify the extrema yourself — though you can compute them from the data if you want.

Plot.plot({
  y: {
    grid: true,
    tickFormat: "+f",
    label: "↑ Surface temperature anomaly (°F)"
  },
  marks: [
    Plot.rectY({length: 1}, {y1: 0, y2: 1.4, fill: "red", fillOpacity: 0.3}),
    Plot.rectY({length: 1}, {y1: 0, y2: -1.4, fill: "blue", fillOpacity: 0.2}),
    Plot.ruleY([0]),
    Plot.dot(gistemp, {x: "Date", y: "Anomaly"}),
  ]
})

One way to compute the extrema from the data is to use the group transform. Here groupZ is used because you only want one group.

Plot.plot({
  y: {
    grid: true,
    tickFormat: "+f",
    label: "↑ Surface temperature anomaly (°F)"
  },
  marks: [
    Plot.rectY(gistemp, Plot.groupZ({y2: "min"}, {y: "Anomaly", y1: 0, fill: "blue", fillOpacity: 0.2})),
    Plot.rectY(gistemp, Plot.groupZ({y2: "max"}, {y: "Anomaly", y1: 0, fill: "red", fillOpacity: 0.2})),
    Plot.ruleY([0]),
    Plot.dot(gistemp, {x: "Date", y: "Anomaly"}),
  ]
})

Lastly, another option would be to write a custom mark.

Plot.plot({
  y: {
    grid: true,
    tickFormat: "+f",
    label: "↑ Surface temperature anomaly (°F)"
  },
  marks: [
    (index, scales, values, dimensions) => {
      return svg`<g fill-opacity="0.2">
  <rect x="0" y="0" fill="red" height=${scales.y(0) - 0} width=${dimensions.width}></rect>
  <rect x="0" y=${scales.y(0)} fill="blue" height=${dimensions.height - scales.y(0)} width=${dimensions.width}></rect>
</g>`;
    },
    Plot.ruleY([0]),
    Plot.dot(gistemp, {x: "Date", y: "Anomaly"}),
  ]
})

[Hvass-Labs]

Thanks very much for that detailed answer!

Have I understood correctly that the last solution manually creates the one-sided intervals that are currently not supported?

Unfortunately I cannot get that working in a normal web-app as I get the error:

Uncaught ReferenceError: svg is not defined

I wonder if svg is some "syntactic sugar" you have in your own Notebook system. I tried different things but I'm not really a Java-script programmer, so I couldn't get it working.

How do I get this working in a normal web-app and not in your Notebook system?

I could get your first method working by manually extracting min/max values from my data. But then I had problems with the inset that I had to hack a little, otherwise I would get white bars on top and bottom of the plot.

So I think your last solution would be the most easy and "general" if I can get it working in a normal web-app?

Thanks again!

[Hvass-Labs]

I just tried solution 1 with a stacked areaY mark, which doesn't work properly because the data is summed on the y-axis. So it would be great if I could get the one-sided intervals working for a more general solution.

[Fil]

svg is shorthand for htl.svg, where htl can be loaded from https://github.com/observablehq/htl

[Hvass-Labs]

(It took me quite a while, but I finally figured out how to import the htl package in my own web-page and Java-script. I wrote the solution in that package's GitHub repo.)

I now see that your last solution actually paints the background of the entire canvas (which I hadn't noticed before), and it also paints on top of the axis tick-numbers because those are below in the z-plane, which is a problem with stronger / solid colors. It's not an entirely bad solution, but I would prefer if the background was confined within the main plot frame, while not having to specify the exact data-range.

I have hacked together a Frankenstein solution based on your first suggestion. I also have to manually compute the "inset" to avoid white bars on top and bottom. And it doesn't work properly with stacked areaY, and when using windowY to smoothen the data. It's a bit of a mess, but it will do for now.

I wonder if the best solution would be if you make a special "background" mark that could do this sort of thing? I suggest leaving this issue open as a feature request.

Thanks!

[Fil]

paints on top of the axis tick-numbers

to fix this, you can use explicit Plot.axisX and Plot.axisY marks, and put them after the custom mark in the marks option.