Logo Plotly.NET

Icicle charts

Binder  Script  Notebook

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

Icicle charts visualize hierarchical data using rectangular sectors that cascade from root to leaves in one of four directions: up, down, left, or right. Similar to Sunburst charts and Treemaps charts, the hierarchy is defined by labels and parents attributes. Click on one sector to zoom in/out, which also displays a pathbar on the top of your icicle. To zoom out, you can click the parent sector or click the pathbar, as well.

open Plotly.NET
open Plotly.NET.TraceObjects

let character =
    [ "Eve"; "Cain"; "Seth"; "Enos"; "Noam"; "Abel"; "Awan"; "Enoch"; "Azura" ]

let parent = [ ""; "Eve"; "Eve"; "Seth"; "Seth"; "Eve"; "Eve"; "Awan"; "Eve" ]

let icicle =
    Chart.Icicle(
        labels = character,
        parents = parent,
        ShowSectionColorScale = true,
        SectionColorScale = StyleParam.Colorscale.Viridis,
        TilingOrientation = StyleParam.Orientation.Vertical,
        TilingFlip = StyleParam.TilingFlip.Y,
        PathBarEdgeShape = StyleParam.PathbarEdgeShape.BackSlash
    )

More styled example

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

let icicleStyled =
    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.Icicle(
        labelsparents = (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 = IcicleTiling.init (Flip = StyleParam.TilingFlip.XY),
        UseDefaults = false
    )
namespace Plotly
namespace Plotly.NET
module Defaults from Plotly.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
val mutable DefaultDisplayOptions: Plotly.NET.DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...

--------------------
new: unit -> Plotly.NET.DisplayOptions
static member Plotly.NET.DisplayOptions.init: ?DocumentTitle: string * ?DocumentCharset: string * ?DocumentDescription: string * ?DocumentFavicon: Giraffe.ViewEngine.HtmlElements.XmlNode * ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?ChartDescription: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: Plotly.NET.PlotlyJSReference -> Plotly.NET.DisplayOptions
type PlotlyJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
namespace Plotly.NET.TraceObjects
val character: string list
val parent: string list
val icicle: GenericChart
type Chart = static member Bubble: x: #IConvertible seq * y: #IConvertible seq * sizes: int seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Line: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Point: x: #IConvertible seq * y: #IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Range: x: #IConvertible seq * y: #IConvertible seq * upper: #IConvertible seq * lower: #IConvertible seq * mode: Mode * ?Name: string * ?GroupName: string * ?ShowMarkers: bool * ?ShowLegend: bool * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?UpperMarker: Marker * ?LowerMarker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?UpperLine: Line * ?LowerLine: Line * ?RangeColor: Color * ?RangePattern: Pattern * ?UpperText: 'f * ?MultiUpperText: 'f seq * ?LowerText: 'g * ?MultiLowerText: 'g seq * ?TextFont: Font * ?LowerName: string * ?UpperName: string * ?UseDefaults: bool -> GenericChart (requires 'e :> IConvertible and 'f :> IConvertible and 'g :> IConvertible) + 2 overloads static member Scatter: ?X: 'a seq * ?XEncoded: EncodedTypedArray * ?MultiX: 'a seq seq * ?Y: 'b seq * ?YEncoded: EncodedTypedArray * ?MultiY: 'b seq seq * ?Mode: Mode * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> IConvertible and 'b :> IConvertible and 'c :> IConvertible) + 3 overloads static member Spline: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Smoothing: float * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads
static member Chart.Icicle: labelsparents: (#System.IConvertible * #System.IConvertible) seq * ?Values: #System.IConvertible seq * ?Ids: #System.IConvertible seq * ?Name: string * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?SectionColors: Color seq * ?SectionColorScale: StyleParam.Colorscale * ?ShowSectionColorScale: bool * ?ReverseSectionColorScale: bool * ?SectionOutlineColor: Color * ?SectionOutlineWidth: float * ?SectionOutlineMultiWidth: float seq * ?SectionOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: Pattern * ?Marker: Marker * ?BranchValues: StyleParam.BranchValues * ?Count: StyleParam.IcicleCount * ?TilingOrientation: StyleParam.Orientation * ?TilingFlip: StyleParam.TilingFlip * ?Tiling: IcicleTiling * ?PathBarEdgeShape: StyleParam.PathbarEdgeShape * ?PathBar: Pathbar * ?TextInfo: StyleParam.TextInfo * ?Root: IcicleRoot * ?Level: string * ?MaxDepth: int * ?UseDefaults: bool -> GenericChart (requires 'e :> System.IConvertible)
static member Chart.Icicle: labelsEncoded: EncodedTypedArray * parentsEncoded: EncodedTypedArray * ?valuesEncoded: EncodedTypedArray * ?idsEncoded: EncodedTypedArray * ?Name: string * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'a * ?MultiText: 'a seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?SectionColors: Color seq * ?SectionColorScale: StyleParam.Colorscale * ?ShowSectionColorScale: bool * ?ReverseSectionColorScale: bool * ?SectionOutlineColor: Color * ?SectionOutlineWidth: float * ?SectionOutlineMultiWidth: float seq * ?SectionOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: Pattern * ?Marker: Marker * ?BranchValues: StyleParam.BranchValues * ?Count: StyleParam.IcicleCount * ?TilingOrientation: StyleParam.Orientation * ?TilingFlip: StyleParam.TilingFlip * ?Tiling: IcicleTiling * ?PathBarEdgeShape: StyleParam.PathbarEdgeShape * ?PathBar: Pathbar * ?TextInfo: StyleParam.TextInfo * ?Root: IcicleRoot * ?Level: string * ?MaxDepth: int * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.Icicle: labels: #System.IConvertible seq * parents: #System.IConvertible seq * ?Values: #System.IConvertible seq * ?Ids: #System.IConvertible seq * ?Name: string * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: StyleParam.TextPosition * ?MultiTextPosition: StyleParam.TextPosition seq * ?SectionColors: Color seq * ?SectionColorScale: StyleParam.Colorscale * ?ShowSectionColorScale: bool * ?ReverseSectionColorScale: bool * ?SectionOutlineColor: Color * ?SectionOutlineWidth: float * ?SectionOutlineMultiWidth: float seq * ?SectionOutline: Line * ?MarkerPatternShape: StyleParam.PatternShape * ?MultiMarkerPatternShape: StyleParam.PatternShape seq * ?MarkerPattern: Pattern * ?Marker: Marker * ?BranchValues: StyleParam.BranchValues * ?Count: StyleParam.IcicleCount * ?TilingOrientation: StyleParam.Orientation * ?TilingFlip: StyleParam.TilingFlip * ?Tiling: IcicleTiling * ?PathBarEdgeShape: StyleParam.PathbarEdgeShape * ?PathBar: Pathbar * ?TextInfo: StyleParam.TextInfo * ?Root: IcicleRoot * ?Level: string * ?MaxDepth: int * ?UseDefaults: bool -> GenericChart (requires 'e :> System.IConvertible)
module StyleParam from Plotly.NET
type Colorscale = | Custom of (float * Color) seq | RdBu | Earth | Blackbody | YIOrRd | YIGnBu | Bluered | Portland | Electric | Jet ... member Convert: unit -> objnull static member convert: (Colorscale -> objnull)
<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 Orientation = | Horizontal | Vertical member Convert: unit -> objnull override ToString: unit -> string static member convert: (Orientation -> objnull) static member toString: (Orientation -> string)
union case StyleParam.Orientation.Vertical: StyleParam.Orientation
type TilingFlip = | X | Y | XY member Convert: unit -> objnull override ToString: unit -> string static member convert: (TilingFlip -> objnull) static member toString: (TilingFlip -> string)
union case StyleParam.TilingFlip.Y: StyleParam.TilingFlip
type PathbarEdgeShape = | ArrowRight | ArrowLeft | Straight | Slash | BackSlash member Convert: unit -> objnull override ToString: unit -> string static member convert: (PathbarEdgeShape -> objnull) static member toString: (PathbarEdgeShape -> string)
union case StyleParam.PathbarEdgeShape.BackSlash: StyleParam.PathbarEdgeShape
type GenericChart = | Chart of data: Trace * layout: Layout * config: Config * displayOpts: DisplayOptions | MultiChart of data: Trace list * layout: Layout * config: Config * displayOpts: DisplayOptions static member addConfig: config: Config -> gChart: GenericChart -> GenericChart static member addDisplayOptions: displayOpts: DisplayOptions -> gChart: GenericChart -> GenericChart static member addLayout: layout: Layout -> gChart: GenericChart -> GenericChart static member combine: gCharts: GenericChart seq -> GenericChart static member countTrace: gChart: GenericChart -> int static member existsTrace: predicate: (Trace -> bool) -> gChart: GenericChart -> bool static member fromChartDTO: dto: ChartDTO -> GenericChart static member fromFigure: fig: Figure -> GenericChart static member getConfig: gChart: GenericChart -> Config static member getDisplayOptions: gChart: GenericChart -> DisplayOptions ...
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>
static member GenericChart.toChartHTML: gChart: GenericChart -> string
val icicleStyled: GenericChart
val labelsParents: ((string * string) * int) list
module Seq from Microsoft.FSharp.Collections
val map: mapping: ('T -> 'U) -> source: 'T seq -> 'U seq
val fst: tuple: ('T1 * 'T2) -> 'T1
val snd: tuple: ('T1 * 'T2) -> 'T2
type BranchValues = | Remainder | Total member Convert: unit -> objnull override ToString: unit -> string static member convert: (BranchValues -> objnull) static member toString: (BranchValues -> string)
union case StyleParam.BranchValues.Total: StyleParam.BranchValues
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: #IConvertible seq -> Color static member fromColors: c: Color seq -> 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 IcicleTiling = inherit DynamicObj new: unit -> IcicleTiling static member init: ?Flip: TilingFlip * ?Orientation: Orientation * ?Pad: int -> IcicleTiling static member style: ?Flip: TilingFlip * ?Orientation: Orientation * ?Pad: int -> (IcicleTiling -> IcicleTiling)

--------------------
new: unit -> IcicleTiling
static member IcicleTiling.init: ?Flip: StyleParam.TilingFlip * ?Orientation: StyleParam.Orientation * ?Pad: int -> IcicleTiling
union case StyleParam.TilingFlip.XY: StyleParam.TilingFlip

Type something to start searching.