Flare analytics treemap

import { Chart } from '@tanstack/charts/react/tooltip'
import { tooltip as exampleTooltip } from '@tanstack/charts/tooltip'

import { defineChart } from '@tanstack/charts'
import { treemap } from '@tanstack/charts/hierarchy/treemap'
import { flare } from '@tanstack/charts-data/flare'
import { selectTreemapData } from './selection'

const colors = ['#2563eb', '#8b5cf6', '#10b981']

const rows = selectTreemapData(flare)

export const createExampleChart = (input?: ChartOptions) =>
  defineChart(
    {
      marks: [
        treemap(rows, {
          id: 'treemap-cells',
          path: 'name',
          delimiter: '.',
          value: 'size',
          ratio: 4 / 3,
          round: true,
          color: (node) => node.ancestorIds.at(-1) ?? node.id,
          inset: 1,
          stroke: '#ffffff',
          strokeWidth: 1,
          label: input?.preview === true ? undefined : 'name',
          labelFill: '#ffffff',
          labelFontSize: 8,
          labelFontWeight: 600,
        }),
      ],
      scales: {
        x: null,
        y: null,
      },
      color: { range: colors },
      guides: false,
      margin: 0,
    },
    { keyboard: true, tooltip: exampleTooltip },
  )
export interface ChartOptions {
  preview?: boolean
}

export const exampleAriaLabel = 'Flare analytics treemap'

export const chart = createExampleChart({
  preview: false,
})

export default function Example() {
  return <Chart ariaLabel={exampleAriaLabel} definition={chart} height={480} />
}

import type { FlareRow } from '@tanstack/charts-data/flare'

const subtree = 'flare.analytics'

export function selectTreemapData(rows: readonly FlareRow[]) {
  return rows.filter(
    (row) => row.name === subtree || row.name.startsWith(`${subtree}.`),
  )
}

// Generated by scripts/sync-demo-data.mjs from flare.csv.
// Do not edit this file directly.
export const flare = [
  {name: "flare", size: null},
  {name: "flare.analytics", size: null},
  {name: "flare.analytics.cluster", size: null},
  {name: "flare.analytics.cluster.AgglomerativeCluster", size: 3938},
  {name: "flare.analytics.cluster.CommunityStructure", size: 3812},
  {name: "flare.analytics.cluster.HierarchicalCluster", size: 6714},
  {name: "flare.analytics.cluster.MergeEdge", size: 743},
  {name: "flare.analytics.graph", size: null},
  {name: "flare.analytics.graph.BetweennessCentrality", size: 3534},
  {name: "flare.analytics.graph.LinkDistance", size: 5731},
  {name: "flare.analytics.graph.MaxFlowMinCut", size: 7840},
  {name: "flare.analytics.graph.ShortestPaths", size: 5914},
  {name: "flare.analytics.graph.SpanningTree", size: 3416},
  {name: "flare.analytics.optimization", size: null},
  {name: "flare.analytics.optimization.AspectRatioBanker", size: 7074},
  {name: "flare.animate", size: null},
  {name: "flare.animate.Easing", size: 17010},
  {name: "flare.animate.FunctionSequence", size: 5842},
  {name: "flare.animate.interpolate", size: null},
  {name: "flare.animate.interpolate.ArrayInterpolator", size: 1983},
  {name: "flare.animate.interpolate.ColorInterpolator", size: 2047},
  {name: "flare.animate.interpolate.DateInterpolator", size: 1375},
  {name: "flare.animate.interpolate.Interpolator", size: 8746},
  {name: "flare.animate.interpolate.MatrixInterpolator", size: 2202},
  {name: "flare.animate.interpolate.NumberInterpolator", size: 1382},
  {name: "flare.animate.interpolate.ObjectInterpolator", size: 1629},
  {name: "flare.animate.interpolate.PointInterpolator", size: 1675},
  {name: "flare.animate.interpolate.RectangleInterpolator", size: 2042},
  {name: "flare.animate.ISchedulable", size: 1041},
  {name: "flare.animate.Parallel", size: 5176},
  {name: "flare.animate.Pause", size: 449},
  {name: "flare.animate.Scheduler", size: 5593},
  {name: "flare.animate.Sequence", size: 5534},
  {name: "flare.animate.Transition", size: 9201},
  {name: "flare.animate.Transitioner", size: 19975},
  {name: "flare.animate.TransitionEvent", size: 1116},
  {name: "flare.animate.Tween", size: 6006},
  {name: "flare.data", size: null},
  {name: "flare.data.converters", size: null},
  {name: "flare.data.converters.Converters", size: 721},
  {name: "flare.data.converters.DelimitedTextConverter", size: 4294},
  {name: "flare.data.converters.GraphMLConverter", size: 9800},
  {name: "flare.data.converters.IDataConverter", size: 1314},
  {name: "flare.data.converters.JSONConverter", size: 2220},
  {name: "flare.data.DataField", size: 1759},
  {name: "flare.data.DataSchema", size: 2165},
  {name: "flare.data.DataSet", size: 586},
  {name: "flare.data.DataSource", size: 3331},
  {name: "flare.data.DataTable", size: 772},
  {name: "flare.data.DataUtil", size: 3322},
  {name: "flare.display", size: null},
  {name: "flare.display.DirtySprite", size: 8833},
  {name: "flare.display.LineSprite", size: 1732},
  {name: "flare.display.RectSprite", size: 3623},
  {name: "flare.display.TextSprite", size: 10066},
  {name: "flare.flex", size: null},
  {name: "flare.flex.FlareVis", size: 4116},
  {name: "flare.physics", size: null},
  {name: "flare.physics.DragForce", size: 1082},
  {name: "flare.physics.GravityForce", size: 1336},
  {name: "flare.physics.IForce", size: 319},
  {name: "flare.physics.NBodyForce", size: 10498},
  {name: "flare.physics.Particle", size: 2822},
  {name: "flare.physics.Simulation", size: 9983},
  {name: "flare.physics.Spring", size: 2213},
  {name: "flare.physics.SpringForce", size: 1681},
  {name: "flare.query", size: null},
  {name: "flare.query.AggregateExpression", size: 1616},
  {name: "flare.query.And", size: 1027},
  {name: "flare.query.Arithmetic", size: 3891},
  {name: "flare.query.Average", size: 891},
  {name: "flare.query.BinaryExpression", size: 2893},
  {name: "flare.query.Comparison", size: 5103},
  {name: "flare.query.CompositeExpression", size: 3677},
  {name: "flare.query.Count", size: 781},
  {name: "flare.query.DateUtil", size: 4141},
  {name: "flare.query.Distinct", size: 933},
  {name: "flare.query.Expression", size: 5130},
  {name: "flare.query.ExpressionIterator", size: 3617},
  {name: "flare.query.Fn", size: 3240},
  {name: "flare.query.If", size: 2732},
  {name: "flare.query.IsA", size: 2039},
  {name: "flare.query.Literal", size: 1214},
  {name: "flare.query.Match", size: 3748},
  {name: "flare.query.Maximum", size: 843},
  {name: "flare.query.methods", size: null},
  {name: "flare.query.methods.add", size: 593},
  {name: "flare.query.methods.and", size: 330},
  {name: "flare.query.methods.average", size: 287},
  {name: "flare.query.methods.count", size: 277},
  {name: "flare.query.methods.distinct", size: 292},
  {name: "flare.query.methods.div", size: 595},
  {name: "flare.query.methods.eq", size: 594},
  {name: "flare.query.methods.fn", size: 460},
  {name: "flare.query.methods.gt", size: 603},
  {name: "flare.query.methods.gte", size: 625},
  {name: "flare.query.methods.iff", size: 748},
  {name: "flare.query.methods.isa", size: 461},
  {name: "flare.query.methods.lt", size: 597},
  {name: "flare.query.methods.lte", size: 619},
  {name: "flare.query.methods.max", size: 283},
  {name: "flare.query.methods.min", size: 283},
  {name: "flare.query.methods.mod", size: 591},
  {name: "flare.query.methods.mul", size: 603},
  {name: "flare.query.methods.neq", size: 599},
  {name: "flare.query.methods.not", size: 386},
  {name: "flare.query.methods.or", size: 323},
  {name: "flare.query.methods.orderby", size: 307},
  {name: "flare.query.methods.range", size: 772},
  {name: "flare.query.methods.select", size: 296},
  {name: "flare.query.methods.stddev", size: 363},
  {name: "flare.query.methods.sub", size: 600},
  {name: "flare.query.methods.sum", size: 280},
  {name: "flare.query.methods.update", size: 307},
  {name: "flare.query.methods.variance", size: 335},
  {name: "flare.query.methods.where", size: 299},
  {name: "flare.query.methods.xor", size: 354},
  {name: "flare.query.methods._", size: 264},
  {name: "flare.query.Minimum", size: 843},
  {name: "flare.query.Not", size: 1554},
  {name: "flare.query.Or", size: 970},
  {name: "flare.query.Query", size: 13896},
  {name: "flare.query.Range", size: 1594},
  {name: "flare.query.StringUtil", size: 4130},
  {name: "flare.query.Sum", size: 791},
  {name: "flare.query.Variable", size: 1124},
  {name: "flare.query.Variance", size: 1876},
  {name: "flare.query.Xor", size: 1101},
  {name: "flare.scale", size: null},
  {name: "flare.scale.IScaleMap", size: 2105},
  {name: "flare.scale.LinearScale", size: 1316},
  {name: "flare.scale.LogScale", size: 3151},
  {name: "flare.scale.OrdinalScale", size: 3770},
  {name: "flare.scale.QuantileScale", size: 2435},
  {name: "flare.scale.QuantitativeScale", size: 4839},
  {name: "flare.scale.RootScale", size: 1756},
  {name: "flare.scale.Scale", size: 4268},
  {name: "flare.scale.ScaleType", size: 1821},
  {name: "flare.scale.TimeScale", size: 5833},
  {name: "flare.util", size: null},
  {name: "flare.util.Arrays", size: 8258},
  {name: "flare.util.Colors", size: 10001},
  {name: "flare.util.Dates", size: 8217},
  {name: "flare.util.Displays", size: 12555},
  {name: "flare.util.Filter", size: 2324},
  {name: "flare.util.Geometry", size: 10993},
  {name: "flare.util.heap", size: null},
  {name: "flare.util.heap.FibonacciHeap", size: 9354},
  {name: "flare.util.heap.HeapNode", size: 1233},
  {name: "flare.util.IEvaluable", size: 335},
  {name: "flare.util.IPredicate", size: 383},
  {name: "flare.util.IValueProxy", size: 874},
  {name: "flare.util.math", size: null},
  {name: "flare.util.math.DenseMatrix", size: 3165},
  {name: "flare.util.math.IMatrix", size: 2815},
  {name: "flare.util.math.SparseMatrix", size: 3366},
  {name: "flare.util.Maths", size: 17705},
  {name: "flare.util.Orientation", size: 1486},
  {name: "flare.util.palette", size: null},
  {name: "flare.util.palette.ColorPalette", size: 6367},
  {name: "flare.util.palette.Palette", size: 1229},
  {name: "flare.util.palette.ShapePalette", size: 2059},
  {name: "flare.util.palette.SizePalette", size: 2291},
  {name: "flare.util.Property", size: 5559},
  {name: "flare.util.Shapes", size: 19118},
  {name: "flare.util.Sort", size: 6887},
  {name: "flare.util.Stats", size: 6557},
  {name: "flare.util.Strings", size: 22026},
  {name: "flare.vis", size: null},
  {name: "flare.vis.axis", size: null},
  {name: "flare.vis.axis.Axes", size: 1302},
  {name: "flare.vis.axis.Axis", size: 24593},
  {name: "flare.vis.axis.AxisGridLine", size: 652},
  {name: "flare.vis.axis.AxisLabel", size: 636},
  {name: "flare.vis.axis.CartesianAxes", size: 6703},
  {name: "flare.vis.controls", size: null},
  {name: "flare.vis.controls.AnchorControl", size: 2138},
  {name: "flare.vis.controls.ClickControl", size: 3824},
  {name: "flare.vis.controls.Control", size: 1353},
  {name: "flare.vis.controls.ControlList", size: 4665},
  {name: "flare.vis.controls.DragControl", size: 2649},
  {name: "flare.vis.controls.ExpandControl", size: 2832},
  {name: "flare.vis.controls.HoverControl", size: 4896},
  {name: "flare.vis.controls.IControl", size: 763},
  {name: "flare.vis.controls.PanZoomControl", size: 5222},
  {name: "flare.vis.controls.SelectionControl", size: 7862},
  {name: "flare.vis.controls.TooltipControl", size: 8435},
  {name: "flare.vis.data", size: null},
  {name: "flare.vis.data.Data", size: 20544},
  {name: "flare.vis.data.DataList", size: 19788},
  {name: "flare.vis.data.DataSprite", size: 10349},
  {name: "flare.vis.data.EdgeSprite", size: 3301},
  {name: "flare.vis.data.NodeSprite", size: 19382},
  {name: "flare.vis.data.render", size: null},
  {name: "flare.vis.data.render.ArrowType", size: 698},
  {name: "flare.vis.data.render.EdgeRenderer", size: 5569},
  {name: "flare.vis.data.render.IRenderer", size: 353},
  {name: "flare.vis.data.render.ShapeRenderer", size: 2247},
  {name: "flare.vis.data.ScaleBinding", size: 11275},
  {name: "flare.vis.data.Tree", size: 7147},
  {name: "flare.vis.data.TreeBuilder", size: 9930},
  {name: "flare.vis.events", size: null},
  {name: "flare.vis.events.DataEvent", size: 2313},
  {name: "flare.vis.events.SelectionEvent", size: 1880},
  {name: "flare.vis.events.TooltipEvent", size: 1701},
  {name: "flare.vis.events.VisualizationEvent", size: 1117},
  {name: "flare.vis.legend", size: null},
  {name: "flare.vis.legend.Legend", size: 20859},
  {name: "flare.vis.legend.LegendItem", size: 4614},
  {name: "flare.vis.legend.LegendRange", size: 10530},
  {name: "flare.vis.operator", size: null},
  {name: "flare.vis.operator.distortion", size: null},
  {name: "flare.vis.operator.distortion.BifocalDistortion", size: 4461},
  {name: "flare.vis.operator.distortion.Distortion", size: 6314},
  {name: "flare.vis.operator.distortion.FisheyeDistortion", size: 3444},
  {name: "flare.vis.operator.encoder", size: null},
  {name: "flare.vis.operator.encoder.ColorEncoder", size: 3179},
  {name: "flare.vis.operator.encoder.Encoder", size: 4060},
  {name: "flare.vis.operator.encoder.PropertyEncoder", size: 4138},
  {name: "flare.vis.operator.encoder.ShapeEncoder", size: 1690},
  {name: "flare.vis.operator.encoder.SizeEncoder", size: 1830},
  {name: "flare.vis.operator.filter", size: null},
  {name: "flare.vis.operator.filter.FisheyeTreeFilter", size: 5219},
  {name: "flare.vis.operator.filter.GraphDistanceFilter", size: 3165},
  {name: "flare.vis.operator.filter.VisibilityFilter", size: 3509},
  {name: "flare.vis.operator.IOperator", size: 1286},
  {name: "flare.vis.operator.label", size: null},
  {name: "flare.vis.operator.label.Labeler", size: 9956},
  {name: "flare.vis.operator.label.RadialLabeler", size: 3899},
  {name: "flare.vis.operator.label.StackedAreaLabeler", size: 3202},
  {name: "flare.vis.operator.layout", size: null},
  {name: "flare.vis.operator.layout.AxisLayout", size: 6725},
  {name: "flare.vis.operator.layout.BundledEdgeRouter", size: 3727},
  {name: "flare.vis.operator.layout.CircleLayout", size: 9317},
  {name: "flare.vis.operator.layout.CirclePackingLayout", size: 12003},
  {name: "flare.vis.operator.layout.DendrogramLayout", size: 4853},
  {name: "flare.vis.operator.layout.ForceDirectedLayout", size: 8411},
  {name: "flare.vis.operator.layout.IcicleTreeLayout", size: 4864},
  {name: "flare.vis.operator.layout.IndentedTreeLayout", size: 3174},
  {name: "flare.vis.operator.layout.Layout", size: 7881},
  {name: "flare.vis.operator.layout.NodeLinkTreeLayout", size: 12870},
  {name: "flare.vis.operator.layout.PieLayout", size: 2728},
  {name: "flare.vis.operator.layout.RadialTreeLayout", size: 12348},
  {name: "flare.vis.operator.layout.RandomLayout", size: 870},
  {name: "flare.vis.operator.layout.StackedAreaLayout", size: 9121},
  {name: "flare.vis.operator.layout.TreeMapLayout", size: 9191},
  {name: "flare.vis.operator.Operator", size: 2490},
  {name: "flare.vis.operator.OperatorList", size: 5248},
  {name: "flare.vis.operator.OperatorSequence", size: 4190},
  {name: "flare.vis.operator.OperatorSwitch", size: 2581},
  {name: "flare.vis.operator.SortOperator", size: 2023},
  {name: "flare.vis.Visualization", size: 16540},
]