Skip to content

Commit 2024346

Browse files
kMutagenekMutagene
authored
Merge pull request #234 from plotly/finish-2D
2 parents 1a44545 + 6acf95e commit 2024346

30 files changed

+2369
-1331
lines changed

‎Plotly.NET.sln‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,12 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
8282
docs\06_1_mapbox-plots.fsx = docs\06_1_mapbox-plots.fsx
8383
docs\06_2_choropleth-mapbox.fsx = docs\06_2_choropleth-mapbox.fsx
8484
docs\06_3_density-mapbox.fsx = docs\06_3_density-mapbox.fsx
85-
docs\07_0_candlestick.fsx = docs\07_0_candlestick.fsx
86-
docs\07_1_funnel.fsx = docs\07_1_funnel.fsx
87-
docs\07_2_funnel_area.fsx = docs\07_2_funnel_area.fsx
88-
docs\07_3_indicator.fsx = docs\07_3_indicator.fsx
85+
docs\07_0_ohlc.fsx = docs\07_0_ohlc.fsx
86+
docs\07_1_candlestick.fsx = docs\07_1_candlestick.fsx
87+
docs\07_2_funnel.fsx = docs\07_2_funnel.fsx
88+
docs\07_3_funnel_area.fsx = docs\07_3_funnel_area.fsx
89+
docs\07_4_indicator.fsx = docs\07_4_indicator.fsx
90+
docs\07_5_waterfall.fsx = docs\07_5_waterfall.fsx
8991
docs\08_0_polar_line-scatter-plots.fsx = docs\08_0_polar_line-scatter-plots.fsx
9092
docs\08_1_polar_bar_charts.fsx = docs\08_1_polar_bar_charts.fsx
9193
docs\08_2_styling_polar_layouts.fsx = docs\08_2_styling_polar_layouts.fsx

‎docs/01_2_multiple-charts.fsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ let multipleTraceTypesGrid =
254254
[
255255
Chart.Point([1,2; 2,3])
256256
Chart.PointTernary([1,2,3; 2,3,4])
257-
Chart.Heatmap([[1; 2];[3; 4]], Showscale=false)
257+
Chart.Heatmap([[1; 2];[3; 4]], ShowScale=false)
258258
Chart.Point3d([1,3,2])
259259
Chart.PointMapbox([1,2]) |> Chart.withMapbox(Mapbox.init(Style = StyleParam.MapboxStyle.OpenStreetMap))
260260
[

‎docs/02_7_heatmaps.fsx‎

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,20 @@ let matrix =
4343
let rownames = ["p3";"p2";"p1"]
4444
let colnames = ["Tp0";"Tp30";"Tp60";"Tp160"]
4545

46-
let colorscaleValue =
47-
StyleParam.Colorscale.Custom [(0.0,"#3D9970");(1.0,"#001f3f")]
46+
(**
47+
48+
A heatmap chart can be created using the `Chart.Heatmap` functions.
49+
50+
When creating heatmap charts, it is usually desirable to provide the values in matrix form, rownames and colnames.
51+
52+
A heatmap needs at least 2 dimensional data that represents the z dimension. the X and Y dimension sizes can be inferred from the z data:
53+
*)
4854

49-
// Generating the Heatmap
55+
// Generating the Heatmap with only z Data
5056
let heat1 =
5157
Chart.Heatmap(
52-
matrix,colnames,rownames,
53-
Colorscale=colorscaleValue,
54-
Showscale=true
58+
matrix
5559
)
56-
|> Chart.withSize(700.,500.)
57-
|> Chart.withMarginSize(Left=200.)
5860

5961
(*** condition: ipynb ***)
6062
#if IPYNB
@@ -66,28 +68,85 @@ heat1 |> GenericChart.toChartHTML
6668
(***include-it-raw***)
6769

6870
(**
69-
A heatmap chart can be created using the `Chart.HeatMap` functions.
70-
When creating heatmap charts, it is usually desirable to provide the values in matrix form, rownames and colnames.
71+
## Inverting the Y Axis
72+
73+
Per default, the y axis starts at the origin of the X/Y plane.
74+
If it is however desired to represent a 2D matrix exactly how it is notated, invert the YAxis by setting `ReverseYAxis`.
7175
*)
7276

77+
// Addning row/column names and inverting the Y axis:
78+
let heat2 =
79+
Chart.Heatmap(
80+
matrix,
81+
colnames,
82+
rownames,
83+
ReverseYAxis = true
84+
)
85+
86+
(*** condition: ipynb ***)
87+
#if IPYNB
88+
heat2
89+
#endif // IPYNB
90+
91+
(***hide***)
92+
heat2 |> GenericChart.toChartHTML
93+
(***include-it-raw***)
94+
7395
(**
74-
## Styling Colorbars
96+
## Styling Colorbars and using custom color scales
7597
98+
The colorscale can be set via the `ColorScale` argument.
7699
All charts that contain colorbars can be styled by the `Chart.withColorBarStyle` function.
77100
Here is an example that adds a title to the colorbar:
78101
*)
79102

80-
let heat2 =
81-
heat1
103+
let heat3 =
104+
Chart.Heatmap(
105+
matrix,
106+
ColorScale = StyleParam.Colorscale.Viridis
107+
)
82108
|> Chart.withColorBarStyle(
83109
Title.init("Im the ColorBar")
84110
)
85111

86112
(*** condition: ipynb ***)
87113
#if IPYNB
88-
heat2
114+
heat3
89115
#endif // IPYNB
90116

91117
(***hide***)
92-
heat2 |> GenericChart.toChartHTML
118+
heat3 |> GenericChart.toChartHTML
93119
(***include-it-raw***)
120+
121+
122+
(**
123+
## Annotated Heatmaps
124+
125+
use `Chart.AnnotatedHeatmap` to add an annotation text to each z value:
126+
*)
127+
128+
let heat4 =
129+
Chart.AnnotatedHeatmap(
130+
zData = [
131+
[1..5]
132+
[6..10]
133+
[11..15]
134+
],
135+
annotationText = [
136+
["1,1";"1,2";"1,3"]
137+
["2,1";"2,2";"2,3"]
138+
["3,1";"3,2";"3,3"]
139+
],
140+
X = ["C1";"C2";"C3"],
141+
Y = ["R1";"R2";"R3"],
142+
ReverseYAxis = true
143+
)
144+
145+
(*** condition: ipynb ***)
146+
#if IPYNB
147+
heat4
148+
#endif // IPYNB
149+
150+
(***hide***)
151+
heat4 |> GenericChart.toChartHTML
152+
(***include-it-raw***)

‎docs/04_3_contour-plots.fsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ let z =
6060
A contour plot is a graphical technique for representing a 3-dimensional surface by plotting
6161
constant z slices, called contours, on a 2-dimensional format. That is, given a value for z,
6262
lines are drawn for connecting the (x,y) coordinates where that z value occurs.
63-
The contour plot is an alternative to a 3-D surface plot.
6463
6564
The contour plot is an alternative to a 3-D surface plot.
6665
@@ -79,3 +78,28 @@ contour1
7978
(***hide***)
8079
contour1 |> GenericChart.toChartHTML
8180
(***include-it-raw***)
81+
82+
(**
83+
## Smooth Contour Coloring
84+
85+
to apply heatmap gradient coloring between each contour level, set the `ContourColoring` to `heatmap`:
86+
*)
87+
88+
Chart.Contour(
89+
z,
90+
ContoursColoring = StyleParam.ContourColoring.Heatmap
91+
)
92+
93+
(**
94+
## Contour Line Labels
95+
96+
Use `ContourLabelFont` to set a contour label font, and display the labels with `ShowContourLabels`:
97+
98+
*)
99+
100+
Chart.Contour(
101+
z,
102+
ContoursColoring = StyleParam.ContourColoring.Heatmap,
103+
ShowContourLabels = true,
104+
ContourLabelFont = Font.init(Size = 12., Color = Color.fromKeyword White)
105+
)

‎docs/04_5_splom.fsx‎

Lines changed: 90 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,62 @@ let's first create some data for the purpose of creating example charts:
3333
3434
*)
3535

36-
open Plotly.NET
36+
37+
#r "nuget: FSharp.Data"
38+
#r "nuget: Deedle"
39+
40+
open FSharp.Data
41+
open Deedle
42+
open Plotly.NET
3743

3844
let data =
39-
[
40-
"A",[|1.;4.;3.4;0.7;|]
41-
"B",[|3.;1.5;1.7;2.3;|]
42-
"C",[|2.;4.;3.1;5.|]
43-
"D",[|4.;2.;2.;4.;|]
44-
]
45+
Http.RequestString @"https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv"
46+
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
47+
48+
let sepalLengthData = data.["sepal length"] |> Series.values
49+
let sepalWidthData = data.["sepal width"] |> Series.values
50+
let petalLengthData = data.["petal length"] |> Series.values
51+
let petalWidthData = data.["petal width"] |> Series.values
52+
53+
let colors =
54+
data
55+
|> Frame.getCol "class"
56+
|> Series.values
57+
|> Seq.cast<string>
58+
|> Seq.map (fun x ->
59+
match x with
60+
| "Iris-setosa" -> 0.
61+
| "Iris-versicolor" -> 0.5
62+
| _ -> 1.
63+
)
64+
|> Color.fromColorScaleValues
65+
4566

4667
(**
4768
Using a scatterplot matrix of several different variables can help to determine whether there are any
4869
relationships among the variables in the dataset.
4970
50-
**Attention**: this function is not very well tested and does not use the `Chart.Grid` functionality.
51-
Until that is fixed, consider creating splom plot programatically using `Chart.Grid` for more control.
71+
## Splom of the iris dataset
5272
*)
5373

54-
let splom1 =
55-
Chart.Splom(data,Color=Color.fromString "blue")
74+
let splom1 =
75+
Chart.Splom(
76+
[
77+
"sepal length" , sepalLengthData
78+
"sepal width" , sepalWidthData
79+
"petal length" , petalLengthData
80+
"petal width" , petalWidthData
81+
],
82+
MarkerColor = colors
83+
)
84+
|> Chart.withLayout(
85+
Layout.init(
86+
HoverMode = StyleParam.HoverMode.Closest,
87+
DragMode = StyleParam.DragMode.Select
88+
)
89+
)
90+
|> Chart.withSize (1000,1000)
91+
5692

5793
(*** condition: ipynb ***)
5894
#if IPYNB
@@ -63,7 +99,50 @@ splom1
6399
splom1 |> GenericChart.toChartHTML
64100
(***include-it-raw***)
65101

102+
(**
103+
## Showing different parts of the plot matrix
66104
105+
Use `ShowDiagonal`, `ShowUpperHalf` or `ShowLowerHalf` to customize the cells shown in the scatter plot matrix.
67106
107+
Here are some examples:
108+
*)
68109

110+
let noDiagonal =
111+
Chart.Splom(
112+
[
113+
"sepal length" , sepalLengthData
114+
"sepal width" , sepalWidthData
115+
"petal length" , petalLengthData
116+
"petal width" , petalWidthData
117+
],
118+
MarkerColor = colors,
119+
ShowDiagonal = false
120+
)
121+
|> Chart.withLayout(
122+
Layout.init(
123+
HoverMode = StyleParam.HoverMode.Closest,
124+
DragMode = StyleParam.DragMode.Select
125+
)
126+
)
127+
|> Chart.withSize (1000,1000)
128+
129+
130+
let noLowerHalf =
131+
Chart.Splom(
132+
[
133+
"sepal length" , sepalLengthData
134+
"sepal width" , sepalWidthData
135+
"petal length" , petalLengthData
136+
"petal width" , petalWidthData
137+
],
138+
MarkerColor = colors,
139+
ShowLowerHalf = false
140+
)
141+
|> Chart.withLayout(
142+
Layout.init(
143+
HoverMode = StyleParam.HoverMode.Closest,
144+
DragMode = StyleParam.DragMode.Select
145+
)
146+
)
147+
|> Chart.withSize (1000,1000)
69148

0 commit comments

Comments
 (0)