I'm trying to transform some data in long data format to wide data format in d3.
I found a post here with just that info: http://jonathansoma.com/tutorials/d3/wide-vs-long-data/ However, this function only works with d3v3, and I need to be able to use it in d3v4.
Below is my d3v3 code.
If I run this with d3v4, I don't get any errors in the console, but where I log the wide data, it shows up like this:
wide data (7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
I didn't think d3.nest changed in v4.
Could anyone tell me what I need to change to make this work in version 4? Greatly appreciate any insight!
Here is a fiddle should it be helpful: https://jsfiddle.net/ksc4b6wL/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var long_data = [
{date: "01/02/20", value: "3628", age_group: "1 to 18"},
{date: "01/15/20", value: "3634", age_group: "1 to 18"},
{date: "02/03/20", value: "3619", age_group: "1 to 18"},
{date: "02/18/20", value: "3593", age_group: "1 to 18"},
{date: "03/02/20", value: "3605", age_group: "1 to 18"},
{date: "03/16/20", value: "3444", age_group: "1 to 18"},
{date: "04/01/20", value: "3007", age_group: "1 to 18"},
{date: "01/02/20", value: "5753", age_group: "19 to 30"},
{date: "01/15/20", value: "5817", age_group: "19 to 30"},
{date: "02/03/20", value: "5850", age_group: "19 to 30"},
{date: "02/18/20", value: "5826", age_group: "19 to 30"},
{date: "03/02/20", value: "5881", age_group: "19 to 30"},
{date: "03/16/20", value: "5685", age_group: "19 to 30"},
{date: "04/01/20", value: "4876", age_group: "19 to 30"},
{date: "01/02/20", value: "2347", age_group: "31 to 45"},
{date: "01/15/20", value: "2356", age_group: "31 to 45"},
{date: "02/03/20", value: "2394", age_group: "31 to 45"},
{date: "02/18/20", value: "2427", age_group: "31 to 45"},
{date: "03/02/20", value: "2418", age_group: "31 to 45"},
{date: "03/16/20", value: "2371", age_group: "31 to 45"},
{date: "04/01/20", value: "1993", age_group: "31 to 45"},
{date: "01/02/20", value: "1691", age_group: "46 to 70"},
{date: "01/15/20", value: "1727", age_group: "46 to 70"},
{date: "02/03/20", value: "1721", age_group: "46 to 70"},
{date: "02/18/20", value: "1736", age_group: "46 to 70"},
{date: "03/02/20", value: "1726", age_group: "46 to 70"},
{date: "03/16/20", value: "1707", age_group: "46 to 70"},
{date: "04/01/20", value: "1498", age_group: "46 to 70"},
{date: "01/02/20", value: "3372", age_group: "70 and above"},
{date: "01/15/20", value: "3368", age_group: "70 and above"},
{date: "02/03/20", value: "3359", age_group: "70 and above"},
{date: "02/18/20", value: "3407", age_group: "70 and above"},
{date: "03/02/20", value: "3354", age_group: "70 and above"},
{date: "03/16/20", value: "3252", age_group: "70 and above"},
{date: "04/01/20", value: "2777", age_group: "70 and above"}
]
console.log('long data',long_data)
var wide = d3.nest()
.key(function(d) { return d["date"] })
.rollup(function(d) {
return d.reduce(function(prev, curr) {
prev["date"] = curr["date"];
prev[curr["age_group"]] = curr["value"];
return prev;
}, {});
})
.entries(long_data)
.map(function(d) {
return d.values;
});
console.log('wide data',wide)
</script>
</body>
</html>
Well, that ended up being easy. I just had to change:
.map(function(d) {
return d.values;
});
to:
.map(function(d) {
return d.value;
});
The below code works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var long_data = [
{date: "01/02/20", value: "3628", age_group: "1 to 18"},
{date: "01/15/20", value: "3634", age_group: "1 to 18"},
{date: "02/03/20", value: "3619", age_group: "1 to 18"},
{date: "02/18/20", value: "3593", age_group: "1 to 18"},
{date: "03/02/20", value: "3605", age_group: "1 to 18"},
{date: "03/16/20", value: "3444", age_group: "1 to 18"},
{date: "04/01/20", value: "3007", age_group: "1 to 18"},
{date: "01/02/20", value: "5753", age_group: "19 to 30"},
{date: "01/15/20", value: "5817", age_group: "19 to 30"},
{date: "02/03/20", value: "5850", age_group: "19 to 30"},
{date: "02/18/20", value: "5826", age_group: "19 to 30"},
{date: "03/02/20", value: "5881", age_group: "19 to 30"},
{date: "03/16/20", value: "5685", age_group: "19 to 30"},
{date: "04/01/20", value: "4876", age_group: "19 to 30"},
{date: "01/02/20", value: "2347", age_group: "31 to 45"},
{date: "01/15/20", value: "2356", age_group: "31 to 45"},
{date: "02/03/20", value: "2394", age_group: "31 to 45"},
{date: "02/18/20", value: "2427", age_group: "31 to 45"},
{date: "03/02/20", value: "2418", age_group: "31 to 45"},
{date: "03/16/20", value: "2371", age_group: "31 to 45"},
{date: "04/01/20", value: "1993", age_group: "31 to 45"},
{date: "01/02/20", value: "1691", age_group: "46 to 70"},
{date: "01/15/20", value: "1727", age_group: "46 to 70"},
{date: "02/03/20", value: "1721", age_group: "46 to 70"},
{date: "02/18/20", value: "1736", age_group: "46 to 70"},
{date: "03/02/20", value: "1726", age_group: "46 to 70"},
{date: "03/16/20", value: "1707", age_group: "46 to 70"},
{date: "04/01/20", value: "1498", age_group: "46 to 70"},
{date: "01/02/20", value: "3372", age_group: "70 and above"},
{date: "01/15/20", value: "3368", age_group: "70 and above"},
{date: "02/03/20", value: "3359", age_group: "70 and above"},
{date: "02/18/20", value: "3407", age_group: "70 and above"},
{date: "03/02/20", value: "3354", age_group: "70 and above"},
{date: "03/16/20", value: "3252", age_group: "70 and above"},
{date: "04/01/20", value: "2777", age_group: "70 and above"}
]
console.log('long data',long_data)
var wide = d3.nest()
.key(function(d) { return d["date"] })
.rollup(function(d) {
return d.reduce(function(prev, curr) {
prev["date"] = curr["date"];
prev[curr["age_group"]] = curr["value"];
return prev;
}, {});
})
.entries(long_data)
.map(function(d) {
return d.value;
});
console.log('wide data',wide)
</script>
</body>
</html>