stratify = d3.stratify()
.id(d => d["address"])
.parentId(d => d["funded_from"])
fundingTree = stratify(fundingTreeData)
fundingTree.children
function selectPath (tree, path) {
let subTree = tree
if (!path) {
return tree
}
nextSubtree: for (const pathElement of path) {
for (const childNode of subTree.children) {
if (childNode.data.id === pathElement) {
subTree = childNode
continue nextSubtree
}
}
return null
}
return subTree.copy()
}
topOfTree = function (tree, levels) {
const nodeData = []
for (const descendant of tree) {
if (descendant.depth < levels) {
const data = {...descendant.data}
if (descendant.depth === 0) {
delete data.funded_from
}
if (descendant.depth === levels - 1
&& descendant.children) {
const regions = new Set()
let coveredCount = 0
for (const provider of descendant.leaves()) {
if (provider.data.regions && provider.data.regions.length > 0) {
coveredCount++
for (const region of provider.data.regions) {
regions.add(region)
}
}
}
data.children = {
count: descendant.count().value,
coveredCount,
qualityAdjPower: descendant.sum(d => d.qualityAdjPower).value,
regions: [...regions]
}
}
nodeData.push(data)
}
}
return stratify(nodeData)
}
selectedSubtree = selectPath(fundingTree, params.path && params.path.split('/'))
prunedTree = topOfTree(selectedSubtree, 3)
import { graph as graph2 } from '@jimpick/d3-hierarchy-wider-svg/2'
import { graph } from '@d3/d3-hierarchy'
import { Tree } from '@d3/tree'
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/tree
function Tree2(data, { // data is either tabular (array of objects) or hierarchy (nested objects)
path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes
id = Array.isArray(data) ? d => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string)
parentId = Array.isArray(data) ? d => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier
children, // if hierarchical data, given a d in data, returns its children
tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster)
sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height))
label, // given a node d, returns the display name
title, // given a node d, returns its hover text
link, // given a node d, its link (if any)
linkTarget = "_blank", // the target attribute for links (if any)
width = 640, // outer width, in pixels
height, // outer height, in pixels
r = 3, // radius of nodes
padding = 1, // horizontal padding for first and last column
fill = "#999", // fill for nodes
fillOpacity, // fill opacity for nodes
stroke = "#555", // stroke for links
strokeWidth = 1.5, // stroke width for links
strokeOpacity = 0.4, // stroke opacity for links
strokeLinejoin, // stroke line join for links
strokeLinecap, // stroke line cap for links
halo = "#fff", // color of label halo
haloWidth = 3, // padding around the labels
minXAdjust = 0,
widthAdjust = 0
} = {}) {
// If id and parentId options are specified, or the path option, use d3.stratify
// to convert tabular data to a hierarchy; otherwise we assume that the data is
// specified as an object {children} with nested objects (a.k.a. the “flare.json”
// format), and use d3.hierarchy.
const root = path != null ? d3.stratify().path(path)(data)
: id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data)
: d3.hierarchy(data, children);
// Compute labels and titles.
const descendants = root.descendants();
const L = label == null ? null : descendants.map(d => label(d.data, d));
// Sort the nodes.
if (sort != null) root.sort(sort);
// Compute the layout.
const dx = 10;
const dy = width / (root.height + padding);
tree().nodeSize([dx, dy])(root);
// Center the tree.
let x0 = Infinity;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
// Compute the default height.
if (height === undefined) height = x1 - x0 + dx * 2;
const svg = d3.create("svg")
.attr("viewBox", [-dy * padding / 2 + minXAdjust, x0 - dx, width + widthAdjust, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.attr("font-family", "sans-serif")
.attr("font-size", 10);
svg.append("g")
.attr("fill", "none")
.attr("stroke", stroke)
.attr("stroke-opacity", strokeOpacity)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-width", strokeWidth)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x));
const node = svg.append("g")
.selectAll("a")
.data(root.descendants())
.join("a")
.attr("xlink:href", link == null ? null : d => link(d.data, d))
.attr("target", link == null ? null : linkTarget)
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle")
.attr("fill", d => d.children ? stroke : fill)
.attr("r", r);
if (title != null) node.append("title")
.text(d => title(d.data, d));
if (L) node.append("text")
.attr("dy", "0.32em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.text((d, i) => L[i])
.call(text => text.clone(true))
.attr("fill", "none")
.attr("stroke", halo)
.attr("stroke-width", haloWidth);
return svg.node();
}
params = [...(new URLSearchParams(location.search.substring(1))).entries()].reduce((acc, [key, value]) => ({ [key]: value, ...acc }), {})
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.
