Computer Graphics & Visualization @ufrj.br
37-75Introdução ao SVGIntrodução ao HtmlIntrodução às Cascading StyleSheets (CSS)SVG Dinâmico com D3Usando arquivos SVGEncapsulando um inputSorteando com probabilidades dadasHexagonal hierarchical cartogram for BrazilCategorical TreemapCoral Vivo Diorama v3Mapa do Brasil com Vega-LiteCategorical data visualization with t-SNEPhoto gallery with lensMapa de bairros do Rio com Vega-LiteMapa coroplético e cartograma Dorling de população dos municípios brasileirosDeformation with RBFsLane-Riesenfeld subdivision
Hierarchical Square Packing
d3.group(packing.descendants(), (d) => d.depth)
padding = 10
function squarePacking(root) {
let config = {
heuristic: "best",
metric: "chessboard",
closeFreq: 1,
closeFactor: 0.3
};
let pack = function (node) {
if (node.children) {
let arrangement = new SquareArrangement([0, 0], config);
node.children.sort((a, b) => b.value - a.value);
node.children.forEach((d) => {
pack(d);
arrangement.addSquare(d.side ** 2);
});
let { min, max } = boundingBox(arrangement.polygon);
let [xside, yside] = [max[0] - min[0], max[1] - min[1]];
let [side, dx, dy] =
xside > yside
? [xside, 0, (xside - yside) / 2]
: [yside, (yside - xside) / 2, 0];
Object.assign(node, { x: padding, y: padding, side: side + padding * 2 });
arrangement.squares.forEach((vlist, i) => {
let childNode = node.children[i];
childNode.x += vlist[0].p[0] - min[0] + dx;
childNode.y += vlist[0].p[1] - min[1] + dy;
});
} else {
Object.assign(node, {
side: Math.sqrt(node.value) + padding * 2,
x: padding,
y: padding
});
}
};
let translate = function (node, dx = 0, dy = 0) {
node.x += dx;
node.y += dy;
if (node.children) {
for (let child of node.children) {
translate(child, node.x, node.y);
}
}
};
pack(root);
translate(root);
return root;
}
data = flare
hierarchy = d3
.hierarchy(data)
.sum((d) => d.size)
.sort((a, b) => b.size - a.size)
packing = squarePacking(hierarchy)
color = d3.scaleOrdinal(d3.range(10), d3.schemePastel2)
import { chart, flare } from "@d3/circle-packing"
import { boundingBox, SquareArrangement } from "@esperanc/square-packing"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.