Area chart with dark top stroke and smooth transitions

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://peterbeshai.com/d3-interpolate-path/d3-interpolate-path.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    button {
      font-size: 16px;
      margin: 15px;
      padding: 10px;
    }
    svg {
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <button id="update">Press Me</button>
  <script>
    const margin = {left: 15, top: 15, right: 15, bottom: 40};
    const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

const data = Array(3).fill(0).map(generateData.bind(null, 10));

const xMax = Math.max(...data.reduce((acc, x) => acc.concat([x.length - 1]), []));

const xScale = d3.scaleLinear()
    	.domain([0, xMax])
    	.range([0, width]);
    
    const yScale = d3.scaleLinear()
    	.domain(d3.extent(data.reduce((acc, x) => acc.concat(x), [])))
    	.range([height, 0]);

const container = svg
    	.append('g')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`);

const area = d3.area()
    	.x((d, i) => xScale(i))
    	.y1(d => yScale(d))
    	.y0(yScale(0))
    	.curve(d3.curveCatmullRom);

const color = (i) =>
    	`hsl(${Math.floor(240/data.length) * i}, 80%, 50%)`;

container
  		.append('clipPath')
    	.attr('id', 'rect-clip')
  		.append('rect')
      .attr('x', 2)
      .attr('y', -10)
      .attr('width', width - 4)
    	.attr('height', height + 8);

container
    	.selectAll('path')
    	.data(data, (d, i) => i)
      .enter()
      .append('path')
    	.attr('clip-path', 'url(#rect-clip)')
      .attr('d', area)
    	.attr('fill', (d, i) => color(i))
    	.attr('fill-opacity', 0.3)
    	.attr('stroke', (d, i) => color(i))
    	.attr('stroke-width', 2);

const xAxis = d3.axisBottom(xScale);
    
    container
      .append('g')
    	.attr('class', 'x-axis')
    	.attr('transform', `translate(0, ${height})`)
    	.call(xAxis);

function update() {
      const x = Math.floor(Math.random() * 20) + 2;
      data.forEach((d, i) => data[i] = generateData(x));

const y = data.reduce((acc, x) => acc.concat(x), []);

xScale.domain([0, x - 1]);
      yScale.domain(d3.extent(y));

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

https://peterbeshai.com/d3-interpolate-path/d3-interpolate-path.js