D3 v4: линейные шкалы для гистограммы с использованием данных JSON из XML-запроса Http

Question

Я изо всех сил пытаюсь создать гистограмму, используя D3 v4, чтобы нарисовать гистограмму, используя данные, извлеченные из XML HTTP-запроса. Это первый вызов в треке сертификации D3 от FreeCodeCamp: https://learn.freecodecamp.org/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart

Мне удалось получить данные в виде объекта JSON, и я могу перебирать их, используя D3. Объект JSON выглядит следующим образом:

 {
  "errors": {},
  "id": 120140,
  "source_name": "Federal Reserve Economic Data",
  "source_code": "FRED",
  "code": "GDP",
  "name": "Gross Domestic Product, 1 Decimal",
  "urlize_name": "Gross-Domestic-Product-1-Decimal",
  "display_url": "http://research.stlouisfed.org/fred2/data/GDP.txt",
  "description": "Units: Billions of Dollars\nSeasonal Adjustment: Seasonally Adjusted Annual Rate\nNotes: A Guide to the National Income and Product Accounts of the United States (NIPA) - (http://www.bea.gov/national/pdf/nipaguid.pdf)",
  "updated_at": "2015-12-14T20:00:28.561Z",
  "frequency": "quarterly",
  "from_date": "1947-01-01",
  "to_date": "2015-07-01",
  "column_names": [
    "DATE",
    "VALUE"
  ],
  "private": false,
  "type": null,
  "premium": false,
  "data": [
    [
      "1947-01-01",
      243.1
    ],
    [
      "1947-04-01",
      246.3
    ],
    [
      "1947-07-01",
      250.1
    ],
    [
      "1947-10-01",
      260.3
    ],...}

"data": [], - это элемент, который я пытаюсь визуализировать.

Мне удалось нарисовать, используя целые числа в массиве ([ "1947-01-01", 243,1 ]) но я борюсь за применение масштабов, поэтому график рисуется внутри сгенерированного. Я попытался использовать d3.scalelinear() для оси X и Y:

//setting the scales for the chart
    const xScale = d3.scaleLinear()
                    .domain([0, d3.max(chart_data, (d) => d[0])])
                    .range([margin, width - margin]);

    const yScale = d3.scaleLinear()
                        .domain([0, d3.max(chart_data, (d) => d[1])])
                        .range([height - margin, margin]);

Но когда я пытаюсь применить xScale к атрибуту 'x' диаграммы или к атрибуту yScale to te 'height', я получаю ошибку NaN. Я не уверен, что я делаю неправильно.

Я загрузил свой код в JSFiddle: https://jsfiddle.net/siyafrica/r2wmxtpj/2/