Treemap charts

BinderScriptNotebook

Summary: This example shows how to create treemap charts in F#.

Treemap Chart is intended for the visualization of hierarchical data in the form of nested rectangles. Each level of such a tree structure is depicted as a colored rectangle, often called a branch, which contains other rectangles (leaves). The space inside each of the rectangles that compose a Treemap is highlighted based on the quantitative value in the corresponding data point.

Treemap example

This example shows the usage of some of the styling possibility using Chart.Treemap. For even more styling control, use the respective TraceStyle function TraceDomainStyle.Treemap

open Plotly.NET
open Plotly.NET.TraceObjects

let treemapStyled = 
    let labelsParents = [
        ("A",""), 20
        ("B",""), 1
        ("C",""), 2
        ("D",""), 3
        ("E",""), 4

        ("AA","A"), 15
        ("AB","A"), 5

        ("BA","B"), 1

        ("AAA", "AA"), 10
        ("AAB", "AA"), 5
    ]

    Chart.Treemap(
        labelsParents |> Seq.map fst,
        Values = (labelsParents |> Seq.map snd), 
        BranchValues = StyleParam.BranchValues.Total, // branch values are the total of their childrens values
        SectionColorScale = StyleParam.Colorscale.Viridis,
        ShowSectionColorScale = true,
        SectionOutlineColor = Color.fromKeyword Black,
        Tiling = TreemapTiling.init(Packing = StyleParam.TreemapTilingPacking.SliceDice)
    )
namespace Plotly
namespace Plotly.NET
namespace Plotly.NET.TraceObjects
val treemapStyled: GenericChart.GenericChart
val labelsParents: ((string * string) * int) list
type Chart = static member AnnotatedHeatmap: zData: seq<#seq<'a1>> * annotationText: seq<#seq<string>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?YGap: int * ?Text: 'a5 * ?MultiText: seq<'a5> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a5 :> IConvertible) + 1 overload static member Area: x: seq<#IConvertible> * y: seq<#IConvertible> * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?FillColor: Color * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Bar: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot: ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Text: 'a2 * ?MultiText: seq<'a2> * ?FillColor: Color * ?MarkerColor: Color * ?Marker: Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: BoxPoints * ?BoxMean: BoxMean * ?Jitter: float * ?PointPos: float * ?Orientation: Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: QuartileMethod * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 2 overloads static member Bubble: x: seq<#IConvertible> * y: seq<#IConvertible> * sizes: seq<int> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: seq<MarkerSymbol> * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) + 1 overload static member Candlestick: ``open`` : seq<#IConvertible> * high: seq<#IConvertible> * low: seq<#IConvertible> * close: seq<#IConvertible> * x: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Text: 'a5 * ?MultiText: seq<'a5> * ?Line: Line * ?IncreasingColor: Color * ?Increasing: FinanceMarker * ?DecreasingColor: Color * ?Decreasing: FinanceMarker * ?WhiskerWidth: float * ?UseDefaults: bool -> GenericChart (requires 'a5 :> IConvertible) + 1 overload static member Column: values: seq<#IConvertible> * ?Keys: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a2 * ?MultiText: seq<'a2> * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerPatternShape: PatternShape * ?MultiMarkerPatternShape: seq<PatternShape> * ?MarkerPattern: Pattern * ?Marker: Marker * ?Base: #IConvertible * ?Width: 'a4 * ?MultiWidth: seq<'a4> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?Y: seq<#IConvertible> * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?Transpose: bool * ?ContourLineColor: Color * ?ContourLineDash: DrawingStyle * ?ContourLineSmoothing: float * ?ContourLine: Line * ?ContoursColoring: ContourColoring * ?ContoursOperation: ConstraintOperation * ?ContoursType: ContourType * ?ShowContourLabels: bool * ?ContourLabelFont: Font * ?Contours: Contours * ?FillColor: Color * ?NContours: int * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a4 :> IConvertible) static member Funnel: x: seq<#IConvertible> * y: seq<#IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?Width: float * ?Offset: float * ?Text: 'a2 * ?MultiText: seq<'a2> * ?TextPosition: TextPosition * ?MultiTextPosition: seq<TextPosition> * ?Orientation: Orientation * ?AlignmentGroup: string * ?OffsetGroup: string * ?MarkerColor: Color * ?MarkerOutline: Line * ?Marker: Marker * ?TextInfo: TextInfo * ?ConnectorLineColor: Color * ?ConnectorLineStyle: DrawingStyle * ?ConnectorFillColor: Color * ?ConnectorLine: Line * ?Connector: FunnelConnector * ?InsideTextFont: Font * ?OutsideTextFont: Font * ?UseDefaults: bool -> GenericChart (requires 'a2 :> IConvertible) static member Heatmap: zData: seq<#seq<'a1>> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?X: seq<#IConvertible> * ?XGap: int * ?Y: seq<#IConvertible> * ?YGap: int * ?Text: 'a4 * ?MultiText: seq<'a4> * ?ColorBar: ColorBar * ?ColorScale: Colorscale * ?ShowScale: bool * ?ReverseScale: bool * ?ZSmooth: SmoothAlg * ?Transpose: bool * ?UseWebGL: bool * ?ReverseYAxis: bool * ?UseDefaults: bool -> GenericChart (requires 'a1 :> IConvertible and 'a4 :> IConvertible) + 1 overload ...
static member Chart.Treemap: labelsparents: seq<#System.IConvertible * #System.IConvertible> * ?Values: seq<#System.IConvertible> * ?Ids: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'e * ?MultiText: seq<'e> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?SectionColors: seq<Color> * ?SectionColorScale: StyleParam.Colorscale * ?ShowSectionColorScale: bool * ?ReverseSectionColorScale: bool * ?SectionOutlineColor: Color * ?SectionOutlineWidth: float * ?SectionOutlineMultiWidth: seq<float> * ?SectionOutline: Line * ?Marker: Marker * ?TextInfo: StyleParam.TextInfo * ?BranchValues: StyleParam.BranchValues * ?Count: string * ?Tiling: TreemapTiling * ?PathBar: Pathbar * ?Root: TreemapRoot * ?Level: string * ?MaxDepth: int * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'e :> System.IConvertible)
static member Chart.Treemap: labels: seq<#System.IConvertible> * parents: seq<#System.IConvertible> * ?Values: seq<#System.IConvertible> * ?Ids: seq<#System.IConvertible> * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: seq<float> * ?Text: 'a4 * ?MultiText: seq<'a4> * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: seq<StyleParam.TextPosition> * ?SectionColors: seq<Color> * ?SectionColorScale: StyleParam.Colorscale * ?ShowSectionColorScale: bool * ?ReverseSectionColorScale: bool * ?SectionOutlineColor: Color * ?SectionOutlineWidth: float * ?SectionOutlineMultiWidth: seq<float> * ?SectionOutline: Line * ?Marker: Marker * ?TextInfo: StyleParam.TextInfo * ?BranchValues: StyleParam.BranchValues * ?Count: string * ?Tiling: TreemapTiling * ?PathBar: Pathbar * ?Root: TreemapRoot * ?Level: string * ?MaxDepth: int * ?UseDefaults: bool -> GenericChart.GenericChart (requires 'a4 :> System.IConvertible)
module Seq from Microsoft.FSharp.Collections
<summary>Contains operations for working with values of type <see cref="T:Microsoft.FSharp.Collections.seq`1" />.</summary>
val map: mapping: ('T -> 'U) -> source: seq<'T> -> seq<'U>
<summary>Builds a new collection whose elements are the results of applying the given function to each of the elements of the collection. The given function will be applied as elements are demanded using the <c>MoveNext</c> method on enumerators retrieved from the object.</summary>
<remarks>The returned sequence may be passed between threads safely. However, individual IEnumerator values generated from the returned sequence should not be accessed concurrently.</remarks>
<param name="mapping">A function to transform items from the input sequence.</param>
<param name="source">The input sequence.</param>
<returns>The result sequence.</returns>
<exception cref="T:System.ArgumentNullException">Thrown when the input sequence is null.</exception>
<example id="item-1"><code lang="fsharp"> let inputs = ["a"; "bbb"; "cc"] inputs |&gt; Seq.map (fun x -&gt; x.Length) </code> Evaluates to a sequence yielding the same results as <c>seq { 1; 3; 2 }</c></example>
val fst: tuple: ('T1 * 'T2) -> 'T1
<summary>Return the first element of a tuple, <c>fst (a,b) = a</c>.</summary>
<param name="tuple">The input tuple.</param>
<returns>The first value.</returns>
<example id="fst-example"><code lang="fsharp"> fst ("first", 2) // Evaluates to "first" </code></example>
val snd: tuple: ('T1 * 'T2) -> 'T2
<summary>Return the second element of a tuple, <c>snd (a,b) = b</c>.</summary>
<param name="tuple">The input tuple.</param>
<returns>The second value.</returns>
<example id="snd-example"><code lang="fsharp"> snd ("first", 2) // Evaluates to 2 </code></example>
module StyleParam from Plotly.NET
type BranchValues = | Remainder | Total member Convert: unit -> obj override ToString: unit -> string static member convert: (BranchValues -> obj) static member toString: (BranchValues -> string)
union case StyleParam.BranchValues.Total: StyleParam.BranchValues
type Colorscale = | Custom of seq<float * Color> | RdBu | Earth | Blackbody | YIOrRd | YIGnBu | Bluered | Portland | Electric | Jet ... member Convert: unit -> obj static member convert: (Colorscale -> obj)
<summary> The colorscale must be a collection containing a mapping of a normalized value (between 0.0 and 1.0) to it's color. At minimum, a mapping for the lowest (0.0) and highest (1.0) values are required. </summary>
union case StyleParam.Colorscale.Viridis: StyleParam.Colorscale
type Color = override Equals: other: obj -> bool override GetHashCode: unit -> int static member fromARGB: a: int -> r: int -> g: int -> b: int -> Color static member fromColorScaleValues: c: seq<#IConvertible> -> Color static member fromColors: c: seq<Color> -> Color static member fromHex: s: string -> Color static member fromKeyword: c: ColorKeyword -> Color static member fromRGB: r: int -> g: int -> b: int -> Color static member fromString: c: string -> Color member Value: obj
<summary> Plotly color can be a single color, a sequence of colors, or a sequence of numeric values referencing the color of the colorscale obj </summary>
static member Color.fromKeyword: c: ColorKeyword -> Color
union case ColorKeyword.Black: ColorKeyword
Multiple items
type TreemapTiling = inherit DynamicObj new: unit -> TreemapTiling static member init: ?Packing: TreemapTilingPacking * ?SquarifyRatio: float * ?Flip: TilingFlip * ?Pad: float -> TreemapTiling static member style: ?Packing: TreemapTilingPacking * ?SquarifyRatio: float * ?Flip: TilingFlip * ?Pad: float -> (TreemapTiling -> TreemapTiling)

--------------------
new: unit -> TreemapTiling
static member TreemapTiling.init: ?Packing: StyleParam.TreemapTilingPacking * ?SquarifyRatio: float * ?Flip: StyleParam.TilingFlip * ?Pad: float -> TreemapTiling
type TreemapTilingPacking = | Squarify | Binary | Dice | Slice | SliceDice member Convert: unit -> obj override ToString: unit -> string static member convert: (TreemapTilingPacking -> obj) static member toString: (TreemapTilingPacking -> string)
union case StyleParam.TreemapTilingPacking.SliceDice: StyleParam.TreemapTilingPacking
module GenericChart from Plotly.NET
<summary> Module to represent a GenericChart </summary>
val toChartHTML: gChart: GenericChart.GenericChart -> string
<summary> Converts a GenericChart to it HTML representation. The div layer has a default size of 600 if not specified otherwise. </summary>