Published
Edited
Dec 24, 2020
19 forks
40 stars
Insert cell
Insert cell
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
pack = data => {
const root = d3.hierarchy(data);
root.sum(d => d.children ? 0 : isNaN(d.value) ? 1 : d.value);
if (sorted) root.sort((a, b) => b.value - a.value);
return d3.pack()
.size([width - 2, height - 2])
.padding(3)
(root);
}
Insert cell
format = d3.format(",d")
Insert cell
height = 720
Insert cell
fillColor = "#e4e4e4"
Insert cell
lightColor = "#fff"
Insert cell
darkColor = "#000"
Insert cell
function autosize(svg) {
document.body.appendChild(svg);
const box = svg.getBBox();
document.body.removeChild(svg);
svg.setAttribute("viewBox", `${box.x - 1} ${box.y - 1} ${box.width + 2} ${box.height + 2}`);
return svg;
}
Insert cell
import {fit, measureWidth} from "@mbostock/bubble-o-matic"
Insert cell
import {rasterize, serialize} from "@mbostock/saving-svg"
Insert cell
import {cstParseRows} from "@mbostock/comma-separated-tree"
Insert cell
d3 = require("d3@5")
Insert cell
html`<style>

textarea {
display: block;
boxSizing: border-box;
width: calc(100% + 28px);
font: var(--monospace-font, var(--mono_fonts));
minHeight: 33px;
border: none;
padding: 4px 10px;
margin: 0 -14px;
background: rgb(247,247,249);
tabSize: 2;
}

textarea:focus {
outline: none;
}

</style>`
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