Skip to content

Commit 70b86d0

Browse files
kMutagenekMutagene
committed
#42 Add Treemap Chart
1 parent 3c6cd67 commit 70b86d0

File tree

7 files changed

+278
-1
lines changed

7 files changed

+278
-1
lines changed

‎src/FSharp.Plotly/Chart.fs‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1316,3 +1316,56 @@ type Chart =
13161316
)
13171317
|> TraceStyle.Marker(?Colors=Colors,?Colorbar=Colorbar)
13181318
|> GenericChart.ofTraceObject
1319+
1320+
1321+
/// Creates a treemap chart. Treemap charts visualize hierarchical data using nested rectangles. Same as Sunburst the hierarchy is defined by labels and parents attributes. Click on one sector to zoom in/out, which also displays a pathbar in the upper-left corner of your treemap. To zoom out you can use the path bar as well.
1322+
///
1323+
/// Parameters:
1324+
///
1325+
/// labels: Sets the labels of each of the sectors.
1326+
///
1327+
/// parents: Sets the parent sectors for each of the sectors. Empty string items '' are understood to reference the root node in the hierarchy. If `ids` is filled, `parents` items are understood to be "ids" themselves. When `ids` is not set, plotly attempts to find matching items in `labels`, but beware they must be unique.
1328+
///
1329+
/// Ids: Assigns id labels to each datum. These ids for object constancy of data points during animation.
1330+
///
1331+
/// Values: Sets the values associated with each of the sectors. Use with `branchvalues` to determine how the values are summed.
1332+
///
1333+
/// Text: Sets text elements associated with each sector. If trace `textinfo` contains a "text" flag, these elements will be seen on the chart. If trace `hoverinfo` contains a "text" flag and "hovertext" is not set, these elements will be seen in the hover labels.
1334+
///
1335+
/// Branchvalues: Determines how the items in `values` are summed. When set to "total", items in `values` are taken to be value of all its descendants. When set to "remainder", items in `values` corresponding to the root and the branches sectors are taken to be the extra part not part of the sum of the values at their leaves.
1336+
///
1337+
/// Level: Sets the level from which this trace hierarchy is rendered. Set `level` to `''` to start from the root node in the hierarchy. Must be an "id" if `ids` is filled in, otherwise plotly attempts to find a matching item in `labels`.
1338+
///
1339+
/// Maxdepth: Sets the number of rendered sectors from any given `level`. Set `maxdepth` to "-1" to render all the levels in the hierarchy.
1340+
///
1341+
/// Colorbar: Sets the Colorbar for the chart
1342+
///
1343+
///Colors: Sets the color of each sector of this trace. If not specified, the default trace color set is used to pick the sector colors.
1344+
static member Treemap(labels,parents,
1345+
[<Optional;DefaultParameterValue(null)>]?Ids,
1346+
[<Optional;DefaultParameterValue(null)>]?Values ,
1347+
[<Optional;DefaultParameterValue(null)>]?Text ,
1348+
[<Optional;DefaultParameterValue(null)>]?Branchvalues ,
1349+
[<Optional;DefaultParameterValue(null)>]?Tiling ,
1350+
[<Optional;DefaultParameterValue(null)>]?PathBar ,
1351+
[<Optional;DefaultParameterValue(null)>]?Level ,
1352+
[<Optional;DefaultParameterValue(null)>]?Maxdepth ,
1353+
[<Optional;DefaultParameterValue(null)>]?Colors: seq<string>,
1354+
[<Optional;DefaultParameterValue(null)>]?Colorbar:Colorbar
1355+
) =
1356+
Trace.initTreemap(
1357+
TraceStyle.Treemap(
1358+
labels = labels,
1359+
parents = parents,
1360+
?Ids = Ids,
1361+
?Values = Values,
1362+
?Text = Text,
1363+
?Branchvalues = Branchvalues,
1364+
?Tiling = Tiling,
1365+
?PathBar = PathBar,
1366+
?Level = Level,
1367+
?Maxdepth = Maxdepth
1368+
)
1369+
)
1370+
|> TraceStyle.Marker(?Colors=Colors,?Colorbar=Colorbar)
1371+
|> GenericChart.ofTraceObject

‎src/FSharp.Plotly/FSharp.Plotly.fsproj‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
<Compile Include="DynamicObj.fs" />
2929
<Compile Include="Colors.fs" />
3030
<Compile Include="Font.fs" />
31+
<Compile Include="Pathbar.fs" />
32+
<Compile Include="TreemapTiling.fs" />
3133
<Compile Include="Colorbar.fs" />
3234
<Compile Include="RangeSlider.fs" />
3335
<Compile Include="Light.fs" />

‎src/FSharp.Plotly/Pathbar.fs‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
namespace FSharp.Plotly
2+
3+
open System
4+
5+
type Pathbar () =
6+
inherit DynamicObj ()
7+
8+
///Initializes pathbar object (used in Chart.Treemap)
9+
///
10+
///Parameters:
11+
///
12+
///Visible : Determines if the path bar is drawn i.e. outside the trace `domain` and with one pixel gap.
13+
///
14+
///Side : Determines on which side of the the treemap the `pathbar` should be presented.
15+
///
16+
///EdgeShape: Determines which shape is used for edges between `pathbar` labels.
17+
///
18+
///Thickness: Sets the thickness of `pathbar` (in px). If not specified the `pathbar.textfont.size` is used with 3 pixles extra padding on each side.
19+
///
20+
///Textfont : Sets the font used inside `pathbar`.
21+
static member init
22+
(
23+
?Visible :bool,
24+
?Side :StyleParam.Side,
25+
?EdgeShape :StyleParam.TreemapEdgeShape,
26+
?Thickness :float,
27+
?Textfont :Font
28+
) =
29+
30+
Pathbar()
31+
|> Pathbar.style
32+
(
33+
?Visible = Visible ,
34+
?Side = Side ,
35+
?EdgeShape = EdgeShape,
36+
?Thickness = Thickness,
37+
?Textfont = Textfont
38+
)
39+
40+
///Applies the given styles to the given pathbar object
41+
///
42+
///Parameters:
43+
///
44+
///Visible : Determines if the path bar is drawn i.e. outside the trace `domain` and with one pixel gap.
45+
///
46+
///Side : Determines on which side of the the treemap the `pathbar` should be presented.
47+
///
48+
///EdgeShape: Determines which shape is used for edges between `pathbar` labels.
49+
///
50+
///Thickness: Sets the thickness of `pathbar` (in px). If not specified the `pathbar.textfont.size` is used with 3 pixles extra padding on each side.
51+
///
52+
///Textfont : Sets the font used inside `pathbar`.
53+
static member style
54+
(
55+
?Visible :bool,
56+
?Side :StyleParam.Side,
57+
?EdgeShape :StyleParam.TreemapEdgeShape,
58+
?Thickness :float,
59+
?Textfont :Font
60+
) =
61+
(fun (pathbar:Pathbar) ->
62+
Visible |> DynObj.setValueOpt pathbar "visible"
63+
Side |> DynObj.setValueOptBy pathbar "side" StyleParam.Side.convert
64+
EdgeShape |> DynObj.setValueOptBy pathbar "edgeshape" StyleParam.TreemapEdgeShape.convert
65+
Thickness |> DynObj.setValueOpt pathbar "thickness"
66+
Textfont |> DynObj.setValueOpt pathbar "textfont "
67+
68+
pathbar
69+
)

‎src/FSharp.Plotly/Playground.fsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
#load "DynamicObj.fs"
33
#load "Colors.fs"
44
#load "Font.fs"
5+
#load "Pathbar.fs"
6+
#load "TreemapTiling.fs"
57
#load "Colorbar.fs"
68
#load "RangeSlider.fs"
79
#load "Light.fs"
@@ -37,6 +39,15 @@
3739
open FSharp.Plotly
3840
open GenericChart
3941

42+
Chart.Treemap(
43+
["Eve"; "Cain"; "Seth"; "Enos"; "Noam"; "Abel"; "Awan"; "Enoch"; "Azura"],
44+
[""; "Eve"; "Eve"; "Seth"; "Seth"; "Eve"; "Eve"; "Awan"; "Eve" ],
45+
Values = [10.; 14.; 12.; 10.; 2.; 6.; 6.; 4.; 4.]
46+
)
47+
|> Chart.withTitle "Treemap test"
48+
|> Chart.Show
49+
50+
4051
//Sunbursst example from plotly docs: https://plotly.com/javascript/sunburst-charts
4152
Chart.Sunburst(
4253
["Eve"; "Cain"; "Seth"; "Enos"; "Noam"; "Abel"; "Awan"; "Enoch"; "Azura"],
@@ -47,6 +58,8 @@ Chart.Sunburst(
4758
|> Chart.Show
4859

4960

61+
62+
5063
let grid ((gCharts:seq<#seq<GenericChart>>),sharedAxes:bool,xGap,yGap) =
5164

5265
let nRows = Seq.length gCharts

‎src/FSharp.Plotly/StyleParams.fs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -944,6 +944,33 @@ module StyleParam =
944944

945945
static member convert = Thicknessmode.toString >> box
946946

947+
948+
[<RequireQualifiedAccess>]
949+
type TreemapEdgeShape =
950+
| ArrowRight | ArrowLeft | Straight | Slash | BackSlash
951+
952+
static member toString = function
953+
| ArrowRight-> ">"
954+
| ArrowLeft -> "<"
955+
| Straight -> "|"
956+
| Slash -> "/"
957+
| BackSlash -> """\"""
958+
959+
static member convert = TreemapEdgeShape.toString >> box
960+
961+
[<RequireQualifiedAccess>]
962+
type TreemapTilingPacking =
963+
| Squarify | Binary | Dice | Slice | SliceDice
964+
965+
static member toString = function
966+
| Squarify -> "squarify"
967+
| Binary -> "binary"
968+
| Dice -> "dice"
969+
| Slice -> "slice"
970+
| SliceDice -> "slice-dice"
971+
972+
static member convert = TreemapTilingPacking.toString >> box
973+
947974
//--------------------------
948975
// #U#
949976
//--------------------------

‎src/FSharp.Plotly/Trace.fs‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1210,4 +1210,55 @@ module Trace =
12101210
Level |> DynObj.setValueOpt trace "level"
12111211
Maxdepth |> DynObj.setValueOpt trace "maxdepth"
12121212
trace
1213-
)
1213+
)
1214+
1215+
/// Applies the styles of treemap plot to TraceObjects
1216+
///
1217+
/// Parameters:
1218+
///
1219+
/// labels : Sets the labels of each of the sectors.
1220+
///
1221+
/// parents : Sets the parent sectors for each of the sectors. Empty string items '' are understood to reference the root node in the hierarchy. If `ids` is filled, `parents` items are understood to be "ids" themselves. When `ids` is not set, plotly attempts to find matching items in `labels`, but beware they must be unique.
1222+
///
1223+
/// Ids : Assigns id labels to each datum. These ids for object constancy of data points during animation.
1224+
///
1225+
/// Values : Sets the values associated with each of the sectors. Use with `branchvalues` to determine how the values are summed.
1226+
///
1227+
/// Text : Sets text elements associated with each sector. If trace `textinfo` contains a "text" flag, these elements will be seen on the chart. If trace `hoverinfo` contains a "text" flag and "hovertext" is not set, these elements will be seen in the hover labels.
1228+
///
1229+
/// Branchvalues: Determines how the items in `values` are summed. When set to "total", items in `values` are taken to be value of all its descendants. When set to "remainder", items in `values` corresponding to the root and the branches sectors are taken to be the extra part not part of the sum of the values at their leaves.
1230+
///
1231+
/// Tiling : Sets Tiling algorithm options
1232+
///
1233+
/// PathBar : Sets the Pathbar used to navigate zooming
1234+
///
1235+
/// Level : Sets the level from which this trace hierarchy is rendered. Set `level` to `''` to start from the root node in the hierarchy. Must be an "id" if `ids` is filled in, otherwise plotly attempts to find a matching item in `labels`.
1236+
///
1237+
/// Maxdepth : Sets the number of rendered sectors from any given `level`. Set `maxdepth` to "-1" to render all the levels in the hierarchy.
1238+
static member Treemap
1239+
(
1240+
labels : seq<#IConvertible>,
1241+
parents : seq<#IConvertible>,
1242+
?Ids : seq<string>,
1243+
?Values : seq<float>,
1244+
?Text : seq<string>,
1245+
?Branchvalues : StyleParam.BranchValues,
1246+
?Tiling : TreemapTiling,
1247+
?PathBar : Pathbar,
1248+
?Level ,
1249+
?Maxdepth : int
1250+
) =
1251+
(fun (trace:('T :> Trace)) ->
1252+
labels |> DynObj.setValue trace "labels"
1253+
parents |> DynObj.setValue trace "parents"
1254+
Ids |> DynObj.setValueOpt trace "ids"
1255+
Values |> DynObj.setValueOpt trace "values"
1256+
Text |> DynObj.setValueOpt trace "text"
1257+
Branchvalues |> DynObj.setValueOptBy trace "branchvalues" StyleParam.BranchValues.convert
1258+
Tiling |> DynObj.setValueOpt trace "tiling"
1259+
PathBar |> DynObj.setValueOpt trace "pathbar"
1260+
Level |> DynObj.setValueOpt trace "level"
1261+
Maxdepth |> DynObj.setValueOpt trace "maxdepth"
1262+
trace
1263+
)
1264+

‎src/FSharp.Plotly/TreemapTiling.fs‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
namespace FSharp.Plotly
2+
3+
open System
4+
5+
type TreemapTiling () =
6+
inherit DynamicObj ()
7+
8+
///Initializes tiling object (used in Chart.Treemap)
9+
///
10+
///Parameters:
11+
///
12+
///Packing : Determines d3 treemap solver. For more info please refer to https://github.com/d3/d3-hierarchy#treemap-tiling
13+
///
14+
///SquarifyRatio: When using "squarify" `packing` algorithm, according to https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio this option specifies the desired aspect ratio of the generated rectangles. The ratio must be specified as a number greater than or equal to one. Note that the orientation of the generated rectangles (tall or wide) is not implied by the ratio; for example, a ratio of two will attempt to produce a mixture of rectangles whose width:height ratio is either 2:1 or 1:2. When using "squarify", unlike d3 which uses the Golden Ratio i.e. 1.618034, Plotly applies 1 to increase squares in treemap layouts.
15+
///
16+
///Flip : Determines if the positions obtained from solver are flipped on each axis.
17+
///
18+
///Pad : Sets the inner padding (in px).
19+
static member init
20+
(
21+
?Packing : StyleParam.TreemapTilingPacking,
22+
?SquarifyRatio : float,
23+
?Flip : string,
24+
?Pad : float
25+
) =
26+
27+
TreemapTiling()
28+
|> TreemapTiling.style
29+
(
30+
?Packing = Packing ,
31+
?SquarifyRatio = SquarifyRatio,
32+
?Flip = Flip ,
33+
?Pad = Pad
34+
)
35+
36+
///Applies the given styles to the given tiling object
37+
///
38+
///Parameters:
39+
///
40+
///Packing : Determines d3 treemap solver. For more info please refer to https://github.com/d3/d3-hierarchy#treemap-tiling
41+
///
42+
///SquarifyRatio: When using "squarify" `packing` algorithm, according to https://github.com/d3/d3-hierarchy/blob/master/README.md#squarify_ratio this option specifies the desired aspect ratio of the generated rectangles. The ratio must be specified as a number greater than or equal to one. Note that the orientation of the generated rectangles (tall or wide) is not implied by the ratio; for example, a ratio of two will attempt to produce a mixture of rectangles whose width:height ratio is either 2:1 or 1:2. When using "squarify", unlike d3 which uses the Golden Ratio i.e. 1.618034, Plotly applies 1 to increase squares in treemap layouts.
43+
///
44+
///Flip : Determines if the positions obtained from solver are flipped on each axis.
45+
///
46+
///Pad : Sets the inner padding (in px).
47+
static member style
48+
(
49+
?Packing : StyleParam.TreemapTilingPacking,
50+
?SquarifyRatio : float,
51+
?Flip : string,
52+
?Pad : float
53+
54+
) =
55+
(fun (tiling:TreemapTiling) ->
56+
Packing |> DynObj.setValueOptBy tiling "packing" StyleParam.TreemapTilingPacking.convert
57+
SquarifyRatio |> DynObj.setValueOpt tiling "squarifyRatio"
58+
Flip |> DynObj.setValueOpt tiling "flip"
59+
Pad |> DynObj.setValueOpt tiling "pad"
60+
61+
tiling
62+
)

0 commit comments

Comments
 (0)