Charts — Circle Pack — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/circle-pack

CirclePack

charts

import { CirclePack } from "semiotic"

Wraps: StreamNetworkFrame

CirclePack visualizes hierarchical data as nested circles. Each circle's area is proportional to its value, and nesting shows the hierarchy. It wrapsStreamNetworkFrame withnetworkType="circlepack". UsecircleOpacity to control transparency so nested circles remain visible.

Quick Start

Pass hierarchical data with children arrays andvalue fields on leaf nodes.

import { CirclePack } from "semiotic" const frameProps = { /* --- Data --- */ data: { name: "Languages", children: [ { name: "Frontend", children: [ { name: "JavaScript", value: 300 }, { name: "TypeScript", value: 250 }, { name: "CSS", value: 120 } ]}, { name: "Backend", children: [ { name: "Python", value: 280 }, { name: "Go", value: 180 }, { name: "Rust", value: 100 }, { name: "Java", value: 200 } ]}, { name: "Data", children: [ { name: "SQL", value: 220 }, { name: "R", value: 90 } ]} ] }, /* --- Process --- */ valueAccessor: "value", nodeIdAccessor: "name", /* --- Customize --- */ colorByDepth: true } export default () => { return <CirclePack {...frameProps} /> }

Examples

Color by Name

Use colorBy to assign colors based on a data field.

import { CirclePack } from "semiotic" const frameProps = { /* --- Data --- */ data: hierarchyData, /* --- Process --- */ valueAccessor: "value", nodeIdAccessor: "name", /* --- Customize --- */ colorBy: "name", circleOpacity: 0.5 } export default () => { return <CirclePack {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	object	Yes	—	Hierarchical data structure with children and values.
`childrenAccessor`	string \| function	—	`"children"`	Field name or function to access children array.
`valueAccessor`	string \| function	—	`"value"`	Field name or function to access node value for sizing.
`nodeIdAccessor`	string \| function	—	`"name"`	Field name or function to access node identifier.
`colorBy`	string \| function	—	—	Field name or function to determine node color.
`colorScheme`	string \| array	—	`"category10"`	Color scheme for nodes or custom colors array.
`colorByDepth`	boolean	—	`false`	Color nodes by hierarchy depth level.
`showLabels`	boolean	—	`true`	Show labels on circles.
`nodeLabel`	string \| function	—	`nodeIdAccessor`	Node label accessor.
`circleOpacity`	number	—	`0.7`	Circle fill opacity (helps see nesting).
`enableHover`	boolean	—	`true`	Enable hover annotations.
`tooltip`	object \| function	—	—	Tooltip configuration or render function.
`width`	number	—	`600`	Chart width in pixels.
`height`	number	—	`600`	Chart height in pixels.
`margin`	object	—	`{ top: 10, bottom: 10, left: 10, right: 10 }`	Margin around the chart area.
`title`	string	—	—	Chart title displayed at the top.
`frameProps`	object	—	—	Additional StreamNetworkFrame props for advanced customization.

Graduating to the Frame

For full control, useStreamNetworkFrame directly withnetworkType={{ type: "circlepack" }}.

Chart (simple)

JSX

import { CirclePack } from "semiotic" <CirclePack data={hierarchyData} valueAccessor="value" colorByDepth circleOpacity={0.6} />

Frame (full control)

JSX

import { StreamNetworkFrame } from "semiotic" <StreamNetworkFrame edges={hierarchyData} networkType={{ type: "circlepack" }} nodeIDAccessor="name" nodeStyle={d => ({ fill: colorScale(d.depth), fillOpacity: 0.6, stroke: "#fff" })} hierarchyChildren={d => d.children} hierarchySum={d => d.value} hoverAnnotation={true} size={[600, 600]} />

Treemap — nested rectangles as an alternative hierarchical layout
TreeDiagram — node-link diagrams for showing structural relationships
StreamNetworkFrame — the underlying Frame with full control over every rendering detail