area.html

<!DOCTYPE html>
<html>
  <body>
    <style>
      svg {
        border: 1px solid lightgrey;
      }

    </style>
    <script src="http://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript">
      const maxHeight = 400;
      const maxWidth = 600;
      const barWidth = 20;

      const colorArray = ['#38CCCB', '#0074D9', '#2FCC40', '#FEDC00', '#FF4036', 'lightgrey'];

      function singleArea() {
          const data = [
            {
              date: '2019-01-01',
              value: 1,
            },
            {
              date: '2019-01-02',
              value: 10,
            },
            {
              date: '2019-01-03',
              value: 35,
            },
          ];

        const xScale = d3.scaleTime()
          .domain(d3.extent(data, (d) => new Date(d.date)))
          .range([0, maxWidth]);

        const yScale = d3.scaleLinear()
          .domain(d3.extent(data, (d) => d.value))
          .range([maxHeight, 0])

        const area = d3.area()
          .x((d) => xScale(new Date(d.date)))
          .y1((d) => yScale(d.value))
          .y0((d) => yScale(0))

       const svg = d3.select('body')
         .append('svg')
         .attr('width', maxWidth)
         .attr('height', maxHeight)

        svg.append('g')
          .selectAll('path.area')
          .data([data])
          .enter()
          .append('path')
          .attr('class', 'area')
          .attr('d', area)
          .attr('fill', colorArray[0])
      }

      function stackArea() {
        const stackData = [
          {
            year: 2017,
            quarter: 2,
            samsung: 0.229,
            apple: 0.118,
            huawei: 0.110,
            oppo: 0.08,
            xiaomi: 0.062,
            others: 0.401,
          },
          {
            year: 2017,
            quarter: 3,
            samsung: 0.221,
            apple: 0.124,
            huawei: 0.104,
            oppo: 0.081,
            xiaomi: 0.075,
            others: 0.396,
          },

          {
            year: 2017,
            quarter: 4,
            samsung: 0.189,
            apple: 0.196,
            huawei: 0.107,
            oppo: 0.069,
            xiaomi: 0.071,
            others: 0.368,
          },
          {
            year: 2018,
            quarter: 1,
            samsung: 0.235,
            apple: 0.157,
            huawei: 0.118,
            oppo: 0.074,
            xiaomi: 0.084,
            others: 0.332,
          },
        ]

        const stack = d3.stack()
          .keys(['apple', 'samsung', 'huawei', 'oppo', 'xiaomi', 'others']);

        const series = stack(stackData);

        const stackMin = (serie) => d3.min(serie, (d) => d[0]);
        const stackMax = (serie) => d3.max(serie, (d) => d[1]);
        const yScale = d3.scaleLinear()
          .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
          .range([maxHeight, 0])

      const xAccessor = (d) => `${d.year}-${d.quarter}`;

      const xScale = d3.scalePoint()
        .domain(stackData.map(xAccessor))
        .range([0, maxWidth])

      const area = d3.area()
        .x((d) => xScale(xAccessor(d.data)))
        .y0((d) => yScale(d[0]))
        .y1((d) => yScale(d[1]))

      const svg = d3.select('body')
        .append('svg')
        .attr('width', maxWidth)
        .attr('height', maxHeight)

      svg.append('g')
        .selectAll('path')
        .data(series)
        .enter()
        .append('path')
        .attr('d', area)
        .attr('fill', (d, i) => colorArray[i % colorArray.length])
      }

      singleArea()
      stackArea()

    </script>
  </body>
</html>