Read json data in d3 js

Question

var tabulate = function(data, columns) {
    var table = d3.select('body').append('table')
    var thead = table.append('thead')
    var tbody = table.append('tbody')

    thead.append('tr')
        .selectAll('th')
        .data(columns)
        .enter()
        .append('th')
        .text(function(d) {
            return d
        })

    var rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr')

    var cells = rows.selectAll('td')
        .data(function(row) {
            return columns.map(function(column) {
                return {
                    column: column,
                    value: row[column]
                }
            })
        })
        .enter()
        .append('td')
        .text(function(d) {
            return d.value
        })

    return table;
}
var columns = ['Client', 'Count', 'Count'];

d3.csv('test.csv', function(data) {

    //console.log(data[3]);
    tabulate(data, columns)
})

Text in my test.csv is

Client,Count flipkart,809285 amazon,491189 snapdeal,469133 myntra,182708

what I need is to read data from a json I am getting from response while making an ajax call the json I am getting is

[
   {
      Client:"amazon",
      Count:"491189"
   },
   {
      Client:"flipkart",
      Count:"809285"
   },
   {
      Client:"snapdeal",
      Count:"469133"
   },
   {
      Client:"myntra",
      Count:"182708"
   }
];

I want to show the json in tabular format!!!

Answer 1

D3 uses its XHR module to issues asynchronous request for retrieving data. However, in many cases you will find yourself not using d3.xhr directly, but one of the convenience methods to make your life more easy.

If you are requesting JSON instead of CSV you could use d3.json(url[, callback]) to process the data. When using these convenience methods keep in mind, that the callback is invoked with two parameters: the first being an error, if any, and the second your JSON response. For your purposes you could end up with something like this:

d3.json('test.json', function(error, data) {
    //console.log(data[3]);
    tabulate(data, columns)
});

Answer 2

The example below is a different approach but it works well. You should wrap "Client" and "Count" in quotes BTW.

d3.select('body').append('table')

d3.json('data.js', function (data) {

    for (var i = 0; i < data.length; i++) {

        var firstitem = data[i].Client;
        var seconditem = data[i].Count;

        d3.select('table').append('tr')
          .html('<td>' + firstitem + '</td>' + '<td>' + seconditem + '</td>')
    }
});

Here is data.js...

[ { "Client": "amazon", "Count": "491189" }, { "Client": "flipkart", "Count": "809285" }, { "Client": "snapdeal", "Count": "469133" }, { "Client": "myntra", "Count": "182708" } ]