Area chart with dark top stroke and smooth transitions

forked from anonymous's block: fresh block

forked from denisemauldin's block: Area chart with dark top stroke and smooth transitions

forked from anonymous's block: Area chart with dark top stroke and smooth transitions

<!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; }
    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 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));

container
        .select('.x-axis')
        .transition()
        .duration(500)
        .call(d3.axisBottom(xScale));
    }
    
    function generateData(size = 10) {
      return Array(size).fill(0).map(() => Math.random());
    }
    
    window.addEventListener('load', () => {
      document.querySelector('#update')
        .addEventListener('click', () => update());
		});
  </script>
</body>

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