将AJAX json数据传递到D3

I'm trying to use AJAX XMLHttpRequest to pass JSON data to D3 to build graphs. My code is:

<script>
    (function() {
        var url = "{% url 'airline_year_financial_data' %}";
        var httpRequest;
        makeRequest();

        // create and send an XHR request
        function makeRequest() {
            httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = responseMethod;
            httpRequest.open('GET', url)
            httpRequest.send()
        }
        // Handle XHR Response
        function responseMethod () {
            if (httpRequest.readyState === 4) {
                if (httpRequest.status === 200) {
                    updateUISuccess(httpRequest.responseText)
                    } else {
                        // Do something
                    }
            }
        }
        // Handle XHR Success
        function updateUISuccess(responseText) {
            var response = JSON.parse(responseText)
            console.log(response) // Correctly logs json data in console.
            console.log(typeof(response)) // Shows the type is 'object' in console.

           // Build D3 Chart
            d3.json(response, function (data) {
            var width = 500;
            var height = 300;
            var padding = 20;
            d3.select("body")
                .append("svg")
                    .attr("class", "waterfall-container")
                    .attr("width", width)
                    .attr("height", height)
                    .attr("style", "outline: thin solid")
            d3.select("svg")
                .selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                    .attr("x-axis", 200)
                    .attr("y-axis", 300)
                    .attr("width", 20)
                    .attr("height", 200)
                    .attr("fill", "blue")
               });
        }

    })();

I get error that:

GET http://localhost:8000/[object%20Object] 404 (Not Found)

I assume by default D3 wants me to pass some URL to d3.json() and does not want to accept the object. Any idea how can I pass response (object) to D3 and use it as data to build grap?

Ok so I have achieved the desired result by removing the d3.json call because I dont have to convert the JSON data again to JSON by using d3. Now the data is directly flowing to d3 code.

    var width = 500;
    var height = 300;
    var padding = 20;
    d3.select("body")
        .append("svg")
            .attr("class", "waterfall-container")
            .attr("width", width)
            .attr("height", height)
            .attr("style", "outline: thin solid")
    d3.select("svg")
        .selectAll("rect")
        .data(response) // Here I'm passing AJAX Data
        .enter()
        .append("rect")
            .attr("x-axis", 200)
            .attr("y-axis", 300)
            .attr("width", 20)
            .attr("height", 200)
            .attr("fill", "blue")