Merge pull request #113 from plotly/polar

Add Polar Charts and full axis support

Author: kMutagene

Diff for: Plotly.NET.sln

@@ -87,8 +87,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{60FB
 		docs\7_0_candlestick.fsx = docs\7_0_candlestick.fsx
 		docs\7_1_funnel.fsx = docs\7_1_funnel.fsx
 		docs\7_2_funnel_area.fsx = docs\7_2_funnel_area.fsx
-		docs\8_0_polar-charts.fsx = docs\8_0_polar-charts.fsx
-		docs\8_1_windrose-charts.fsx = docs\8_1_windrose-charts.fsx
+		docs\8_0_polar_line-scatter-plots.fsx = docs\8_0_polar_line-scatter-plots.fsx
+		docs\8_1_polar_bar_charts.fsx = docs\8_1_polar_bar_charts.fsx
+		docs\8_2_styling_polar_layouts.fsx = docs\8_2_styling_polar_layouts.fsx
 		docs\9_0_parallel-categories.fsx = docs\9_0_parallel-categories.fsx
 		docs\9_1_parallel-coords.fsx = docs\9_1_parallel-coords.fsx
 		docs\9_2_sankey.fsx = docs\9_2_sankey.fsx

Diff for: docs/1_0_axis-styling.fsx

@@ -64,20 +64,20 @@ The following example creates two mirrored axes with inside ticks, one of them w
 
 let mirroredXAxis =
     Axis.LinearAxis.init(
-        Title ="Log axis",
-        Showline = true,
+        Title = Title.init(Text="Mirrored axis"),
+        ShowLine = true,
         Mirror = StyleParam.Mirror.AllTicks,
-        Showgrid = false,
+        ShowGrid = false,
         Ticks = StyleParam.TickOptions.Inside
     )
 
 let mirroredLogYAxis = 
     Axis.LinearAxis.init(
-        Title ="Log axis",
+        Title = Title.init(Text="Log axis"),
         AxisType = StyleParam.AxisType.Log,
-        Showline = true,
+        ShowLine = true,
         Mirror = StyleParam.Mirror.AllTicks,
-        Showgrid = false,
+        ShowGrid = false,
         Ticks = StyleParam.TickOptions.Inside
     )
 
@@ -159,7 +159,7 @@ let twoXAxes2 =
     |> Chart.Combine
     |> Chart.withY_AxisStyle(
             "first y-axis",
-            Showline=true
+            ShowLine=true
             )
     |> Chart.withX_AxisStyle(
         "x-axis",
@@ -172,7 +172,7 @@ let twoXAxes2 =
         Overlaying=StyleParam.AxisAnchorId.Y 1,
         Position=0.10, // position the axis beteen the leftmost edge and the firt axis at 0.3
         Anchor=StyleParam.AxisAnchorId.Free,
-        Showline=true
+        ShowLine=true
     )
 
 (*** condition: ipynb ***)

Diff for: docs/8_0_polar-charts.fsx

@@ -0,0 +1,112 @@
+(**
+---
+title: Polar line and scatter plots
+category: Polar Charts
+categoryindex: 8
+index: 1
+---
+*)
+
+(*** hide ***)
+
+(*** condition: prepare ***)
+#r "nuget: Newtonsoft.JSON, 12.0.3"
+#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
+
+(*** condition: ipynb ***)
+#if IPYNB
+#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
+#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
+#endif // IPYNB
+
+(** 
+# Polar charts
+
+[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
+[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
+[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
+
+*Summary:* This example shows how to create polar charts in F#.
+
+let's first create some data for the purpose of creating example charts:
+
+*)
+
+open Plotly.NET 
+  
+// radial coordinates
+let radial  = [ 1; 2; 3; 4; 5; 6; 7;]
+
+// angular coordinates
+let theta  = [0; 45; 90; 135; 200; 320; 184;]
+
+(**
+A polar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart 
+of three or more quantitative variables represented on axes starting from the same point.
+
+The relative position and angle of the axes is typically uninformative.
+
+In Polar Charts, a series is represented by a closed curve that connects points in the polar coordinate system. 
+Each data point is determined by the distance from the pole (the radial coordinate) and the angle from the fixed direction (the angular coordinate).
+
+## Polar point charts
+
+use `Chart.PointPolar` to create a polar plot that displays points on a polar coordinate system:
+*)
+
+let pointPolar = Chart.PointPolar(radial,theta)
+(*** condition: ipynb ***)
+#if IPYNB
+pointPolar
+#endif // IPYNB
+
+(***hide***)
+pointPolar |> GenericChart.toChartHTML
+(***include-it-raw***)
+
+(**
+## Polar line charts
+
+use `Chart.LinePolar` to create a polar plot that displays a line connecting input the data on a polar coordinate system.
+
+You can for example change the line style using `Chart.withLineStyle`
+*)
+
+let linePolar = 
+    Chart.LinePolar(radial,theta)
+    |> Chart.withLineStyle(Color="purple",Dash=StyleParam.DrawingStyle.DashDot)
+
+(*** condition: ipynb ***)
+#if IPYNB
+linePolar
+#endif // IPYNB
+
+(***hide***)
+linePolar |> GenericChart.toChartHTML
+(***include-it-raw***)
+
+(**
+## Polar Spline charts
+
+use `Chart.SpinePolar` to create a polar plot that displays a smoothed line connecting input the data on a polar coordinate system.
+
+As for all other plots above, You can for example add labels to each datum:
+*)
+
+let splinePolar = 
+    Chart.SplinePolar(
+        radial,
+        theta,
+        Labels=["one";"two";"three";"four";"five";"six";"seven"],
+        TextPosition=StyleParam.TextPosition.TopCenter,
+        ShowMarkers=true
+    )
+
+(*** condition: ipynb ***)
+#if IPYNB
+splinePolar
+#endif // IPYNB
+
+(***hide***)
+splinePolar |> GenericChart.toChartHTML
+(***include-it-raw***)

Diff for: docs/8_0_polar_line-scatter-plots.fsx

@@ -1,6 +1,6 @@
 (**
 ---
-title: Windrose charts
+title: Polar bar charts
 category: Polar Charts
 categoryindex: 9 
 index: 2
@@ -20,40 +20,50 @@ index: 2
 #endif // IPYNB
 
 (** 
-# Wind rose charts
+# Polar bar charts
 
 [![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
 [![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
 [![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
 
-*Summary:* This example shows how to create wind rose charts in F#.
+*Summary:* This example shows how to create polar bar charts in F#.
 
 let's first create some data for the purpose of creating example charts:
 
 *)
 
 open Plotly.NET 
 
-let r    = [77.5; 72.5; 70.0; 45.0; 22.5; 42.5; 40.0; 62.5]
-let r'   = [57.5; 50.0; 45.0; 35.0; 20.0; 22.5; 37.5; 55.0]
-let r''  = [40.0; 30.0; 30.0; 35.0; 7.5; 7.5; 32.5; 40.0]
-let r''' = [20.0; 7.5; 15.0; 22.5; 2.5; 2.5; 12.5; 22.5]
+let r   = [77.5; 72.5; 70.0; 45.0; 22.5; 42.5; 40.0; 62.5]
+let r2  = [57.5; 50.0; 45.0; 35.0; 20.0; 22.5; 37.5; 55.0]
+let r3  = [40.0; 30.0; 30.0; 35.0; 7.5; 7.5; 32.5; 40.0]
+let r4  = [20.0; 7.5; 15.0; 22.5; 2.5; 2.5; 12.5; 22.5]
 
 let t = ["North"; "N-E"; "East"; "S-E"; "South"; "S-W"; "West"; "N-W"]
 
 (**
+Polar bar charts plot data on a radial axis and a categorical angular axis. 
+
+A common use case is the **windrose chart**.
+
 A wind rose is a graphic tool used by meteorologists to give a succinct view 
 of how wind speed and direction are typically distributed at a particular location.
 *)
 
 let windrose1 =
     [
-        Chart.WindRose (r   ,t,Name="11-14 m/s")
-        Chart.WindRose (r'  ,t,Name="8-11 m/s")
-        Chart.WindRose (r'' ,t,Name="5-8 m/s")
-        Chart.WindRose (r''',t,Name="< 5 m/s")
+        Chart.BarPolar (r , t, Name="11-14 m/s")
+        Chart.BarPolar (r2, t, Name="8-11 m/s")
+        Chart.BarPolar (r3, t, Name="5-8 m/s")
+        Chart.BarPolar (r4, t, Name="< 5 m/s")
     ]
     |> Chart.Combine
+    |> Chart.withAngularAxis(
+        Axis.AngularAxis.init(
+            CategoryOrder = StyleParam.CategoryOrder.Array,
+            CategoryArray = (["East"; "N-E"; "North"; "N-W"; "West"; "S-W"; "South"; "S-E";]) // set the order of the categorical axis
+        )
+    )
 
 (*** condition: ipynb ***)
 #if IPYNB