I have a lineal graph in HTML, and want it to be in a logarithmic scale. How do I achieve this?

Current code:

<!DOCTYPE html>
<html>

<head>
<style>
  body {
    background-color: #4a4c63;
    font-family: Arial;
  }

  .figure {
    margin-left: 45px;
    display: inline-block;
  }

  .title {
    font-size: 26px;
    color: white;
    margin-bottom: 10px;
    text-align: center;
  }

  .y-axis-label {
    transform: translateX(-50%) rotate(-90deg);
    position: absolute;
    text-align: center;
    padding-right: 15px;
    padding-left: 10px;
    color: white;
    font-size: 20px;
    top: 50%;
    left: -25px;
  }

  svg {
    width: 640px;
    height: 373px;
    background-color: #ece6ea;

    /* Subtly draw attention to the figure with a border */
    border: 4px solid #f947ae;
    border-radius: 24px;
  }

  svg .axis {
    stroke: #000;
    stroke-width: 1px;
  }

  svg .tick {
    stroke: #000;
    stroke-width: 1px;
  }

  svg .tick-label {
    font-size: 14px;
  }
</style>
</head>

<body>

<div class="figure">
  <div class="title">KEY TRENDS AND FIGURES <br> IN MACHINE LEARNING</div>
  <div style="position: relative">
    <span class="y-axis-label">Training compute (FLOP)</span>
    <svg id="chart"></svg>
  </div>
</div>

<script>
  // Crappy code ahead

  function drawFigure() {
    let svg = document.getElementById('chart');

    let dataAreaBounds = {
      'x0': 70,
      'y0': 20,
      'x1': 615,
      'y1': 345,
    };

    let xScale = new Scale([2014, 2024], [dataAreaBounds.x0, dataAreaBounds.x1]);
    let yScale = new Scale([1, 2e25], [dataAreaBounds.y1, dataAreaBounds.y0]); // TODO: convert to log scale

    drawXAxis(svg, dataAreaBounds, xScale);
    drawYAxis(svg, dataAreaBounds, yScale);

    // Line of best fit
    // Fitted by David
    let linePoints = [];
    for (let x = 2014; x <= 2023.5; x += 0.01) {
      linePoints.push({x: x, y: 4e19 * 10**(0.6 * (x - 2014))});
    }
    drawLine(svg, linePoints, xScale, yScale);

    // Plot some random points for visual flair
    let scatterPoints = [
      {x: 2014.6513328592291, y: 6.522445718826063},
      {x: 2014.5004919770445, y: 28.54161083691497},
      {x: 2014.5017707561346, y: 356.90171758037377},
      {x: 2014.589177913871,  y: 2826.562425016834},
      {x: 2014.7918112212005, y: 4351.922830978623},
      {x: 2014.8699072253535, y: 10.766908479473404},
      {x: 2017.2039539705256, y: 11.080197214851651},
      {x: 2017.0718734376444, y: 68.97719500516978},
      {x: 2017.0731524940668, y: 862.5387823824755},
      {x: 2017.160559443804,  y: 6831.030422150273},
      {x: 2017.3631927511335, y: 10517.403343855975},
      {x: 2017.5345317466165, y: 17.13725136492356},
      {x: 2017.4195993612288, y: 242.9046774333274},
      {x: 2017.5986660817082, y: 101.5812129127676},
      {x: 2015.2871159061615, y: 17.42330939154803},
      {x: 2015.2447848793565, y: 143.53355538680938},
      {x: 2015.2659764619923, y: 1395.9733917992628},
      {x: 2015.4467697145092, y: 6500.951869303485},
      {x: 2015.6839478758716, y: 4064.686697959286},
      {x: 2015.7278065874775, y: 493.70863468584554},
      {x: 2015.7602009377672, y: 71.87618581674568},
      {x: 2015.677664774662,  y: 14.251249108908684},
      {x: 2015.4886129831868, y: 11.214784296707869},
      {x: 2018.9655637562169, y: 66.63590587475387},
      {x: 2018.9232324520797, y: 548.9478647072525},
      {x: 2018.9444241040485, y: 5338.900828345252},
      {x: 2019.1252177032309, y: 24862.893178302238},
      {x: 2019.3623964192577, y: 15545.406536639537},
      {x: 2019.4062544375329, y: 1888.19400256063},
      {x: 2021.1713744870801, y: 29041.70395982831},
      {x: 2020.870351109516,  y: 29041.70395982831},
      {x: 2020.7608866764676, y: 8711.749084043708},
      {x: 2020.7335216082015, y: 1530.3170380118645},
      {x: 2020.8977168711126, y: 120.46076715704281},
      {x: 2021.1303258446849, y: 92.1811596521025},
      {x: 2021.2671553459993, y: 14.164949214201702},
      {x: 2021.1303258446849, y: 3.717044282516151},
      {x: 2020.8566675353868, y: 1.9040841924455403},
      {x: 2020.6514243234114, y: 4.249124573767502},
      {x: 2019.434267076646,  y: 208.18755101605092},
      {x: 2019.2010347988003, y: 137.7042528950963},
      {x: 2019.4473786529713, y: 32.871438831662445},
      {x: 2019.4374009312803, y: 5.166067521864775},
      {x: 2019.9985148302355, y: 23338.816801559216},
      {x: 2020.042372848511,  y: 2834.8061408171834},
      {x: 2019.7413751241816, y: 22447.361446939456},
      {x: 2020.309350916791,  y: 25340.63579762137},
      {x: 2020.070385487624,  y: 312.5573679360577},
      {x: 2020.0834970639492, y: 49.35107791401531},
      {x: 2020.073520035589,  y: 7.755951109149252},
      {x: 2018.9739918838573, y: 6.137689006065227},
      {x: 2017.9805433248366, y: 66.89751619827624},
      {x: 2017.9382120206997, y: 551.1030155466955},
      {x: 2017.9594036033352, y: 5359.901141571594},
      {x: 2018.140196855852,  y: 24960.690189568184},
      {x: 2018.3773750172145, y: 15606.543076328118},
      {x: 2018.4212340061526, y: 1895.6198390805791},
      {x: 2018.2199013871625, y: 507.117658088768},
      {x: 2018.3680667756198, y: 83.10383311818435},
      {x: 2018.5245728627199, y: 15.975305341057217},
      {x: 2017.952522781754,  y: 6.834180746628639},
      {x: 2016.1348910458237, y: 62.979427628338634},
      {x: 2016.1550304991656, y: 582.5617780646912},
      {x: 2016.1495520082,    y: 5657.997276846421},
      {x: 2016.414606846531,  y: 487.83661543618985},
      {x: 2016.6998652019577, y: 911.4910375141101},
      {x: 2016.7026576605692, y: 13.275527977085018},
      {x: 2016.3069282946258, y: 2133.154823480869},
      {x: 2016.7073770931158, y: 124.65941494960086},
      {x: 2016.5346591322607, y: 77.21333980683943},
      {x: 2016.7070877662268, y: 5045.62392127498},
      {x: 2016.1621842850323, y: 8.503394534564555},
      {x: 2017.3759123182972, y: 8.20724982232243},
      {x: 2021.8144712712647, y: 21.160364864629127},
      {x: 2021.9239350109824, y: 2286.057703311427},
      {x: 2021.93761719845,   y: 17006.532297699443},
      {x: 2021.9649829600467, y: 84690.96884160757},
      {x: 2021.9786665341758, y: 188994.40400348319},
      {x: 2022.0060322957725, y: 630036.0303498339},
      {x: 2022.0197151765708, y: 1607233.438225285},
      {x: 2022.0197151765708, y: 4686989.345604965},
      {x: 2022.0197151765708, y: 11956587.451004488},
      {x: 2022.0197151765708, y: 30501473.300898027},
      {x: 2022.0197151765708, y: 59542747.69213289},
      {x: 2022.0197151765708, y: 88947443.27985303},
      {x: 2022.0197151765708, y: 101680402.97089978},
      {x: 2022.0197151765708, y: 101680402.97089978},
      {x: 2021.9239350109824, y: 20418031.285764568},
      {x: 2021.8555206069905, y: 2744639.3474106374},
      {x: 2021.800789083797,  y: 368942.81801370444},
      {x: 2021.7323739864744, y: 22223.831271251252},
      {x: 2021.7050082248777, y: 3903.8535247797586},
      {x: 2021.6913253440794, y: 1171.0567890987963},
      {x: 2021.6913253440794, y: 524.7682899711657},
      {x: 2021.6913253440794, y: 268.81654607418335},
      {x: 2021.6913253440794, y: 179.95078883590534},
      {x: 2021.6913253440794, y: 137.7042528950963},
      {x: 2021.7186904123455, y: 80.63812827609142},
      {x: 2021.7597397480713, y: 53.98029487388338},
      {x: 2021.9102514368533, y: 36.13516703531101},
      {x: 2022.0333980573694, y: 27.652003886002543},
      {x: 2022.1154960354902, y: 24.189387992794604},
      {x: 2022.1839097461514, y: 24.189387992794604},
      {x: 2022.27968991174,   y: 41.30777428430223},
      {x: 2022.4986166978445, y: 179.95078883590534},
      {x: 2022.6764955348847, y: 783.921851127075},
      {x: 2022.8133236495376, y: 2613.2978856027025},
      {x: 2022.909104508457,  y: 6666.566190092435},
      {x: 2023.0048846740456, y: 14876.954663285154},
      {x: 2023.1143491070939, y: 37951.383479635304},
      {x: 2023.22381146015,   y: 74085.8678177873},
      {x: 2023.3059087449403, y: 126515.59245824469},
      {x: 2023.374323148932,  y: 165328.30625057936},
      {x: 2023.4290546721256, y: 216048.0642471517},
      {x: 2023.4837875819803, y: 282327.9253616156},
      {x: 2023.4974697694481, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.5111526502465, y: 322741.84031484334},
      {x: 2023.4974697694481, y: 482127.85491758876},
      {x: 2023.3880067230612, y: 1229916.9771181485},
      {x: 2023.1143491070939, y: 7001625.180988207},
      {x: 2022.9638360316503, y: 17861261.804262567},
      {x: 2022.8543729852634, y: 34867615.77990286},
      {x: 2022.731227058078,  y: 68066012.04237115},
      {x: 2022.5807146759653, y: 116235553.33103722},
      {x: 2022.45756874878,   y: 151894535.5661333},
      {x: 2022.3617885831914, y: 198493053.7487312},
      {x: 2022.2660077242722, y: 259387161.22768515},
      {x: 2022.1702275586836, y: 296518821.7510353},
      {x: 2022.101812461361,  y: 387485738.72836334},
      {x: 2022.0333980573694, y: 387485738.72836334},
      {x: 2021.93761719845,   y: 387485738.72836334},
      {x: 2021.8555206069905, y: 338964326.5788661},
      {x: 2021.787105509668,  y: 259387161.22768515},
      {x: 2021.7734233222002, y: 259387161.22768515},
      {x: 2021.7597397480713, y: 259387161.22768515},
      {x: 2022.4165194130542, y: 259387161.22768515},
      {x: 2022.3891543447883, y: 427414879260455.56},
      {x: 2022.3617885831914, y: 8111297256177839.0},
      {x: 2022.3617885831914, y: 1.759680835429727e+17},
      {x: 2022.3617885831914, y: 7.665729820345338e+17},
      {x: 2022.3207392474658, y: 1.9555416995467113e+18},
      {x: 2022.252324150143,  y: 4.3639415520325975e+18},
      {x: 2022.1428617970869, y: 9.73844445972882e+18},
      {x: 2022.0744466997644, y: 1.6630185565163446e+19},
      {x: 2022.0197151765708, y: 2.173208704259477e+19},
      {x: 2022.0060322957725, y: 2.484293311412861e+19},
      {x: 2021.9649829600467, y: 3.246429925553145e+19},
      {x: 2021.951300772579,  y: 4.242387882165013e+19},
      {x: 2021.9239350109824, y: 4.849669046546367e+19},
      {x: 2021.9102514368533, y: 6.337477680832235e+19},
      {x: 2021.8965692493855, y: 7.244657810757697e+19},
      {x: 2021.8828856752566, y: 8.281702124729395e+19},
      {x: 2021.8828856752566, y: 8.281702124729395e+19},
      {x: 2021.8828856752566, y: 8.281702124729395e+19},
      {x: 2022.5533496076994, y: 864703611.3515831},
      {x: 2022.9775189124487, y: 953806556139813.8},
      {x: 2023.0459340097711, y: 1.0599726461794412e+16},
      {x: 2023.1417141753598, y: 1.3465719500985659e+17},
      {x: 2023.2374950342792, y: 1.710666507260605e+18},
      {x: 2023.3332751998676, y: 2.173208704259477e+19},
      {x: 2023.4427382462545, y: 1.848120448270681e+20},
      {x: 2023.6069335091656, y: 2.683909019576515e+21},
      {x: 2023.7437616238187, y: 2.2824317704868853e+22},
      {x: 2023.839542482738,  y: 1.2993368296914504e+23},
      {x: 2023.9079568867298, y: 3.789108576696036e+23},
      {x: 2023.9626884099232, y: 8.455675451969181e+23},
      {x: 2024.0311035072457, y: 1.6506607781619025e+24},
      {x: 2024.0858350304393, y: 3.222308108879204e+24},
      {x: 2024.1268836728343, y: 4.813624957699226e+24},
      {x: 2024.1405672469634, y: 5.502683926615925e+24},
      {x: 2024.154249434431,  y: 6.290367255992265e+24},
      {x: 2022.909104508457,  y: 506359411.0058614},
      {x: 2023.1280312945614, y: 8406186392.619398},
      {x: 2023.6069335091656, y: 3460844650299.824},
      {x: 2024.003737745649,  y: 2433176322562153.5},
      {x: 2023.0185682481745, y: 17861261.804262567},
      {x: 2023.3880067230612, y: 506359411.0058614},
      {x: 2022.6217633183605, y: 2205862767.0467453},
      {x: 2022.6764955348847, y: 36620048415.39027},
      {x: 2022.6764955348847, y: 327074340150485.6},
      {x: 2022.6764955348847, y: 1.2117035676942778e+16},
      {x: 2022.5807146759653, y: 9.73844445972882e+18},
      {x: 2022.5807146759653, y: 4.7145858738634824e+20},
      {x: 2022.4302029871833, y: 3.507293661835237e+21},
      {x: 2022.3207392474658, y: 9.943026245129466e+22},
      {x: 2022.2386419626755, y: 4922552246.995361},
      {x: 2022.1291782229578, y: 794442019199.8861},
      {x: 2021.9649829600467, y: 218947708710401.62},
      {x: 2021.6913253440794, y: 9.01414774435516e+16},
      {x: 2021.294521107596,  y: 3.246429925553145e+19},
      {x: 2021.1303258446849, y: 2.1126759289595704e+20},
      {x: 2020.9113990585804, y: 1.0520960611756806e+21},
      {x: 2021.7597397480713, y: 96814.08279743527},
      {x: 2021.8692034877888, y: 37951.383479635304},
      {x: 2021.7734233222002, y: 37951.383479635304},
      {x: 2021.8555206069905, y: 322741.84031484334},
      {x: 2021.8555206069905, y: 216048.0642471517},
      {x: 2021.8828856752566, y: 110672.63853603433},
      {x: 2021.9239350109824, y: 74085.8678177873},
      {x: 2022.0060322957725, y: 551142.5639087047},
      {x: 2022.0470809381677, y: 246974.49616770382},
      {x: 2022.1428617970869, y: 144625.80265930557},
      {x: 2022.252324150143,  y: 84690.96884160757},
      {x: 2022.3617885831914, y: 49594.18699813736},
      {x: 2022.5123002719736, y: 22223.831271251252},
      {x: 2022.5807146759653, y: 14876.954663285154},
      {x: 2022.6901777223522, y: 9958.80175214076},
      {x: 2022.7585928196747, y: 8711.749084043708},
      {x: 2022.8133236495376, y: 8711.749084043708},
      {x: 2022.8680551727311, y: 8711.749084043708},
      {x: 2022.9227880825858, y: 8711.749084043708},
      {x: 2022.9775189124487, y: 8711.749084043708},
      {x: 2023.0185682481745, y: 8711.749084043708},
      {x: 2023.0459340097711, y: 8711.749084043708},
      {x: 2023.0459340097711, y: 8711.749084043708},
      {x: 2023.0459340097711, y: 8711.749084043708},
      {x: 2021.0459340097711, y: 1.2e24},
      {x: 2022.0459340097711, y: 1e24},
      {x: 2023.0459340097711, y: 2e24},
      {x: 2023.5459340097711, y: 2e24},
      {x: 2023.4459340097711, y: 3e24},
      {x: 2023.4459340097711, y: 3e24},
      {x: 2023.5,             y: 2e25},
    ];
    drawScatter(svg, scatterPoints, xScale, yScale);
  }

  class Scale {
    constructor(domain, range) {
      this.domain = domain;
      this.range = range;
    }

    apply(x) {
      let y = this.range[0] + (x - this.domain[0])/(this.domain[1] - this.domain[0]) * (this.range[1] - this.range[0]);
      return y;
    }

    invert(y) {
      let x = this.domain[0] + (y - this.range[0])/(this.range[1] - this.range[0]) * (this.domain[1] - this.domain[0]);
      return x;
    }
  }

  function createSvgElement(tag, attrs, props={}) {
    let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (let key in attrs) {
      elem.setAttribute(key, attrs[key]);
    }
    for (let key in props) {
      elem[key] = props[key];
    }
    return elem;
  }

  function drawXAxis(svg, dataAreaBounds, xScale) {
    // Draw axis line
    let line = createSvgElement('line', {
      'x1': dataAreaBounds.x0,
      'x2': dataAreaBounds.x1,
      'y1': dataAreaBounds.y1,
      'y2': dataAreaBounds.y1,
      'class': 'axis'
    });
    svg.appendChild(line);

    for (let x of [2014, 2016, 2018, 2020, 2022, 2024]) {
      // Draw tick line
      let line = createSvgElement('line', {
        'x1': xScale.apply(x),
        'x2': xScale.apply(x),
        'y1': dataAreaBounds.y1,
        'y2': dataAreaBounds.y1 + 5,
        'class': 'tick',
      });
      svg.appendChild(line);

      // Draw tick label
      let text = createSvgElement('text', {
        'x': xScale.apply(x),
        'y': dataAreaBounds.y1 + 12,
        'text-anchor': 'middle',
        'dominant-baseline': 'hanging',
        'class': 'tick-label',
      }, {
        'textContent': x
      });
      svg.appendChild(text);
    }
  }

  function drawYAxis(svg, dataAreaBounds, yScale) {
    // Draw axis line
    let line = createSvgElement('line', {
      'y1': dataAreaBounds.y0,
      'y2': dataAreaBounds.y1,
      'x1': dataAreaBounds.x0,
      'x2': dataAreaBounds.x0,
      'class': 'axis'
    });
    svg.appendChild(line);

    // Keep track of the last bounding box to prevent overlapping labels
    let lastBBox = null;

    for (let y of [1, 0.5e25, 1e25, 1.5e25, 2e25].reverse()) {
      // Draw tick line
      let line = createSvgElement('line', {
        'y1': yScale.apply(y),
        'y2': yScale.apply(y),
        'x1': dataAreaBounds.x0,
        'x2': dataAreaBounds.x0 - 5,
        'class': 'tick',
      });
      svg.appendChild(line);

      // Draw tick label
      let text = createSvgElement('text', {
        'y': yScale.apply(y),
        'x': dataAreaBounds.x0 - 8,
        'dominant-baseline': 'middle',
        'text-anchor': 'end',
        'class': 'tick-label',
      }, {
        'textContent': y
      });
      svg.appendChild(text);

      // Remove overlapping ticks
      let bBox = text.getBBox();
      if (lastBBox != null && bBox.y < lastBBox.y + lastBBox.height) {
        svg.removeChild(text);
        svg.removeChild(line);
      }

      lastBBox = bBox;
    }
  }

  function drawLine(svg, points, xScale, yScale) {
    let line = createSvgElement('path', {
      'd': `M ${points.map(p => xScale.apply(p.x) + ' ' + yScale.apply(p.y)).join(' L ')}`,
      'stroke': '#32ab24',
      'stroke-width': 3,
      'fill': 'none',
    });
    svg.appendChild(line);
  }

  function drawScatter(svg, points, xScale, yScale) {
    // Draw a little 'X' at each point
    for (let point of points) {
      let pointX = xScale.apply(point.x);
      let pointY = yScale.apply(point.y);
      let pointR = 3;
      svg.appendChild(createSvgElement('path', {
        'd': `M ${pointX-pointR} ${pointY-pointR} L ${pointX+pointR} ${pointY+pointR} M ${pointX-pointR} ${pointY+pointR} L ${pointX+pointR} ${pointY-pointR}`,
        'stroke': 'black',
        'stroke-width': 1.3,
        'fill': 'none',
      }));
    }
  }

  // Actually draw the thing
  drawFigure();
</script>

</body>

</html>