Published
Edited
Nov 12, 2020
Importers
md`# Test`
sunburst()
sunburst = () => {
const svg = d3.create("svg")
.attr('width', dimensions.width)
.attr('height', dimensions.height)
.attr('x', 0)
.attr('y', 0)
.attr('class', 'sunburst-wrapper')
.attr('id', 'root')
.attr(
'viewBox',
`-${dimensions.width / 2} -${dimensions.height / 2} ${
dimensions.width
} ${dimensions.height}`
)
.append('g')
svg.selectAll('path')
.each((node, i) => {
oldNodes[i] = node;
})
.data(data_2.descendants())
.join(
(enter) =>
enter
.append('path')
.attr('id', (d, i) => `segment-${i}`)
.attr('fill', (d) => 'white')
.attr('fill-opacity', 0)
.call(
async (enter) =>
enter
.transition()
.attr('d', (d) => {
console.log('d')
console.log(arc(d.current))
return arc(d.current);
})
.attr('fill-opacity', 1)
.attr('fill', 'slategrey')
),
(update) =>
update.call(
async (update) =>
await update
.transition()
.tween('data', (d) => {
const oldNode = oldNodes.find(
(node) => node.data.id === d.data.id
);
d.previous = oldNode ? oldNode.current : defaultNode;
const i = d3.interpolate(d.previous, d.current);
return (t) => (d.previous = i(t));
})
.attrTween('d', (d) => () => arc(d.previous))
.end(),
update
.attr('fill', 'red')
.attr('fill-opacity', 1)
),
(exit) =>
exit.call(async (exit) =>
await exit
.transition()
.attr('fill-opacity', 0)
.remove()
.end()
)
)
return svg.node();
}
ds_1 = FileAttachment("export-2.json").json()
treeData = d3
.stratify()
.id((d) => d.urlPath)
.parentId((d) => d.parentUrlPath)(ds_1);
root = d3.hierarchy(treeData);
root.x0 = 0;
root.y0 = 0;
dataMetrics = ([{name: 'Impressions', type: 'Number'}])
addMetrics = (root) => {
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
d.data.data._nodeMetrics = d.data.data.nodeMetrics;
/* Summed Values */
d.data.data.nodeChildSum = [];
dataMetrics.map((node, i) => {
d.data.data.nodeChildSum[i] = {};
const block = d.data.data.nodeChildSum[i];
block.count = d.count().value;
block.type = node.type;
block.name = node.name;
block.value = d.sum((item) => item.data[node.name]).value;
});
d.visible = true;
})
return root
}
root_2 = addMetrics(root)
data = d3.partition().size([2 * Math.PI, root_2.height + 1])(
root_2.sort((a, b) => b.value - a.value)
);
data_2 = {
data.each((d) => {
d.angle = d.x1 - (d.x1 - d.x0) / 2;
d.radius = d.y1 - (d.y1 - d.y0) / 2;
d.current = {
x0: d.x0,
x1: d.x1,
y0: d.y0,
y1: d.y1,
}
})
return data
};
visibleDepth = data.height
defaultNode = ({
x0: 0,
x1: 0,
y0: 0,
y1: 0,
steps: visibleDepth,
})
oldNodes = []
dimensions = ({
width: 500,
height: 500,
radius: 250,
})
arc = d3
.arc()
.startAngle((d) => d.x0)
.endAngle((d) => d.x1)
.padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(dimensions.radius/1.75) // Space between arcs of same depth
.innerRadius((d) => d.y0 * dimensions.radius)
.outerRadius((d) => d.y1 * dimensions.radius - 1);
base = {
const svg = d3.create("svg")
.attr('version', '1.1')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('width', dimensions.width)
.attr('height', dimensions.height)
.attr('x', 0)
.attr('y', 0)
.attr('class', 'sunburst-wrapper')
.attr('id', 'root')
.attr(
'viewBox',
`-${dimensions.width / 2} -${dimensions.height / 2} ${
dimensions.width
} ${dimensions.height}`
)
.append('g')
return svg.node()
}
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.
