bar chart with D3.js

HTML

<html>
	<head>
		<title>Heatmap d3</title>
		<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
		<style>
			
		</style>
	</head>
	<body>



	<script>

		var data = [
{"date":"2023-07-20","value":"19"},
{"date":"2023-07-21","value":"18"},
{"date":"2023-07-22","value":"25"},
{"date":"2023-07-23","value":"28"},
{"date":"2023-07-24","value":"18"},
{"date":"2023-07-25","value":"25"},
{"date":"2023-07-26","value":"28"}
			]
      
     

			

var width = 900,
    height = 405,
    cellSize = 25; // cell size
    week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
	
	var day = d3.timeFormat("%w"),
	    week = d3.timeFormat("%U"),
		format = d3.timeFormat("%Y%m%d");
		parseDate = d3.timeFormat("%Y%m%d").parse;
			
	var color = d3.scaleLinear().range(["white", '#002b53'])
	    .domain([0, 1])
	    
	var svg = d3.select("body").append("svg")
	    .attr("height", height)
      .attr("width", width)
	    .attr("class", "calendar")
	  .append("g")
	    .attr("transform", "translate(10, 10)");

var leg = svg.append("g")
              .attr("class", "leg")
              .attr("transform", "translate(10, 10)");
              
var chart = svg.append("g")
              .attr("class", "chart")
              .attr("transform", "translate(-500, 30)");
//
const d = new Date();
let name = month[d.getMonth()];
console.log("name", name);
  

let pickedYear = 2023;
let pickedMonth = 7;//July
  
const daysInMonth = (year, month) => new Date(year, month, 0).getDate();

console.log("daysInMonth", daysInMonth(pickedYear, pickedMonth));

let dz = 1;
console.log("xx", d3.timeDays(new Date(pickedYear+"-"+pickedMonth+"-1"), new Date(pickedYear+"-"+pickedMonth+"-31")) )

console.log("ccccc",  new Date(pickedYear+"-"+pickedMonth+"-"+daysInMonth)  )

//


var rect = chart.selectAll(".day")
    .data(function(d) { return d3.timeDays(new Date("2023-07-1"), new Date("2023-07-31")); })
 ...

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

div#layout {
  text-align: center;
}

div#container {
  width: 1000px;
  height: 600px;
  margin: auto;
  background-color: #2F4A6D;
}

svg {
  width: 100%;
  height: 100%;
}

.bar {
  fill: #80cbc4;
}

text {
  font-size: 12px;
  fill: #333333;
}

path {
  stroke: gray;
}

line {
  stroke: gray;
}

line#limit {
  stroke: #FED966;
  stroke-width: 3;
  stroke-dasharray: 3 6;
}

.grid path {
  stroke-width: 0;
}

.grid .tick line {
  stroke: #9FAAAE;
  stroke-opacity: 0.3;
}

text.divergence {
  font-size: 14px;
  fill: #2F4A6D;
}

text.value {
  font-size: 14px;
}

text.title {
  font-size: 22px;
  font-weight: 600;
}

text.label {
  font-size: 14px;
  font-weight: 400;
}

text.source {
  font-size: 10px;
}