D3 BAR CHART TUTORIAL (PART 4) Colors

const getAxes = function (svgGroup, scales, GRAPH_HEIGHT, GRAPH_WIDTH) {

  let xAxisCall = d3.axisBottom(scales.x_scale);
  let yAxisCall = d3.axisLeft(scales.y_scale);

  svgGroup.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + GRAPH_HEIGHT + ")")
    .call(xAxisCall)
    .selectAll("text")
      .attr("y", "10")
      .attr("x", "-5")
      .attr("text-anchor", "end")
      .attr("transform", "rotate(-40)");
  
  svgGroup.append("g")
    .attr("class", "y axis")
    .call(yAxisCall)

  return svgGroup;

}

const getRects = function (data, svgGroup, scales, GRAPH_HEIGHT) {

  let rects = svgGroup.selectAll('rect') // SVG Rectangle Element
    .data(data)
    .enter() //D3 Enter Link
    .append('rect')
      .attr('width', scales.x_scale.bandwidth())
      .attr('height', function(d) {
        return GRAPH_HEIGHT - scales.y_scale(d.averageWeight)
      })
      .attr('x', function(d, i) {
        return scales.x_scale(d.dog)
      })
      .attr('y', function(d) {
        return scales.y_scale(d.averageWeight)
      })
      .attr('fill', function(d, i) {
        return d3.scaleSequential
          (d3.interpolateOranges)
          .domain([0, data.length])
          (i)
      })
      .attr('stroke', 'black')
      .attr('fill-opacity', .6)

  return rects

}

const getScales = function(data, GRAPH_WIDTH, GRAPH_HEIGHT) {
  const scales = {
    x_scale: d3
      .scaleBand()
      .domain(data.map(d => d.dog))
      .range([0, GRAPH_WIDTH])
      .paddingInner(0.2)
      .paddingOuter(0.2),
    y_scale: d3
      .scaleLinear()
      .domain([0, d3.max(data, function(d) {
          return d.averageWeight;
        })
      ])
      .range([GRAPH_HEIGHT, 0])
  };

  return scales;
};

const getSVG = function(GRAPH_WIDTH, GRAPH_HEIGHT, MARGIN) {

  let svg = d3
    .select('.bar-chart')
    .append('svg') //Link
      .attr('width', GRAPH_WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
      .attr('height', GRAPH_HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)
      .style('border', '1px solid red')

  let g = svg.append('g')
    .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")")

  return g;
  
}

const getData = function() {
  return [
    { dog: 'Beagle', averageWeight: 24 },
    { dog: 'Bulldog', averageWeight: 45 },
    { dog: 'English Mastiff', averageWeight: 190},
    { dog: 'German Shepherd', averageWeight: 85 },
    { dog: 'Golden Retriever', averageWeight: 70 },
    { dog: 'Great Dane', averageWeight: 145 },
    { dog: 'Rottweiler', averageWeight: 102},
    { dog: 'Samoyed', averageWeight: 50 }
  ];
};

<!DOCTYPE html>
  <head>
    <style>
      .bar-chart { border: 2px solid gray; }
    </style>
  </head>
  <body>
    <div class="bar-chart"></div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="data.js"></script>
    <script src="config/scales.js"></script>
    <script src="config/svg.js"></script>
    <script src="config/axes.js"></script>
    <script src="config/rects.js"></script>
    <script src="main.js"></script>
  </body>
</html>

const MARGIN = { TOP: 20, BOTTOM: 80, LEFT: 30, RIGHT: 30 }

const SVG_WIDTH = 300;
const SVG_HEIGHT = 300;

const GRAPH_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT;
const GRAPH_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM;

let data = getData();

let svgGroup = getSVG(GRAPH_WIDTH, GRAPH_HEIGHT, MARGIN);

let scales = getScales(data, GRAPH_WIDTH, GRAPH_HEIGHT);

let axes = getAxes(svgGroup, scales, GRAPH_HEIGHT, GRAPH_WIDTH);

let rects = getRects(data, svgGroup, scales, GRAPH_HEIGHT);