JSFiddle - React, Tailwind, and code Playground

HTML

<svg width=200 height=200></svg>

JavaScript

var horizontalNotVertical = [true, false];
var colors = ['#00ADEE', '#33A522']

var horizontalData = [[0, 10], [50, 100], [100, 50], [150, 110], [200, 140]];
var verticalData = [[110, 0], [100, 50], [50, 100], [110, 150], [140, 200]];
var myData = [horizontalData, verticalData];

var xScale = d3.scaleLinear().range([0, 200]).domain([0, 200]);
var yScale = d3.scaleLinear().range([0, 200]).domain([0, 200]);

var horizontalArea = d3.area().x(d => xScale(d[0])).y0(200).y1(d => yScale(d[1]));
var verticalArea = d3.area().x0(d => xScale(d[0])).x1(200).y(d => yScale(d[1]));

d3.select('svg').selectAll('path')
	.data(myData).enter()
  .append('path')
  .style('fill', (d, i) => colors[i]).style('opacity', '0.75')
  //.attr('d', horizontalArea) // change this to 'verticalArea' to see green area rendered properly
  .attr('d', (d, i) => (horizontalNotVertical[i]) ? horizontalArea(d) : verticalArea(d));
  /* .attr('d', function(d, i){
  	if (horizontalNotVertical[i]) {
    	return horizontalArea;
    } else {
    	return verticalArea;
    }
  }) */