Notebooks 2.0 is here.
Published
Edited
Jan 25, 2021
{
mutable run=0;
const svg = d3.select(DOM.svg(width,height));
const voronoi = svg.append("g");
const labels = svg.append("g");
const val_labels = svg.append("g");
let seed = new Math.seedrandom(randomize());
let voronoiTreeMap = d3.voronoiTreemap()
.prng(seed)
.clip(shape);
voronoiTreeMap(dataHierarchy);
colorHierarchy(dataHierarchy);
let allNodes = dataHierarchy.descendants()
.sort((a, b) => b.depth - a.depth)
.map((d, i) => Object.assign({}, d, {id: i}));
let hoveredShape = null;
voronoi.selectAll('path')
.data(allNodes)
.enter()
.append('path')
.attr('d', d => "M" + d.polygon.join("L") + "Z")
.attr("stroke", "#F5F5F2")
.attr("stroke-width", 2)
.style('fill-opacity', group == Object.keys(csvData[0])[1] ? 0.3 : 1)
.style('fill-opacity', d => d.depth === 2 ? 1 : 0)
//.attr('pointer-events', d => d.depth === 2 ? 'all' : 'none')
.style('fill', d => d.parent ? d.parent.color : d.color)
.attr("class","path")
// .on('mouseenter', d => {
// let label = labels.select(`.label-${d.id}`);
// label.attr('opacity', 1)
// let val_label = val_labels.select(`.label-${d.id}`);
// val_label.attr('opacity', 1)
// })
// .on('mouseleave', d => {
// let label = labels.select(`.label-${d.id}`);
// label.attr('opacity', 0)
// let val_label = val_labels.select(`.label-${d.id}`);
// val_label.attr('opacity', 0)
// })
.transition()
.duration(1000)
.attr("stroke-width", d => 4 - d.depth*2.8)
labels.selectAll('text')
.data(allNodes.filter(d => d.depth === 2 ))
.enter()
.append('text')
.attr('class', d => `label-${d.id}`)
.attr('text-anchor', 'middle')
.attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+6]+")")
.text(d => d.data.key)
// .attr('opacity', d => d.data.key === hoveredShape ? 1 : 0)
// .attr('opacity', function(d) {if(d.data.key === hoveredShape){return(1);
// }else {return(0);}})
// .attr('cursor', 'default')
// .attr('pointer-events', 'none')
.attr('fill', 'black')
.style('font-size', '12px')
.style('font-family', 'Montserrat');
val_labels.selectAll('text')
.data(allNodes.filter(d => d.depth === 2 ))
.enter()
.append('text')
.attr('class', d => `label-${d.id}`)
.attr('text-anchor', 'middle')
.attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+25]+")")
.text(d => bigFormat(d.data.value))
// .attr('opacity', d => d.data.key === hoveredShape ? 1 : 0)
// .attr('opacity', function(d) {if(d.data.key === hoveredShape){return(1);
// }else {return(0);}})
// .attr('cursor', 'default')
// .attr('pointer-events', 'none')
.attr('fill', 'black')
.style('font-size', '12px')
.style('font-family', 'Montserrat');
mutable run = 1;
return svg.node();
}
edgeCount =
{
if(shapechoice ==="Circle")
{
return 200
}
if(shapechoice ==="Octogon")
{
return 8
}
if(shapechoice ==="Triangle")
{
return 3
}
if(shapechoice ==="Diamond")
{
return 4
}
if(shapechoice ==="Square")
{
return 4
}
if(shapechoice ==="Pentagon")
{
return 5
}
if(shapechoice ==="Hexagon")
{
return 6
}
}
shape =
{
return d3
.range(edgeCount)
.map(i => {
const rad = rotation + i/edgeCount * 2*Math.PI;
return [
width/2 + width/2 * Math.cos(rad),
height/2 + height/2 * Math.sin(rad)
]
})
}
function colorHierarchy(hierarchy) {
if(hierarchy.depth === 0) {
hierarchy.color = '#909090';
} else if(hierarchy.depth === 1){
hierarchy.color = sectorColor(hierarchy.data.key);
} else {
hierarchy.color = hierarchy.parent.color;
}
if(hierarchy.children) {
hierarchy.children.forEach(child => colorHierarchy(child))
}
}
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.
