D3 Examples - bar chart examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <div style="border: 1px solid">
  <svg height="300" width="500">
​
  </svg> 
  </div>
  <script>
   var data = [100, 250, 175, 200, 120, 225, 125, 150, 300, 600];
    
    var rectWidth = 30;
    var height = 300;
    var max = d3.max(data);
    var domain = [0, max];
    var extent = d3.extent(data);
    
    console.log('extent', extent)
    
    var yScale = d3.scaleLinear()
      .domain([0, max])
      .range([height, 0]);
    
    var colors = ['green', 'yellow', 'red']
    var fillColor = d3.scaleBand([[0, 200, 200, 300, 300, 400], 0, 1, 2])
    
     var yAxis = d3.axisLeft()
      .scale(yScale);
    
    var svg = d3.select('svg');
    var axis = svg.append('g')
      .attr('transform', 'translate(40, 20)')
      .call(yAxis);
    
     axis.selectAll('text')
     .attr('fill', d => d === 250 ? 'red' : 'blue')
    
    var enter = svg.selectAll('rect') // empty selection
      .append('g')
      .data(data)
       .enter().append('rect')
      .attr('x', (d, i, e) => {console.log(i, d, e[i]); return i * rectWidth + i * 5 + 50;})
      .attr('y', d => yScale(d))
      .attr('width', rectWidth)
      .attr('height', d => height - yScale(d))
      .attr('fill', d => {if (d == 250) {return 'red'} else {return 'blue'}})
      .attr('stroke', "#fff");
    
//  //    console.log(d3.selectAll('rect'))
//   //    console.log(document.select)
    console.log("enter:", enter);
  </script>
</body>
​
    