这个JSON结构是否适合使用d3.js的堆积条形图？

Question

I need to create a stacked bar chart plus line graph. I'm thinking d3.js is the tool for the job, but I'm having problems binding my data. Is the following JSON formatted in a way that will work for the stack method?

{
"response": {
    "qtime": 11,
    "params": {
        "id": "jb8wp1rw41v",
        "format": "json"
    }
},
"series": {
    "twitter": [{
        "date": "2013-08-20",
        "value": 3
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 4
    }, {
        "date": "2013-08-23",
        "value": 1
    }, {
        "date": "2013-08-24",
        "value": 5
    }, {
        "date": "2013-08-25",
        "value": 9
    }, {
        "date": "2013-08-26",
        "value": 2
    }, {
        "date": "2013-08-27",
        "value": 6
    }, {
        "date": "2013-08-28",
        "value": 5
    }, {
        "date": "2013-08-29",
        "value": 3
    }, {
        "date": "2013-08-30",
        "value": 5
    }, {
        "date": "2013-08-31",
        "value": 8
    }, {
        "date": "2013-09-01",
        "value": 9
    }, {
        "date": "2013-09-02",
        "value": 7
    }],
    "facebook": [{
        "date": "2013-08-20",
        "value": 0
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 3
    }, {
        "date": "2013-08-23",
        "value": 6
    }, {
        "date": "2013-08-24",
        "value": 10
    }, {
        "date": "2013-08-25",
        "value": 21
    }, {
        "date": "2013-08-26",
        "value": 28
    }, {
        "date": "2013-08-27",
        "value": 21
    }, {
        "date": "2013-08-28",
        "value": 10
    }, {
        "date": "2013-08-29",
        "value": 6
    }, {
        "date": "2013-08-30",
        "value": 0
    }, {
        "date": "2013-08-31",
        "value": 15
    }, {
        "date": "2013-09-01",
        "value": 21
    }, {
        "date": "2013-09-02",
        "value": 1
    }],
    "email": [{
        "date": "2013-08-20",
        "value": 0
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 1
    }, {
        "date": "2013-08-23",
        "value": 2
    }, {
        "date": "2013-08-24",
        "value": 3
    }, {
        "date": "2013-08-25",
        "value": 5
    }, {
        "date": "2013-08-26",
        "value": 8
    }, {
        "date": "2013-08-27",
        "value": 13
    }, {
        "date": "2013-08-28",
        "value": 5
    }, {
        "date": "2013-08-29",
        "value": 8
    }, {
        "date": "2013-08-30",
        "value": 1
    }, {
        "date": "2013-08-31",
        "value": 1
    }, {
        "date": "2013-09-01",
        "value": 2
    }, {
        "date": "2013-09-02",
        "value": 13
    }],
    "amazon_rank": [{
        "date": "2013-08-20",
        "value": 1001
    }, {
        "date": "2013-08-21",
        "value": 2312
    }, {
        "date": "2013-08-22",
        "value": 2300
    }, {
        "date": "2013-08-23",
        "value": 5179
    }, {
        "date": "2013-08-24",
        "value": 5112
    }, {
        "date": "2013-08-25",
        "value": 2305
    }, {
        "date": "2013-08-26",
        "value": 1902
    }, {
        "date": "2013-08-27",
        "value": 1221
    }, {
        "date": "2013-08-28",
        "value": 1010
    }, {
        "date": "2013-08-29",
        "value": 2588
    }, {
        "date": "2013-08-30",
        "value": 4093
    }, {
        "date": "2013-08-31",
        "value": 4432
    }, {
        "date": "2013-09-01",
        "value": 5002
    }, {
        "date": "2013-09-02",
        "value": 3902
    }],
    "pinterest": [{
        "date": "2013-08-20",
        "value": 17
    }, {
        "date": "2013-08-21",
        "value": 23
    }, {
        "date": "2013-08-22",
        "value": 11
    }, {
        "date": "2013-08-23",
        "value": 13
    }, {
        "date": "2013-08-24",
        "value": 19
    }, {
        "date": "2013-08-25",
        "value": 5
    }, {
        "date": "2013-08-26",
        "value": 17
    }, {
        "date": "2013-08-27",
        "value": 11
    }, {
        "date": "2013-08-28",
        "value": 2
    }, {
        "date": "2013-08-29",
        "value": 3
    }, {
        "date": "2013-08-30",
        "value": 5
    }, {
        "date": "2013-08-31",
        "value": 7
    }, {
        "date": "2013-09-01",
        "value": 19
    }, {
        "date": "2013-09-02",
        "value": 0
    }]
}

}

Answer 1

You'll need to wrangle the data a little bit to get in a format that d3 likes, but there are built in functions to do all the work for you:

var companies = d3.layout.stack()(d3.values(json.series))

will give you a data structure similar to causes in the stacked bar chart example .

Basically, d3.values is taking your object with several arrays and turning in into an array of arrays. d3.layout.stack takes that two dimensional array, re structures it aa little bit and adds convenience functions that make it much simpler create a stacked bar chart.

Answer 2

I would recommend you to not use JSON at all since it is not streamable. Indeed, charts are often representing a big amount of datas and it is recommended to load their content progressively with the help of the XHR progress event.

Since most of the charts are tabular datas, i assume CSV is the better format for that purpose. If you still want be able to manage trees like with JSON, take a look at VarStream https://github.com/nfroidure/VarStream .

Here is an example of loading charts with a streamable format versus with JSON : http://server.elitwork.com/experiments/chartstream/index.html

The badest is your connection, the more you see how usefull is XHR Streaming.