Published
Edited
Dec 18, 2020
1 star
Insert cell
md`# Foam Tree Visualization`
Insert cell
d3 = require("d3@5", "d3-weighted-voronoi", "d3-voronoi-map", "d3-voronoi-treemap", 'seedrandom@2.4.3/seedrandom.min.js')
Insert cell
md`# Utils`
Insert cell
margin = ({top: 20, right: 20, bottom: 50, left: 50})
Insert cell
height = 750 - margin.top - margin.bottom
Insert cell
width = 750 - margin.left - margin.right
Insert cell
ellipse = d3
.range(100)
.map(i => [
(width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,
(height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2
])
Insert cell
function colorHierarchy(hierarchy) {
hierarchy.color = hierarchy.data.node_attributes[0].color || 'black';
if(hierarchy.children) {
hierarchy.children.forEach( child => colorHierarchy(child))
}
}
Insert cell
md`# Data`
Insert cell
data = d3.json("https://gist.githubusercontent.com/akibmayadav/75f72791ca44aec765acf49b66b7b86a/raw/2f58a81aa83cebeb8742efda614ed870614f2d92/small_taxonomy.json")
Insert cell
taxonomy_hierarchy = d3.hierarchy(data, d => d.children)
.sum(d => d.children?.length || 1)
Insert cell
md`# Cell Taxonomy Foam Tree`
Insert cell
import {radio} from "@jashkenas/inputs"
Insert cell
{
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.left + margin.right));
svg
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "#F5F5F2");
const voronoi = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let seed = new Math.seedrandom(20);
let voronoiTreeMap = d3.voronoiTreemap()
.prng(seed)
.clip(ellipse);
voronoiTreeMap(taxonomy_hierarchy);
colorHierarchy(taxonomy_hierarchy);
let allNodes = taxonomy_hierarchy.descendants()
.sort((a, b) => b.depth - a.depth)
.map((d, i) => Object.assign({}, d, {id: i}));
let hoveredShape = null;
let allNode = [allNodes[0]]
voronoi.selectAll('path')
.data(allNodes)
.enter()
.append('path')
.attr('d', d => "M" + d.polygon.join("L") + "Z")
.style('fill', d => d.parent?.color)
.attr("stroke", d=> "black")
.attr("stroke-width", d=> d.height===1 ? 7 : d.height+1 )
.style('fill-opacity',d=> d.height===0 ? 1 : 0)
.attr('pointer-events', d => d.depth === 2 ? 'all' : 'none');
labels.selectAll('text')
.data(allNodes.filter(d => d.height === 0))
.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.node_attributes[0].name)
.attr('opacity', 1)
.attr('cursor', 'default')
.attr('pointer-events', 'none')
.attr('fill', 'black')
.style('font-family', 'Montserrat')
.style('font-size', '7px');
return svg.node();
}
Insert cell

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.
Learn more