Published
Edited
Mar 22, 2021
Fork of Tree-o-Matic
15 forks
29 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = cstParseRows(source, ([name, value, color = fillColor]) => ({
name,
value: value === undefined ? undefined : +value,
color
}))
Insert cell
treemap = data => d3.treemap()
.tile(d3.treemapBinary) // TODO Allow d3.treemapSquarify?
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d => d.children ? 0 : isNaN(d.value) ? 1 : d.value)
.sort((a, b) => b.height - a.height || b.value - a.value))
Insert cell
format = d3.format(",d")
Insert cell
height = 640
Insert cell
fillColor = "#e4e4e4"
Insert cell
lightColor = "#fff"
Insert cell
darkColor = "#000"
Insert cell
import {rasterize, serialize} from "@mbostock/saving-svg"
Insert cell
import {cstParseRows} from "@mbostock/comma-separated-tree"
Insert cell
d3 = require("d3@6")
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