How to draw a vertical area chart?

In fact, as you say, most of examples of area charts (I'd say virtually all of them) use a horizontal area, that is, a version where the baseline is horizontal.

However, it's very easy to create a vertical area chart (that is, with a vertical baseline) using D3. To do so, one has to use the way less known x1 and x0 methods of the area generator.

What happens is that, since almost all examples online are horizontal area charts, you only see x, y1 and y0 as the methods of the area generator. However, the same way x alone sets x0 to the value and x1 to null, y sets y0 to the value and y1 to null.

That being said, you just need to set the vertical baseline with x0. Check this example:

const svg = d3.select("svg");
const data = [0, 80, 20, 210, 130, 270, 30, 110, 130, 0];
const areaGenerator = d3.area()
  .x0(0)
  .x1(d => d)
  .y((_, i) => i * 15)
  .curve(d3.curveMonotoneY)
const area = svg.append("path")
  .attr("d", areaGenerator(data))
  .style("fill", "teal");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

In short, these are the methods you need:

Horizontal area chart:

• x: position in the baseline
• y1: distance from baseline
• y0: baseline

Vertical area chart:

• y: position in the baseline
• x1: distance from baseline
• x0: baseline