how to create a density graph that has different fill colours below and above 0

Community Help
1

Basically trying to replicate something like this:

image

I would the to use something like this to create a plot that has different colours above and below 0:

                        Plot.areaY(data, {
                            x: "month", 
                        y: "value",
                        fill: d => d["value"] > 0 ? "green" : "red", // Use a function for fill
                        fillOpacity: 0.1 // Sets the fill opacity of the area under the line plot
            }),
1 Like
2

You might need to break your data up into portions where the it’s above and below the horizontal axis. Here’s an example:

1 Like
3

I am not sure I fully get it. When I try this with my quarterly (test) data, the results are still not nearly as expected, see for example my fork:

there is an odd shift in the data between the line the area charts

4

nvm , got it

5

Note that a “native” difference mark is in the works (pull request difference mark by mbostock · Pull Request #1896 · observablehq/plot · GitHub, if you want to try it).

1 Like