d3 Practice

<!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>
  <p> click on this to do something <p>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
   				      
//    let dataArray = [5, 10, 13, 19, 21, 25, 22, 18, 15, 
  //13, 11, 12, 15, 18, 17, 16, 18, 23, 25,22, ],
    let dataArray = [
      							 {key:0, value: 5},
                     {key:1, value: 10},
                     {key:2, value: 13},
                     {key:3, value: 16},
                     {key:4, value: 21},
                     {key:5, value: 25},
                     {key:6, value: 22},
                     {key:7, value: 18},
                     {key:8, value: 15},
                     {key:9, value: 13},
                     {key:10, value: 11},
                     {key:11, value: 12},
                     {key:12, value: 15},
                     {key:13, value: 18},
                     {key:14, value: 17},
                     {key:15, value: 16},
                     {key:16, value: 18},
                     {key:17, value: 23},
                     {key:19, value: 25},
                     {key:19, value: 22},
                     ]
    
    
    
    
    w = 500, h = 200, padding = 30, key = d=> d.key;
    
    
    
    
    d3.select("p")
    	.on("click", function () {
     	const maxValue = 25;
    	let newNumber = Math.floor(Math.random() * maxValue);
      let keyAdder = d3.max(dataArray, d => d.key +1)
      dataArray.push({key: keyAdder, value: newNumber});
      dataArray.shift();
     
     
     	
      // update  scales
      xScale.domain(d3.range(dataArray.length));
      yScale.domain([0,d3.max(dataArray, (d) => d.value)]);
      cScale.domain([0,d3.max(dataArray, (d) => d.value)]);
      
      //seletct
      let bars = canvas.selectAll("rect")
      				.data(dataArray, key);
      //Enter
        
      
      
      bars.enter()
      		.append("rect")
      		.attr("x", w)
      		.attr("y", d => h - yScale(d.value))
      		.attr("width", xScale.bandwidth())
      		.attr("height", d => yScale(d.value))
      		.attr("fill", d => cScale(d.value) )
   
      .merge(bars)
      .transition()
      .duration(500)
      .attr("x", (d,i) => xScale(i))
      .attr("y", d => h - yScale(d.value))
      .attr("width", d => xScale.bandwidth())
			.attr("height", d => yScale(d.value))
      
      ;
     
       bars.exit()
      .transition()
      .duration(500)
      .attr("x", -xScale.bandwidth())
      .remove();
      
      
      
      let numbers = canvas.selectAll("text")
      								.data(dataArray, key)
      numbers.enter()
      			 .append("text")
      			 .text(function(d) { return d.value})
      			 .attr("x", (d,i) => h )
             .attr("y", (d) => h - yScale(d.value) +14)
      			.attr("font-family", "sans-serif")
    				.attr("font-size", "12px")
      .merge(numbers)
      .transition()
      .duration(500)
      			.attr("x", (d,i) => xScale(i) + xScale.bandwidth()/4)
      			.attr("y", (d) => h- yScale(d.value) +14)
 			
      
    			
    
    });
    	
    
    
    
   
    const yScale = d3.scaleLinear()
    								 .domain([0, d3.max(dataArray, (d) => d.value)])
    								 .range([0 ,h -padding]);
    const cScale = d3.scaleLinear()
    								 .domain([0,d3.max(dataArray, (d) => d.value)])
    								 .range(["black","yellow"]);
    const xScale = d3.scaleBand()
                        .domain(d3.range(dataArray.length))
                        .range([0,w])
    										.round(true)
                        .paddingInner(0.05);

const canvas = d3.select("body")
                      .append("svg")
                      .attr("width",w)
                      .attr("height",h);
    
    canvas.selectAll("rect")
      .data(dataArray, key)
      .enter()
    		.append("rect")
    		.attr("x",(d,i) => xScale(i))
        .attr("y",d => h-yScale(d.value))
        .attr("width", xScale.bandwidth())
        .attr("height", d =>  yScale(d.value))
    		.attr("fill",d => cScale(d.value));
    
    canvas.selectAll("text")
    			.data(dataArray, key)
    			.enter()
    			.append("text")
    			.text(function(d) {return d.value})
    			.attr("x", (d,i) => xScale(i) +xScale.bandwidth()/4)
    			.attr("y", d => h- yScale(d.value) +14)
    			.attr("font-family", "sans-serif")
    			.attr("font-size", "12px")
    			
    
  
    										  
  </script>
</body>

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