Icicle charts

BinderScriptNotebook

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(
        character,
        parent,
        ShowScale = true,
        ColorScale = StyleParam.Colorscale.Viridis,
        TilingOrientation = StyleParam.Orientation.Vertical, // wether the icicles will grow in the vertical (up/down) or horizontal (left/right) direction
        TilingFlip = StyleParam.TilingFlip.Y, // flip in the Y direction (grow up instead of down)
        PathBarEdgeShape = StyleParam.PathbarEdgeShape.BackSlash
    )
namespace Plotly
namespace Plotly.NET
namespace Plotly.NET.TraceObjects
val character : string list
val parent : string list
val icicle : GenericChart.GenericChart
type Chart = static member Area : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowMarkers:bool * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Dash:DrawingStyle * ?Width:float -> GenericChart + 1 overload static member Bar : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Pattern:Pattern * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member BoxPlot : ?x:'a0 * ?y:'a1 * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Fillcolor:Color * ?Opacity:float * ?Whiskerwidth:'a2 * ?Boxpoints:Boxpoints * ?Boxmean:BoxMean * ?Jitter:'a3 * ?Pointpos:'a4 * ?Orientation:Orientation * ?Marker:Marker * ?Line:Line * ?Alignmentgroup:'a5 * ?Offsetgroup:'a6 * ?Notched:bool * ?NotchWidth:float * ?QuartileMethod:QuartileMethod -> GenericChart + 1 overload static member Bubble : x:seq<#IConvertible> * y:seq<#IConvertible> * sizes:seq<int> * ?Name:string * ?ShowLegend:bool * ?MarkerSymbol:MarkerSymbol * ?Color:Color * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?StackGroup:string * ?Orientation:Orientation * ?GroupNorm:GroupNorm * ?UseWebGL:bool -> GenericChart + 1 overload static member Candlestick : open:seq<#IConvertible> * high:seq<#IConvertible> * low:seq<#IConvertible> * close:seq<#IConvertible> * x:seq<#IConvertible> * ?Increasing:Line * ?Decreasing:Line * ?WhiskerWidth:float * ?Line:Line * ?XCalendar:Calendar -> GenericChart + 1 overload static member Column : values:seq<#IConvertible> * ?Keys:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Color:Color * ?Pattern:Pattern * ?PatternShape:PatternShape * ?MultiPatternShape:seq<PatternShape> * ?Base:#IConvertible * ?Width:'a3 * ?MultiWidth:seq<'a3> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Text:'a4 * ?MultiText:seq<'a4> * ?TextPosition:TextPosition * ?MultiTextPosition:seq<TextPosition> * ?TextFont:Font * ?Marker:Marker -> GenericChart (requires 'a3 :> IConvertible and 'a4 :> IConvertible) + 1 overload static member Contour : data:seq<#seq<'a1>> * ?X:seq<#IConvertible> * ?Y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?zSmooth:SmoothAlg * ?ColorBar:'a5 -> GenericChart (requires 'a1 :> IConvertible) static member Funnel : x:seq<#IConvertible> * y:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Labels:seq<#IConvertible> * ?TextPosition:TextPosition * ?TextFont:Font * ?Color:Color * ?Line:Line * ?x0:'a3 * ?dX:float * ?y0:'a4 * ?dY:float * ?Width:float * ?Offset:float * ?Orientation:Orientation * ?Alignmentgroup:string * ?Offsetgroup:string * ?Cliponaxis:bool * ?Connector:FunnelConnector * ?Insidetextfont:Font * ?Outsidetextfont:Font -> GenericChart static member Heatmap : data:seq<#seq<'a1>> * ?ColNames:seq<#IConvertible> * ?RowNames:seq<#IConvertible> * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Colorscale:Colorscale * ?Showscale:'a4 * ?Xgap:'a5 * ?Ygap:'a6 * ?zSmooth:SmoothAlg * ?ColorBar:'a7 * ?UseWebGL:bool -> GenericChart (requires 'a1 :> IConvertible) static member Histogram : data:seq<#IConvertible> * ?Orientation:Orientation * ?Name:string * ?ShowLegend:bool * ?Opacity:float * ?Color:Color * ?HistNorm:HistNorm * ?HistFunc:HistFunc * ?nBinsx:int * ?nBinsy:int * ?Xbins:Bins * ?Ybins:Bins * ?xError:'a1 * ?yError:'a2 -> GenericChart ...
static member Chart.Icicle : labelsParents:seq<#System.IConvertible * #System.IConvertible> * ?Name:string * ?ShowLegend:bool * ?Values:seq<#System.IConvertible> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Color:Color * ?ColorScale:StyleParam.Colorscale * ?ShowScale:bool * ?Marker:Marker * ?Text:'a3 * ?MultiText:seq<'a3> * ?TextPosition:StyleParam.TextPosition * ?MultiTextPosition:seq<StyleParam.TextPosition> * ?Domain:LayoutObjects.Domain * ?BranchValues:StyleParam.BranchValues * ?Count:StyleParam.IcicleCount * ?TilingOrientation:StyleParam.Orientation * ?TilingFlip:StyleParam.TilingFlip * ?Tiling:IcicleTiling * ?PathBarEdgeShape:StyleParam.PathbarEdgeShape * ?PathBar:Pathbar -> GenericChart.GenericChart (requires 'a3 :> System.IConvertible)
static member Chart.Icicle : labels:seq<#System.IConvertible> * parents:seq<#System.IConvertible> * ?Name:string * ?ShowLegend:bool * ?Values:seq<#System.IConvertible> * ?Opacity:float * ?MultiOpacity:seq<float> * ?Color:Color * ?ColorScale:StyleParam.Colorscale * ?ShowScale:bool * ?Marker:Marker * ?Text:'d * ?MultiText:seq<'d> * ?TextPosition:StyleParam.TextPosition * ?MultiTextPosition:seq<StyleParam.TextPosition> * ?Domain:LayoutObjects.Domain * ?BranchValues:StyleParam.BranchValues * ?Count:StyleParam.IcicleCount * ?TilingOrientation:StyleParam.Orientation * ?TilingFlip:StyleParam.TilingFlip * ?Tiling:IcicleTiling * ?PathBarEdgeShape:StyleParam.PathbarEdgeShape * ?PathBar:Pathbar -> GenericChart.GenericChart (requires 'd :> System.IConvertible)
module StyleParam from Plotly.NET
type Colorscale = | Custom of seq<float * string> | 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 Orientation = | Horizontal | Vertical member Convert : unit -> obj override ToString : unit -> string static member convert : (Orientation -> obj) static member toString : (Orientation -> string)
union case StyleParam.Orientation.Vertical: StyleParam.Orientation
type TilingFlip = | X | Y | XY member Convert : unit -> obj override ToString : unit -> string static member convert : (TilingFlip -> obj) static member toString : (TilingFlip -> string)
union case StyleParam.TilingFlip.Y: StyleParam.TilingFlip
type PathbarEdgeShape = | ArrowRight | ArrowLeft | Straight | Slash | BackSlash member Convert : unit -> obj override ToString : unit -> string static member convert : (PathbarEdgeShape -> obj) static member toString : (PathbarEdgeShape -> string)
union case StyleParam.PathbarEdgeShape.BackSlash: StyleParam.PathbarEdgeShape
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>