basic bar chart

<!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>
  <svg>
  </svg>
  <script>
    var data = [10, 250, 175, 200, 120];
    var svg = d3.select('svg');
    var rectWidth = 100;
    var height = 500;
    var width = 500;
    var max = d3.max(data);
    console.log(max)
    svg
    	.attr('width', width)
    	.attr('height', height);
    var enter = svg.selectAll('rect')
        .data(data)
    		.enter().append('rect')
        .attr('x', (d, i) => 50 + i * rectWidth)
        .attr('y', d => height - d)
        .attr('width', rectWidth)
        .attr('height', d => d)
        .attr('fill', function(d) {
      									if (d === max) {
                          return 'red';
                        } else {
                          return 'blue';
                        }
                      })
        .attr('stroke', '#fff');
		var extent = d3.extent(data, d => d);
    var yScale = d3.scaleLinear()
				.domain(extent)
		    .range([extent[1], 0]);

var yAxis = d3.axisLeft()
    		  .ticks(5)
    			.scale(yScale);
    console.log('yScale', yScale)
    var axis = d3.select('svg').append('g')
    		.attr('transform', 'translate(50,' + (height - max) + ')')
    		.call(yAxis);
//     axis.ticks(10);
    var text = axis.selectAll('text')
    		.attr('fill', function(d) {
          return d === max ? 'red' : 'blue'
        });
    
  </script>
</body>

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