Cleaning lower levels of D3 nested data









up vote
0
down vote

favorite












I am having trouble working with D3 nested data. Currently, my code nests the data by two variables, leader and competent. Then, the code rolls up the data to get counts per leader-competent survey category.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Output looks like this:



​0: …
​​key: "John"
​​values: (2) […]
​​​ 0: Object key: "Agree", value: 3
​​​ 1: Object key: "Strongly Agree", value: 6
​​​length: 2
​1: …
key: "Emily"
​​ values: (2) […]
​​​ 0: Object key: "Agree", value: 4
​​​ 1: Object key: "Strongly Agree", value: 6
​​​ length: 2
length: 2


I then clean the data to ensure that missing competent survey categories are added in with counts of 0.



makeAllKeys = function(d) 
allKeys = scaleValues
return allKeys


summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)


Output now looks like this:



0: …
​​ key: "John"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 3
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
1: …
​​​​ key: "Emily"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 4
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
length: 2


Now, I want to add another layer to the nest using company as a key.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Here's how the output looks with the company key added:



0: …
​​​​ key: "John"
​​ ​​ ​​values: (2) […]
​​​​​ ​​ ​​ 0: …
​​ ​​ ​​ ​​ ​​​​key: "A"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​​​​​​ ​​ ​​ ​​ ​​ 0: Object key: "Agree", value: 2
​​ ​​ ​​ ​​ ​​ ​​​​​1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​ ​​ ​​ ​​​1: …
​​​​​​ ​​ ​​ ​​ key: "B"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​ ​​ ​​ ​​ ​​ ​​​​​0: Object key: "Agree", value: 1
​​​​​​​ ​​ ​​ ​​ ​​ 1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​​​ ​​ length: 2
​1: Object key: "Emily", values: (2) […]
​length: 2


However, I am struggling to modify the code that fixes the missing survey categories now that they are another level lower in the nested structure.



Full test code and example data provided below.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<script type = "text/javascript">

// Define scales
var scaleValues = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
var scaleValues2 = ["Very Unlikely", "Unlikely", "Neutral", "Likely", "Very Likely"]

// Import the data
d3.csv("stackoverflow.csv", function(error, data)
if (error) throw error

var data = data
.map(function(d) return leader: d.leader, company: d.company, competent: d.competent, personable: d.personable, helpful: d.helpful, recommend: d.recommend)
.filter(function(d) return d.competent != "NA")
.filter(function(d) return d.personable != "NA")
.filter(function(d) return d.helpful != "NA")
.filter(function(d) return d.recommend != "NA")
.filter(function(d) return d.leader != "NA")
.filter(function(d) return d.leader != "I don't remember")
data.forEach(function(d)
d.competent = d.competent.replace(/[^a-z0-9+]+/gi, " ")
d.personable = d.personable.replace(/[^a-z0-9+]+/gi, " ")
d.helpful = d.helpful.replace(/[^a-z0-9+]+/gi, " ")
d.recommend = d.recommend.replace(/[^a-z0-9+]+/gi, " ")
)
console.log(data)

makeAllKeys = function(d)
allKeys = scaleValues
return allKeys


var summary = d3.nest()
.key(function(d) return d.leader)
// .key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)

summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)
console.log(summary)
)
</script>
</body>
</html>


stackoverflow.csv



company,competent,personable,helpful,recommend,leader
A,Agree,Agree,Agree,Likely,John
A,Strongly Agree,Strongly Agree,Agree,Very Unlikely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Neutral,Very Likely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Agree,Strongly Agree,Strongly Agree,Likely,Emily
A,Agree,Strongly Agree,Agree,Neutral,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
B,Agree,Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,John
B,Agree,Strongly Agree,Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily









share|improve this question























  • have you looked at your summary after the nest operation?
    – rioV8
    Nov 8 at 18:22










  • Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
    – Sarah
    Nov 8 at 18:48











  • if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
    – rioV8
    Nov 8 at 19:03










  • I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
    – Sarah
    Nov 8 at 19:09











  • then I suggest reading a good book/website about JavaScript and see what else the language for features has.
    – rioV8
    Nov 8 at 20:03














up vote
0
down vote

favorite












I am having trouble working with D3 nested data. Currently, my code nests the data by two variables, leader and competent. Then, the code rolls up the data to get counts per leader-competent survey category.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Output looks like this:



​0: …
​​key: "John"
​​values: (2) […]
​​​ 0: Object key: "Agree", value: 3
​​​ 1: Object key: "Strongly Agree", value: 6
​​​length: 2
​1: …
key: "Emily"
​​ values: (2) […]
​​​ 0: Object key: "Agree", value: 4
​​​ 1: Object key: "Strongly Agree", value: 6
​​​ length: 2
length: 2


I then clean the data to ensure that missing competent survey categories are added in with counts of 0.



makeAllKeys = function(d) 
allKeys = scaleValues
return allKeys


summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)


Output now looks like this:



0: …
​​ key: "John"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 3
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
1: …
​​​​ key: "Emily"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 4
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
length: 2


Now, I want to add another layer to the nest using company as a key.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Here's how the output looks with the company key added:



0: …
​​​​ key: "John"
​​ ​​ ​​values: (2) […]
​​​​​ ​​ ​​ 0: …
​​ ​​ ​​ ​​ ​​​​key: "A"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​​​​​​ ​​ ​​ ​​ ​​ 0: Object key: "Agree", value: 2
​​ ​​ ​​ ​​ ​​ ​​​​​1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​ ​​ ​​ ​​​1: …
​​​​​​ ​​ ​​ ​​ key: "B"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​ ​​ ​​ ​​ ​​ ​​​​​0: Object key: "Agree", value: 1
​​​​​​​ ​​ ​​ ​​ ​​ 1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​​​ ​​ length: 2
​1: Object key: "Emily", values: (2) […]
​length: 2


However, I am struggling to modify the code that fixes the missing survey categories now that they are another level lower in the nested structure.



Full test code and example data provided below.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<script type = "text/javascript">

// Define scales
var scaleValues = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
var scaleValues2 = ["Very Unlikely", "Unlikely", "Neutral", "Likely", "Very Likely"]

// Import the data
d3.csv("stackoverflow.csv", function(error, data)
if (error) throw error

var data = data
.map(function(d) return leader: d.leader, company: d.company, competent: d.competent, personable: d.personable, helpful: d.helpful, recommend: d.recommend)
.filter(function(d) return d.competent != "NA")
.filter(function(d) return d.personable != "NA")
.filter(function(d) return d.helpful != "NA")
.filter(function(d) return d.recommend != "NA")
.filter(function(d) return d.leader != "NA")
.filter(function(d) return d.leader != "I don't remember")
data.forEach(function(d)
d.competent = d.competent.replace(/[^a-z0-9+]+/gi, " ")
d.personable = d.personable.replace(/[^a-z0-9+]+/gi, " ")
d.helpful = d.helpful.replace(/[^a-z0-9+]+/gi, " ")
d.recommend = d.recommend.replace(/[^a-z0-9+]+/gi, " ")
)
console.log(data)

makeAllKeys = function(d)
allKeys = scaleValues
return allKeys


var summary = d3.nest()
.key(function(d) return d.leader)
// .key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)

summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)
console.log(summary)
)
</script>
</body>
</html>


stackoverflow.csv



company,competent,personable,helpful,recommend,leader
A,Agree,Agree,Agree,Likely,John
A,Strongly Agree,Strongly Agree,Agree,Very Unlikely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Neutral,Very Likely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Agree,Strongly Agree,Strongly Agree,Likely,Emily
A,Agree,Strongly Agree,Agree,Neutral,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
B,Agree,Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,John
B,Agree,Strongly Agree,Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily









share|improve this question























  • have you looked at your summary after the nest operation?
    – rioV8
    Nov 8 at 18:22










  • Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
    – Sarah
    Nov 8 at 18:48











  • if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
    – rioV8
    Nov 8 at 19:03










  • I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
    – Sarah
    Nov 8 at 19:09











  • then I suggest reading a good book/website about JavaScript and see what else the language for features has.
    – rioV8
    Nov 8 at 20:03












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am having trouble working with D3 nested data. Currently, my code nests the data by two variables, leader and competent. Then, the code rolls up the data to get counts per leader-competent survey category.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Output looks like this:



​0: …
​​key: "John"
​​values: (2) […]
​​​ 0: Object key: "Agree", value: 3
​​​ 1: Object key: "Strongly Agree", value: 6
​​​length: 2
​1: …
key: "Emily"
​​ values: (2) […]
​​​ 0: Object key: "Agree", value: 4
​​​ 1: Object key: "Strongly Agree", value: 6
​​​ length: 2
length: 2


I then clean the data to ensure that missing competent survey categories are added in with counts of 0.



makeAllKeys = function(d) 
allKeys = scaleValues
return allKeys


summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)


Output now looks like this:



0: …
​​ key: "John"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 3
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
1: …
​​​​ key: "Emily"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 4
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
length: 2


Now, I want to add another layer to the nest using company as a key.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Here's how the output looks with the company key added:



0: …
​​​​ key: "John"
​​ ​​ ​​values: (2) […]
​​​​​ ​​ ​​ 0: …
​​ ​​ ​​ ​​ ​​​​key: "A"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​​​​​​ ​​ ​​ ​​ ​​ 0: Object key: "Agree", value: 2
​​ ​​ ​​ ​​ ​​ ​​​​​1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​ ​​ ​​ ​​​1: …
​​​​​​ ​​ ​​ ​​ key: "B"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​ ​​ ​​ ​​ ​​ ​​​​​0: Object key: "Agree", value: 1
​​​​​​​ ​​ ​​ ​​ ​​ 1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​​​ ​​ length: 2
​1: Object key: "Emily", values: (2) […]
​length: 2


However, I am struggling to modify the code that fixes the missing survey categories now that they are another level lower in the nested structure.



Full test code and example data provided below.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<script type = "text/javascript">

// Define scales
var scaleValues = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
var scaleValues2 = ["Very Unlikely", "Unlikely", "Neutral", "Likely", "Very Likely"]

// Import the data
d3.csv("stackoverflow.csv", function(error, data)
if (error) throw error

var data = data
.map(function(d) return leader: d.leader, company: d.company, competent: d.competent, personable: d.personable, helpful: d.helpful, recommend: d.recommend)
.filter(function(d) return d.competent != "NA")
.filter(function(d) return d.personable != "NA")
.filter(function(d) return d.helpful != "NA")
.filter(function(d) return d.recommend != "NA")
.filter(function(d) return d.leader != "NA")
.filter(function(d) return d.leader != "I don't remember")
data.forEach(function(d)
d.competent = d.competent.replace(/[^a-z0-9+]+/gi, " ")
d.personable = d.personable.replace(/[^a-z0-9+]+/gi, " ")
d.helpful = d.helpful.replace(/[^a-z0-9+]+/gi, " ")
d.recommend = d.recommend.replace(/[^a-z0-9+]+/gi, " ")
)
console.log(data)

makeAllKeys = function(d)
allKeys = scaleValues
return allKeys


var summary = d3.nest()
.key(function(d) return d.leader)
// .key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)

summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)
console.log(summary)
)
</script>
</body>
</html>


stackoverflow.csv



company,competent,personable,helpful,recommend,leader
A,Agree,Agree,Agree,Likely,John
A,Strongly Agree,Strongly Agree,Agree,Very Unlikely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Neutral,Very Likely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Agree,Strongly Agree,Strongly Agree,Likely,Emily
A,Agree,Strongly Agree,Agree,Neutral,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
B,Agree,Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,John
B,Agree,Strongly Agree,Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily









share|improve this question















I am having trouble working with D3 nested data. Currently, my code nests the data by two variables, leader and competent. Then, the code rolls up the data to get counts per leader-competent survey category.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Output looks like this:



​0: …
​​key: "John"
​​values: (2) […]
​​​ 0: Object key: "Agree", value: 3
​​​ 1: Object key: "Strongly Agree", value: 6
​​​length: 2
​1: …
key: "Emily"
​​ values: (2) […]
​​​ 0: Object key: "Agree", value: 4
​​​ 1: Object key: "Strongly Agree", value: 6
​​​ length: 2
length: 2


I then clean the data to ensure that missing competent survey categories are added in with counts of 0.



makeAllKeys = function(d) 
allKeys = scaleValues
return allKeys


summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)


Output now looks like this:



0: …
​​ key: "John"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 3
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
1: …
​​​​ key: "Emily"
​​​​ values: (5) […]
​​​​​ ​​ 0: Object key: "Strongly Disagree", values: 0
​​​​​ ​​ 1: Object key: "Disagree", values: 0
​​​​​ ​​ 2: Object key: "Neutral", values: 0
​​​​​ ​​ 3: Object key: "Agree", value: 4
​​​​​ ​​ 4: Object key: "Strongly Agree", value: 6
​​​​​ length: 5
length: 2


Now, I want to add another layer to the nest using company as a key.



var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)


Here's how the output looks with the company key added:



0: …
​​​​ key: "John"
​​ ​​ ​​values: (2) […]
​​​​​ ​​ ​​ 0: …
​​ ​​ ​​ ​​ ​​​​key: "A"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​​​​​​ ​​ ​​ ​​ ​​ 0: Object key: "Agree", value: 2
​​ ​​ ​​ ​​ ​​ ​​​​​1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​ ​​ ​​ ​​​1: …
​​​​​​ ​​ ​​ ​​ key: "B"
​​ ​​ ​​ ​​ ​​​​values: (2) […]
​​ ​​ ​​ ​​ ​​ ​​​​​0: Object key: "Agree", value: 1
​​​​​​​ ​​ ​​ ​​ ​​ 1: Object key: "Strongly Agree", value: 3
​​​​​​​ ​​ ​​ ​​ length: 2
​​​​​ ​​ length: 2
​1: Object key: "Emily", values: (2) […]
​length: 2


However, I am struggling to modify the code that fixes the missing survey categories now that they are another level lower in the nested structure.



Full test code and example data provided below.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<script type = "text/javascript">

// Define scales
var scaleValues = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
var scaleValues2 = ["Very Unlikely", "Unlikely", "Neutral", "Likely", "Very Likely"]

// Import the data
d3.csv("stackoverflow.csv", function(error, data)
if (error) throw error

var data = data
.map(function(d) return leader: d.leader, company: d.company, competent: d.competent, personable: d.personable, helpful: d.helpful, recommend: d.recommend)
.filter(function(d) return d.competent != "NA")
.filter(function(d) return d.personable != "NA")
.filter(function(d) return d.helpful != "NA")
.filter(function(d) return d.recommend != "NA")
.filter(function(d) return d.leader != "NA")
.filter(function(d) return d.leader != "I don't remember")
data.forEach(function(d)
d.competent = d.competent.replace(/[^a-z0-9+]+/gi, " ")
d.personable = d.personable.replace(/[^a-z0-9+]+/gi, " ")
d.helpful = d.helpful.replace(/[^a-z0-9+]+/gi, " ")
d.recommend = d.recommend.replace(/[^a-z0-9+]+/gi, " ")
)
console.log(data)

makeAllKeys = function(d)
allKeys = scaleValues
return allKeys


var summary = d3.nest()
.key(function(d) return d.leader)
// .key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)

summary = summary.map(function(d)
return
key: d.key,
values: makeAllKeys(+d.key).map(function(k) (key: k, values:0)
)

)
console.log(summary)
)
</script>
</body>
</html>


stackoverflow.csv



company,competent,personable,helpful,recommend,leader
A,Agree,Agree,Agree,Likely,John
A,Strongly Agree,Strongly Agree,Agree,Very Unlikely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
A,Strongly Agree,Strongly Agree,Neutral,Very Likely,John
A,Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
A,Agree,Strongly Agree,Strongly Agree,Likely,Emily
A,Agree,Strongly Agree,Agree,Neutral,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,John
B,Agree,Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Agree,Likely,John
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,John
B,Agree,Strongly Agree,Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily
B,Strongly Agree,Strongly Agree,Strongly Agree,Very Likely,Emily






d3.js






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 8 at 19:05

























asked Nov 8 at 17:17









Sarah

406




406











  • have you looked at your summary after the nest operation?
    – rioV8
    Nov 8 at 18:22










  • Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
    – Sarah
    Nov 8 at 18:48











  • if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
    – rioV8
    Nov 8 at 19:03










  • I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
    – Sarah
    Nov 8 at 19:09











  • then I suggest reading a good book/website about JavaScript and see what else the language for features has.
    – rioV8
    Nov 8 at 20:03
















  • have you looked at your summary after the nest operation?
    – rioV8
    Nov 8 at 18:22










  • Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
    – Sarah
    Nov 8 at 18:48











  • if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
    – rioV8
    Nov 8 at 19:03










  • I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
    – Sarah
    Nov 8 at 19:09











  • then I suggest reading a good book/website about JavaScript and see what else the language for features has.
    – rioV8
    Nov 8 at 20:03















have you looked at your summary after the nest operation?
– rioV8
Nov 8 at 18:22




have you looked at your summary after the nest operation?
– rioV8
Nov 8 at 18:22












Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
– Sarah
Nov 8 at 18:48





Yes, it looks normal in both cases (2 keys & 3 keys). I'll put examples in the question.
– Sarah
Nov 8 at 18:48













if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
– rioV8
Nov 8 at 19:03




if you manage to do it for 1 level, what is the problem for a 2nd level of nesting?
– rioV8
Nov 8 at 19:03












I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
– Sarah
Nov 8 at 19:09





I've tried many ways of modifying the code that fixes the missing survey categories, but my attempts to reference lower level values doesn't work. For instance, I can't simply say d.values.key to refer to the company key in the way that I use d.key to refer to the leader key. So my summary.map() function only works if the competent survey values are at the second level of the nest.
– Sarah
Nov 8 at 19:09













then I suggest reading a good book/website about JavaScript and see what else the language for features has.
– rioV8
Nov 8 at 20:03




then I suggest reading a good book/website about JavaScript and see what else the language for features has.
– rioV8
Nov 8 at 20:03












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










Minor change:



Within the summary.map..., d.values would now be an array (due to the company key being used in the nest), and so you have to map this d.values internally just like you did in the previous attempt.



Here's the code change that'll make more sense:



 var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)
.map(function(d)
return
key: d.key,
values: d.values.map(function (row)
return
key: row.key,
values: makeAllKeys(+d.key).map(function(k)
value = row.values.filter(function(v) return v.key == k)[0]
return value )

)

)


And yes, .map can be chained to the d3.nest itself.



Now the summary would look like the following:



[ 

"key":"John",
"values":[

"key":"A",
"values":[

"key":"Strongly Disagree",
"values":0
,

"key":"Disagree",
"values":0
,

"key":"Neutral",
"values":0
,

"key":"Agree",
"value":2
,

"key":"Strongly Agree",
"value":3

]
,

]
,

"key":"Emily",
"values":[ ]

]


Here's a plunkr link for reference: http://plnkr.co/edit/Zz7dsTbmO8dI3n3SKkP3?p=preview



Hope this helps.






share|improve this answer






















  • This works perfectly. Thanks so much for your help!
    – Sarah
    Nov 8 at 21:06






  • 1




    Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
    – Shashank
    Nov 9 at 14:15











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53212959%2fcleaning-lower-levels-of-d3-nested-data%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote



accepted










Minor change:



Within the summary.map..., d.values would now be an array (due to the company key being used in the nest), and so you have to map this d.values internally just like you did in the previous attempt.



Here's the code change that'll make more sense:



 var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)
.map(function(d)
return
key: d.key,
values: d.values.map(function (row)
return
key: row.key,
values: makeAllKeys(+d.key).map(function(k)
value = row.values.filter(function(v) return v.key == k)[0]
return value )

)

)


And yes, .map can be chained to the d3.nest itself.



Now the summary would look like the following:



[ 

"key":"John",
"values":[

"key":"A",
"values":[

"key":"Strongly Disagree",
"values":0
,

"key":"Disagree",
"values":0
,

"key":"Neutral",
"values":0
,

"key":"Agree",
"value":2
,

"key":"Strongly Agree",
"value":3

]
,

]
,

"key":"Emily",
"values":[ ]

]


Here's a plunkr link for reference: http://plnkr.co/edit/Zz7dsTbmO8dI3n3SKkP3?p=preview



Hope this helps.






share|improve this answer






















  • This works perfectly. Thanks so much for your help!
    – Sarah
    Nov 8 at 21:06






  • 1




    Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
    – Shashank
    Nov 9 at 14:15















up vote
1
down vote



accepted










Minor change:



Within the summary.map..., d.values would now be an array (due to the company key being used in the nest), and so you have to map this d.values internally just like you did in the previous attempt.



Here's the code change that'll make more sense:



 var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)
.map(function(d)
return
key: d.key,
values: d.values.map(function (row)
return
key: row.key,
values: makeAllKeys(+d.key).map(function(k)
value = row.values.filter(function(v) return v.key == k)[0]
return value )

)

)


And yes, .map can be chained to the d3.nest itself.



Now the summary would look like the following:



[ 

"key":"John",
"values":[

"key":"A",
"values":[

"key":"Strongly Disagree",
"values":0
,

"key":"Disagree",
"values":0
,

"key":"Neutral",
"values":0
,

"key":"Agree",
"value":2
,

"key":"Strongly Agree",
"value":3

]
,

]
,

"key":"Emily",
"values":[ ]

]


Here's a plunkr link for reference: http://plnkr.co/edit/Zz7dsTbmO8dI3n3SKkP3?p=preview



Hope this helps.






share|improve this answer






















  • This works perfectly. Thanks so much for your help!
    – Sarah
    Nov 8 at 21:06






  • 1




    Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
    – Shashank
    Nov 9 at 14:15













up vote
1
down vote



accepted







up vote
1
down vote



accepted






Minor change:



Within the summary.map..., d.values would now be an array (due to the company key being used in the nest), and so you have to map this d.values internally just like you did in the previous attempt.



Here's the code change that'll make more sense:



 var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)
.map(function(d)
return
key: d.key,
values: d.values.map(function (row)
return
key: row.key,
values: makeAllKeys(+d.key).map(function(k)
value = row.values.filter(function(v) return v.key == k)[0]
return value )

)

)


And yes, .map can be chained to the d3.nest itself.



Now the summary would look like the following:



[ 

"key":"John",
"values":[

"key":"A",
"values":[

"key":"Strongly Disagree",
"values":0
,

"key":"Disagree",
"values":0
,

"key":"Neutral",
"values":0
,

"key":"Agree",
"value":2
,

"key":"Strongly Agree",
"value":3

]
,

]
,

"key":"Emily",
"values":[ ]

]


Here's a plunkr link for reference: http://plnkr.co/edit/Zz7dsTbmO8dI3n3SKkP3?p=preview



Hope this helps.






share|improve this answer














Minor change:



Within the summary.map..., d.values would now be an array (due to the company key being used in the nest), and so you have to map this d.values internally just like you did in the previous attempt.



Here's the code change that'll make more sense:



 var summary = d3.nest()
.key(function(d) return d.leader)
.key(function(d) return d.company)
.key(function(d) return d.competent)
.sortKeys(function(a, b) return scaleValues.indexOf(a) - scaleValues.indexOf(b))
.rollup(function(l) return l.length)
.entries(data)
.map(function(d)
return
key: d.key,
values: d.values.map(function (row)
return
key: row.key,
values: makeAllKeys(+d.key).map(function(k)
value = row.values.filter(function(v) return v.key == k)[0]
return value )

)

)


And yes, .map can be chained to the d3.nest itself.



Now the summary would look like the following:



[ 

"key":"John",
"values":[

"key":"A",
"values":[

"key":"Strongly Disagree",
"values":0
,

"key":"Disagree",
"values":0
,

"key":"Neutral",
"values":0
,

"key":"Agree",
"value":2
,

"key":"Strongly Agree",
"value":3

]
,

]
,

"key":"Emily",
"values":[ ]

]


Here's a plunkr link for reference: http://plnkr.co/edit/Zz7dsTbmO8dI3n3SKkP3?p=preview



Hope this helps.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 8 at 20:39

























answered Nov 8 at 20:21









Shashank

4,2701512




4,2701512











  • This works perfectly. Thanks so much for your help!
    – Sarah
    Nov 8 at 21:06






  • 1




    Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
    – Shashank
    Nov 9 at 14:15

















  • This works perfectly. Thanks so much for your help!
    – Sarah
    Nov 8 at 21:06






  • 1




    Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
    – Shashank
    Nov 9 at 14:15
















This works perfectly. Thanks so much for your help!
– Sarah
Nov 8 at 21:06




This works perfectly. Thanks so much for your help!
– Sarah
Nov 8 at 21:06




1




1




Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
– Shashank
Nov 9 at 14:15





Glad I could help! And yes, you don't have to read a book/website just for this (apart from self-learning). :p You did pretty good there and it's just about practicing adding more console logs and breakpoints (using browser debugger) which helps a lot. Happy coding!
– Shashank
Nov 9 at 14:15


















 

draft saved


draft discarded















































 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53212959%2fcleaning-lower-levels-of-d3-nested-data%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Edmonton

Crossroads (UK TV series)