Treemap Component
The Treemap
Svelte component from the Svizzle library is designed for
visualizing hierarchical data using a treemap layout.
Overview
The Treemap
component uses a treemap layout to represent hierarchical data as
a set of nested rectangles. Each branch of the tree is given a rectangle, which
is then tiled with smaller rectangles representing sub-branches.
Note that in this version the Treemap
doesn't support hierarchies with more
than one level of depth as we are for now porting it as-is from a project where
we didn't have a deeper data structure.
Installation
To use the Treemap
component, first install the Svizzle library:
npm install @svizzle/hierarchy
Usage
Here's a basic example of how to use the Treemap
component in your Svelte
application:
<script>
import {Treemap} from '@svizzle/ui';
// Import or define your data
const items = [/* your hierarchical data */];
</script>
<Treemap {items} />
Props
-
items
: The hierarchical data to be displayed. This should be an array of objects. -
geometry
: Optional. An object to customize the layout of the treemap, including padding and text positioning. -
keyAccessor
: Optional. A function to access the key from each data item (default isgetKey
). -
valueAccessor
: Optional. A function to access the value from each data item (default isgetValue
). -
keyToColorFn
: Optional. A function to determine the color of each rectangle based on its key. -
keyToColorLabelFn
: Optional. A function to determine the color of the label text for each rectangle.
Features
- Responsive Design: Automatically adjusts to the container's size.
- Customizable Layout: Control over text positioning and rectangle padding.
- Interactive: Dispatches events for mouse and touch interactions on the treemap leaves.
- Color Customization: Functions to define custom colors for rectangles and labels.
Events
The component dispatches several events for interaction:
-
leafHovered
: Fired when a leaf is hovered over. -
leafExited
: Fired when the mouse exits a leaf. -
leafTouchStarted
: Fired when a touch interaction starts on a leaf. -
leafTouchEnded
: Fired when a touch interaction ends on a leaf.