The end-to-end solution for building and hosting better data apps, dashboards, and reports.
import { tweet } from "@mbostock/tweet"
import { toc } from "@nebrius/indented-toc"
import {Tree as RadialTree} from "@d3/radial-tree"
import {Tree} from "@d3/tree"
radialDendrogram = RadialTree(hierarchicalData, {
label: d => d.name,
width: 640,
height: 640
})
clusterDendrogram = Tree(hierarchicalData, {
label: d => d.name,
width: 640
})
import { chart as collapsibleTree } with {
hierarchicalData as data
} from "@d3/collapsible-tree"
import {
viewof t as sunburstToIcicleSlider,
chart as sunburstToIcicle
} from "@kerryrodden/unrolling-a-sunburst"
import {
viewof t as lineChartSlider,
chart as lineChart
} from "@kerryrodden/unrolling-a-line-chart"
import {
viewof t as barChartSlider,
chart as radialBarChart
} from "@kerryrodden/unrolling-a-radial-bar-chart"
hierarchicalData = {
const maxDepth = 3;
const numChildren = 5;
function buildTree(node, depth) {
if (depth <= maxDepth) {
node.children = Array(numChildren).fill(null)
.map(() => ({ name: String(depth) }));
node.children.forEach(child => buildTree(child, depth + 1));
} else {
node.value = 1;
}
return node;
}
return buildTree({ name: "root" }, 1);
}
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.
