dataWithArrayChildren = ({
name: nameForRootNode,
children:
// 1. Array.from(iterable, mapFunction, thisArg)
Array.from(
// 2. d3.rollup(iterable, reduceFunction, ...keysToGroupBy)
d3.rollup(jsonData, data => data.length, ...keysToGroupBy),
// 3. arr.map((currentValue) => (returnValue))
([name, children]) => ({ name, children: Array.from(children, ([name,value]) => ({name,value})) })
)
});
d3.rollup(jsonData, data => data.length, ...keysToGroupBy)
d3.rollups(jsonData, data => data.length, ...keysToGroupBy)
Array.from(
d3.rollup(jsonData, data => data.length, ...keysToGroupBy),
([name, children]) => ({ name, children })
)
keysToGroupBy = groupByPriority === "repo" ? [d => d.repo, d => d.component] : [d => d.component, d => d.repo];
nameForRootNode = "Platform"
hierarchyWithArrayChildren = d3.hierarchy(dataWithArrayChildren)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
hierarchyWithMapChildren = d3.hierarchy(d3.rollup(jsonData, d => d.length, ...keysToGroupBy))
.sum(([, value]) => value)
.sort((a, b) => b.value - a.value)
packWithArrayChildren = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(hierarchyWithArrayChildren)
packWithMapChildren = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(hierarchyWithMapChildren)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
