Sankey charts
Summary: This example shows how to create sankey charts in F#.
Sankey charts are a visualization of multiple, linked graphs layed out linearly. These are usually used to depict flow between nodes or stations. To create Sankey, a set of nodes and links between them are required. These are created using the provided Node and Link structures.
open Plotly.NET
let sankey1 =
Chart.Sankey(
nodeLabels = [ "A1"; "A2"; "B1"; "B2"; "C1"; "C2"; "D1" ],
linkedNodeIds =
[ // Edgelist, toupling sourceIndex => targetIndex of the link
0, 2
0, 3
1, 3
2, 4
3, 4
3, 5
4, 6
5, 6 ],
NodeOutlineColor = Color.fromKeyword Black,
NodeOutlineWidth = 1.,
linkValues = [ 8; 4; 2; 7; 3; 2; 5; 2 ],
LinkColor =
Color.fromColors
[ Color.fromHex "#828BFB"
Color.fromHex "#828BFB"
Color.fromHex "#F27762"
Color.fromHex "#33D6AB"
Color.fromHex "#BC82FB"
Color.fromHex "#BC82FB"
Color.fromHex "#FFB47B"
Color.fromHex "#47DCF5" ],
LinkOutlineColor = Color.fromKeyword Black,
LinkOutlineWidth = 1.,
UseDefaults = false
)
Node alignment
The NodeAlign parameter controls how nodes are aligned horizontally. The available options are
Left, Right, Center, and Justify (the default).
Use the NodeAlign parameter on Chart.Sankey to apply alignment via the convenience overload,
or pass Align to SankeyNodes.init directly when building nodes manually:
let sankeyAligned =
Chart.Sankey(
nodeLabels = [ "Source A"; "Source B"; "Sink" ],
linkedNodeIds = [ 0, 2; 1, 2 ],
linkValues = [ 8; 4 ],
NodeAlign = StyleParam.SankeyNodeAlign.Left,
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>
<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
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>
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
val sankey1: 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.Sankey: nodes: TraceObjects.SankeyNodes * links: TraceObjects.SankeyLinks * ?Name: string * ?Ids: #System.IConvertible seq * ?Orientation: StyleParam.Orientation * ?TextFont: Font * ?Arrangement: StyleParam.CategoryArrangement * ?ValueFormat: string * ?ValueSuffix: string * ?UseDefaults: bool -> GenericChart
static member Chart.Sankey: nodeLabels: string seq * linkedNodeIds: (int * int) seq * linkValues: #System.IConvertible seq * ?NodeColor: Color * ?NodeOutlineColor: Color * ?NodeOutlineWidth: float * ?NodeThickness: int * ?NodeGroups: #seq<int> seq * ?LinkColor: Color * ?LinkColorScales: StyleParam.Colorscale seq * ?LinkOutlineColor: Color * ?LinkOutlineWidth: float * ?LinkLabels: string seq * ?Name: string * ?Ids: #System.IConvertible seq * ?Orientation: StyleParam.Orientation * ?TextFont: Font * ?Arrangement: StyleParam.CategoryArrangement * ?NodeAlign: StyleParam.SankeyNodeAlign * ?ValueFormat: string * ?ValueSuffix: string * ?UseDefaults: bool -> GenericChart
static member Chart.Sankey: nodeLabels: string seq * linkedNodeIds: (int * int) seq * linkValues: #System.IConvertible seq * ?NodeColor: Color * ?NodeOutlineColor: Color * ?NodeOutlineWidth: float * ?NodeThickness: int * ?NodeGroups: #seq<int> seq * ?LinkColor: Color * ?LinkColorScales: StyleParam.Colorscale seq * ?LinkOutlineColor: Color * ?LinkOutlineWidth: float * ?LinkLabels: string seq * ?Name: string * ?Ids: #System.IConvertible seq * ?Orientation: StyleParam.Orientation * ?TextFont: Font * ?Arrangement: StyleParam.CategoryArrangement * ?NodeAlign: StyleParam.SankeyNodeAlign * ?ValueFormat: string * ?ValueSuffix: string * ?UseDefaults: bool -> GenericChart
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>
<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
static member Color.fromColors: c: Color seq -> Color
static member Color.fromHex: s: string -> Color
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>
<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 sankeyAligned: GenericChart
module StyleParam
from Plotly.NET
type SankeyNodeAlign =
| Left
| Right
| Center
| Justify
member Convert: unit -> objnull
override ToString: unit -> string
static member convert: (SankeyNodeAlign -> objnull)
static member toString: (SankeyNodeAlign -> string)
union case StyleParam.SankeyNodeAlign.Left: StyleParam.SankeyNodeAlign
Plotly.NET