mood pos neg

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .leaf {
      isolation: isolate;
    }
    
    .elements {
      mix-blend-mode: multiply;
    }
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 500;
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

// data array to work with
    let datum = d3.range(2);
    
    // the below  area
    let belowArea = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);
   
   // the above area
   let aboveArea = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return -d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);

rgGrad.append("stop")
      .attr("offset",  "50%")
      .attr("stop-color", "#eee");
    
    let g = svg.append('g')
    	.attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');
  
    // 
    g.selectAll('leaf')
    	.data(datum)
    	.enter()
    	.append('g')
    	.classed('leaf', true)
      .attr('transform', function (d, i) { return 'rotate(' + (180 * i / datum.length) + ') rotate(-135) '; });
    
    d3.selectAll('.leaf')
    	.append('path')
    	.datum(data)
    	.attr('d', belowArea)
    	.classed('elements', true)
    	.style('fill', '#eee');
    
    // data viz
    
     d3.selectAll('.leaf')
    	.append('path')
    	.datum(dataViz)
    	.attr('d', belowArea)
    	.classed('elements', true)
    	.style('fill', 'blue');
    /*
    d3.selectAll('.leaf')
    	.append('path')
    	.datum(dataViz)
    	.attr('d', aboveArea)
    .classed('elements', true)
    	.style('fill', 'blue')
    */
    
    g.append('circle')
    	//.attr('cx',)
    	//.attr('cy',)
    	.style('fill', '#555')
    	.classed('elements', true)
    	.attr('r', 5)
    
    g.append('path')
    	.attr('d', 'M0,6 L0,15 L5,30')
    	.style('stroke', '#555')
    	.style('fill', 'none')
    	.style('stroke-width', 1.5)
    	.style('stroke-linecap', 'round')
    	.classed('elements', true)
    .curve(d3.curveBasis);

</script>
</body>

https://d3js.org/d3.v4.min.js