I am trying to visualize team collaboration data, in a way like this:

Different colors in the chart are different collaboration artifact types.

The data from the source looks like this:

var json = [
    {
        "teamLabel": "Team 1",
        "created_date": "2013-01-09",
        "typeLabel": "Email"
        "count": "5"
    },
    {
        "teamLabel": "Team 1",
        "created_date": "2013-01-10",
        "typeLabel": "Email"
        "count": "7"
    },
    /* and of course, a lot more data of this kind */
]

Note that the data is given for single days. So for the above visualization, I need to aggregate the data based on the week of year first. The team name and the artifact type need to be preserved though and are used as grouping attributes. Here's the code:

// "2013-01-09"
var dateFormat = d3.time.format.utc("%Y-%m-%d");

// "2013-02" for the 2nd week of the year
var yearWeek = d3.time.format.utc("%Y-%W");

var data = d3.nest().key(function(d) {
        return d.teamLabel;
    }).key(function(d) {
        var created_date = dateFormat.parse(d.created_date);
        return yearWeek(created_date);
    })
    .key(function(d) {
        return d.typeLabel;
    }).rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
                return parseInt(d.count);    // parse the integer
            });
        }
    )
    .map(json);

This results in an Object hierarchy based on the nesting keys. I do not see how to create the above chart from this, so I am rather looking for a way to convert data into the following structure:

[
    // This list contains an element for each donut
    {
        "teamLabel": "Team 1",
        "createdWeek": "2013-02",
        "values": [
            // This list contains one element for each type we found
            {
                "typeLabel": "Email",
                "count": 12
            },
            {
            ...
            }
        ]
    },
    {
    ...
    }
]

This way, I can use createdWeek and teamLabel for the positioning on x- and y-Axis respectively, and the information under values can be passed to d3.layout.pie().

Is there a clean way to do this data transformation? If you need any clarification or further details, please let me know.

I am trying to visualize team collaboration data, in a way like this:

Different colors in the chart are different collaboration artifact types.

The data from the source looks like this:

var json = [
    {
        "teamLabel": "Team 1",
        "created_date": "2013-01-09",
        "typeLabel": "Email"
        "count": "5"
    },
    {
        "teamLabel": "Team 1",
        "created_date": "2013-01-10",
        "typeLabel": "Email"
        "count": "7"
    },
    /* and of course, a lot more data of this kind */
]

Note that the data is given for single days. So for the above visualization, I need to aggregate the data based on the week of year first. The team name and the artifact type need to be preserved though and are used as grouping attributes. Here's the code:

// "2013-01-09"
var dateFormat = d3.time.format.utc("%Y-%m-%d");

// "2013-02" for the 2nd week of the year
var yearWeek = d3.time.format.utc("%Y-%W");

var data = d3.nest().key(function(d) {
        return d.teamLabel;
    }).key(function(d) {
        var created_date = dateFormat.parse(d.created_date);
        return yearWeek(created_date);
    })
    .key(function(d) {
        return d.typeLabel;
    }).rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
                return parseInt(d.count);    // parse the integer
            });
        }
    )
    .map(json);

This results in an Object hierarchy based on the nesting keys. I do not see how to create the above chart from this, so I am rather looking for a way to convert data into the following structure:

[
    // This list contains an element for each donut
    {
        "teamLabel": "Team 1",
        "createdWeek": "2013-02",
        "values": [
            // This list contains one element for each type we found
            {
                "typeLabel": "Email",
                "count": 12
            },
            {
            ...
            }
        ]
    },
    {
    ...
    }
]

This way, I can use createdWeek and teamLabel for the positioning on x- and y-Axis respectively, and the information under values can be passed to d3.layout.pie().

Is there a clean way to do this data transformation? If you need any clarification or further details, please let me know.

• javascript
• d3.js

Share Improve this question Follow edited Dec 24, 2015 at 21:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 11, 2013 at 0:58 cyroxxcyroxx 3,87733 gold badges2424 silver badges3636 bronze badges 3

• 1 Did you ever find out how to do this? – Christopher Hackett Commented Jul 2, 2013 at 12:47
• 1 @cyroxx I'm not sure I understand your question; you would like convert the json data you have presented into the new array format grouped by team? – hitautodestruct Commented Oct 15, 2013 at 12:36
• I'm confused why you call this flattening, when it seems you are adding layers to originally flat data. (I'm looking to flatten a nested data set.) – punstress Commented Dec 5, 2014 at 16:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

That's how you do it:

var flat = data.entries().map(function(d){
    return d.value.entries().map(function(e){
        return {
            "teamLabel": d.key,
            "createdWeek": e.key,
            "values": e.value.entries().map(function(f){
                return {"typeLabel": f.key, "count": f.value}
            })
        }
    })
}).reduce(function(d1,d2){ return d1.concat(d2) },[]);

Note that I'm using d3.map instead of the standard javascript object in order to use the map.entries() helper function. I imagine that's what you tried judging by the fact that you're using:

.map(json); // whereas I used .map(json, d3.map)

instead of

.entries(json);

jsFiddle link here:

http://jsfiddle/RFontana/KhX2n/