// Tree Map isn't a plot chart, this is a manual d3 graph.... need to render the legend swatches manually too
key = Swatches(treechart.scales.color)
treedata = [
{name: "tree", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.catone", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.catone.one", size: 5461},
{name: "tree.catone.two", size: 461},
{name: "tree.catone.three", size: 6150},
{name: "tree.catone.four", size: 1490},
{name: "tree.catone.five", size: 2461},
{name: "tree.cattwo", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.cattwo.uno", size: 400},
{name: "tree.cattwo.dos", size: 550},
{name: "tree.cattwo.tres", size: 1550},
{name: "tree.catthree", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.catthree.AAA", size: 5461},
{name: "tree.catfour", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.catfour.Buckets", size: 5461},
{name: "tree.catfive", size: null}, // Parent node does not have a size, it will take up the size determined by its children
{name: "tree.catfive.Category Name", size: 5461},
]
stratData = d3.stratify().path(d => d.name.replace(/\./g, "/"))(treedata);
d3.hierarchy(stratData)
.sum(d => d.data.size)
.sort((a, b) => b.value - a.value)
import {Swatches} from "@d3/color-legend"
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.
