Simple d3.js bar chart

Base: simple

by Thomas Roca

HTML

<script src="https://d3js.org/d3.v6.min.js"></script>
<body>
    
    <div class="">
      <text id="title" class="title"></text>
        <div class="col-xs-10">
            <div id="chart" class="chart-container">
         
            </div><br>
            <text class="axis">Total Population</text>
             <text class="axis2">Black or African American</text>
        </div>
    </div>
    
</body>

CSS

.chart-container {
    background-color: #e1e1e8;
    width:480px;
    padding: 10px 20px;
    margin-top:20px
}
.title {
  margin-left:25px; 
  margin-top:25px;
  font-size:17px;
  font-family:Calibri;
  font-weight:500;
  color:#333333;
  }
  .axis {
  margin-left:65px; 
  font-family:Calibri;
  font-weight:500;
  color:#333333;
  }
  .axis2 {
  margin-left:100px; 
  font-family:Calibri;
  font-weight:500;
  color:#333333;
  }

JavaScript

$(function() {
  // query the API
  $.ajax({
    url: "https://api.census.gov/data/2018/acs/acs1/spp?get=NAME,S0201_246E&POPGROUP=001&POPGROUP=004&for=metropolitan%20statistical%20area/micropolitan%20statistical%20area:35620",
    complete: function(json) {
      // get the API response
      data = JSON.parse(json.responseText);
      // set some variable to host data:
      value_total = parseFloat(data[1][1]); // Poverty rate for total population
      value_b = parseFloat(data[2][1]); // Poverty rate for Black and African American
      array=[value_total,value_b]
      console.log(array)
      metro = data[1][0]; // name of the metropolitan area
			metro_text= "Poverty Rate in "+metro
      document.getElementById("title").innerHTML = metro_text;
       
 var canvasHeight = 250;
var dataSet = array;
var desc = ["Total population", "Black or African American"]
var heightRatio = d3.max(dataSet) / canvasHeight;
var canvas = d3.select("#chart").append("svg").attr("width", "100%").attr("height", canvasHeight + "px")
var rectWidth = canvas.style("width").replace("px", "") / dataSet.length;
var barPadding = rectWidth / 5;

//Chart
canvas.selectAll('rect').data(dataSet).enter().append('rect');
canvas.selectAll('rect')
  .attr('x', function(d, i) {return i * (rectWidth);})
  .attr('y', function(d) {return canvasHeight - d / heightRatio;})
  .attr("height", function(d) {return d / heightRatio;})
  .attr("width", rectWidth - barPadding)
  .attr("fill", function(d) {return "rgb(255, " + Math.floor(250 - d / d3.max(dataSet) * 100) + ", 81)";});

// Text
canvas.selectAll('text').data(dataSet).enter().append('text');
canvas.selectAll('text')
  .attr('x', function(d, i) {return i * (rectWidth) + barPadding * 2;})
  .attr('y', function(d) {return canvasHeight - d / heightRatio + 15;})
  .style("text-anchor", "middle")
  .attr("font-family", "Calibri")
  .attr("font-size", "14px")
  .attr("font-weight", "500")
  .attr("fill", "white")
  .text(function(d) {return d + "%";});
 ...