JavaScript
d3.js

d3.nestを使った配列のグルーピング

More than 3 years have passed since last update.

d3.nestメソッドを使うと配列のグルーピング処理が簡単に行えます。


dataSet

var dataSet = [

{"year":2014, "name":"hoge", "group":"A", "count":200},
{"year":2013, "name":"test", "group":"C", "count":110},
{"year":2013, "name":"shimizu", "group":"B", "count":310},
{"year":2014, "name":"suzuki", "group":"A", "count":260},
{"year":2015, "name":"tanaka", "group":"C", "count":180},
{"year":2014, "name":"sato", "group":"B", "count":220},
{"year":2015, "name":"hello", "group":"B", "count":340},
{"year":2012, "name":"yamada", "group":"C", "count":190},
{"year":2012, "name":"rin", "group":"C", "count":210},
{"year":2013, "name":"len", "group":"B", "count":340},
{"year":2015, "name":"miki", "group":"A", "count":220},
{"year":2014, "name":"luka", "group":"A", "count":330}
];

年(year)でグルーピング

//年でまとめる

var yearNestData = d3.nest()
.key(function(d) { return d.year; })
.map(dataSet);

yearNestData ->
{
"2012": [
{
"year": 2012,
"name": "yamada",
"group": "C",
"count": 190
},
{
"year": 2012,
"name": "rin",
"group": "C",
"count": 210
}
],
"2013": [
{
"year": 2013,
"name": "test",
"group": "C",
"count": 110
},
{
"year": 2013,
"name": "shimizu",
"group": "B",
"count": 310
},
{
"year": 2013,
"name": "len",
"group": "B",
"count": 340
}
],
"2014": [
{
"year": 2014,
"name": "hoge",
"group": "A",
"count": 200
},
{
"year": 2014,
"name": "suzuki",
"group": "A",
"count": 260
},
{
"year": 2014,
"name": "sato",
"group": "B",
"count": 220
},
{
"year": 2014,
"name": "luka",
"group": "A",
"count": 330
}
],
"2015": [
{
"year": 2015,
"name": "tanaka",
"group": "C",
"count": 180
},
{
"year": 2015,
"name": "hello",
"group": "B",
"count": 340
},
{
"year": 2015,
"name": "miki",
"group": "A",
"count": 220
}
]
}

key,value形式でまとめる

var yearNestData2 = d3.nest()

.key(function(d) { return d.year; })
.entries(dataSet);

yearNestData2 ->
[
{
"key": "2012",
"values": [
{
"year": 2012,
"name": "yamada",
"group": "C",
"count": 190
},
{
"year": 2012,
"name": "rin",
"group": "C",
"count": 210
}
]
},
{
"key": "2013",
"values": [
{
"year": 2013,
"name": "test",
"group": "C",
"count": 110
},
{
"year": 2013,
"name": "shimizu",
"group": "B",
"count": 310
},
{
"year": 2013,
"name": "len",
"group": "B",
"count": 340
}
]
},
{
"key": "2014",
"values": [
{
"year": 2014,
"name": "hoge",
"group": "A",
"count": 200
},
{
"year": 2014,
"name": "suzuki",
"group": "A",
"count": 260
},
{
"year": 2014,
"name": "sato",
"group": "B",
"count": 220
},
{
"year": 2014,
"name": "luka",
"group": "A",
"count": 330
}
]
},
{
"key": "2015",
"values": [
{
"year": 2015,
"name": "tanaka",
"group": "C",
"count": 180
},
{
"year": 2015,
"name": "hello",
"group": "B",
"count": 340
},
{
"year": 2015,
"name": "miki",
"group": "A",
"count": 220
}
]
}
]

年(year)でまとめてcountの平均値を出す

var dataMean = d3.nest()

.key(function(d) { return d.year; })
.rollup(function(v) { return d3.mean(v, function(d) { return +d.count; }); })
.map(dataSet);

dataMean ->
{
"2012": 200,
"2013": 253.33333333333334,
"2014": 252.5,
"2015": 246.66666666666666
}