day1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
     
    .chart rect {
      fill: #00ead3;
    }
    
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }
  </style>
</head>

<body>
  <svg class = "chart"></svg>
  <script>
   
    var data = [4, 8, 15, 16, 23, 42];
    
    var width = 420,
        barHeight = 20;
    
    var x = d3.scaleLinear()
    					.domain([0, d3.max(data)])
    					.range([0, width]);
    
    var chart = d3.select(".chart")
    							.attr("width", width)
    							.attr("height", barHeight * data.length);
    
    var bar = chart.selectAll("g")
    								.data(data)
    							.enter().append("g")
    								.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
    
    bar.append("rect")
    		.attr("width", function(d) { return x(d); })
    		.attr("height", barHeight - 1);
    
    bar.append("text")
    		.attr("x", function(d) { return x(d) -3; })
    		.attr("y", barHeight/2)
    		.attr("dy", ".35em")
    		.text(function(d) {return d; });

</script>
</body>

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