flower bar chart

<!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; }
  </style>
</head>

<body>
  
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    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(7);
    
    // 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);

let dataViz = [{x:0, y:0}, {x:30, y:30*30/100}, {x:120*30/100, y:0}, {x:30, y:-30}, {x:0, y:0} ];
    // data viz 
     d3.selectAll('.leaf')
    	.append('path')
    	.datum(dataViz)
    	.attr('d', belowArea)
    	.classed('elements', true)
    	.style('fill', 'blue');

</script>
</body>

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