Shapes in F#
How to make SVG shapes in python. Examples of lines, circle, rectangle, and path.
Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.
Note: We are retiring documentation for R, MATLAB, Julia, and F#. Learn more about this change here.
In [1]:
#r "nuget: Plotly.NET, 2.0.0-preview.8"
#r "nuget: Plotly.NET.Interactive, 2.0.0-preview.8"
Lines¶
In [2]:
open System
open Plotly.NET
open Plotly.NET.LayoutObjects
let rand = new Random()
let x = [for i in 0..20 -> i]
let y = [for i in 0..20 -> Math.Sin(float(i))]
let lines = [
Shape.init(StyleParam.ShapeType.Line,0,5.,0.5,0.5,Line=Line.init(Color=Color.fromString "red"));
Shape.init(StyleParam.ShapeType.Line,5,10.,-0.5,-0.5,Line=Line.init(Color=Color.fromString "green"));
Shape.init(StyleParam.ShapeType.Line,10,15.,1,1,Line=Line.init(Color=Color.fromString "orange"));
Shape.init(StyleParam.ShapeType.Line,15,20.,-1,-1,Line=Line.init(Color=Color.fromString "blue")) ]
Chart.Line(x,y)
|> Chart.withShapes lines
|> Chart.withTitle(title="Highlighting with Rectangles")
Out[2]:
Rectangles¶
In [3]:
#r "nuget: Deedle"
#r "nuget: FSharp.Data"
open Deedle
open FSharp.Data
open Plotly.NET
open Plotly.NET.LayoutObjects
let data =
Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv"
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
let getColumnData column=
data
|> Frame.getCol column
|> Series.values
|> Array.ofSeq
let rects = [
Shape.init(StyleParam.ShapeType.Rectangle,X0 = "2014-05-01", X1 = "2014-06-01", Xref = "x", Y0 = 70, Y1 = 90, Yref = "y",Fillcolor=Color.fromString "blue",Opacity=0.2, Line=Line.init(Color=Color.fromString "red"));
Shape.init(StyleParam.ShapeType.Rectangle,X0 = "2014-09-01", X1 = "2014-11-01", Xref = "x", Y0 = 95, Y1 = 105, Yref = "y",Line=Line.init(Color=Color.fromString "red"));]
Chart.Point(x=getColumnData "AAPL_x",y=getColumnData "AAPL_y")
|> Chart.withShapes rects
|> Chart.withTitle(title="Highlighting with Rectangles")
Out[3]:
Circles¶
Circles are centered around ((x0+x1)/2, (y0+y1)/2))
In [4]:
open Plotly.NET
let data=
Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/tips.csv"
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
let getColumnData column=
data
|> Frame.getCol column
|> Series.values
|> Array.ofSeq
let circles = [
Shape.init(StyleParam.ShapeType.Circle,X0 = 10, X1 = 20, Xref = "x", Y0 = 1, Y1 = 3, Yref = "y",Fillcolor=Color.fromString "rgb(50, 20, 90)",Opacity=0.2, Line=Line.init(Color=Color.fromString "rgb(50, 20, 90)"));
Shape.init(StyleParam.ShapeType.Circle,X0 = 25, X1 = 40, Xref = "x", Y0 = 4, Y1 = 8, Yref = "y",Fillcolor=Color.fromString "rgb(30, 100, 120)",Opacity=0.2, Line=Line.init(Color=Color.fromString "rgb(30, 100, 120)"));
]
Chart.Point(x=getColumnData "total_bill",y=getColumnData "tip")
|> Chart.withShapes circles
|> Chart.withTitle(title="Highlighting Regions with Circles")
Out[4]:
Drawing Shapes on Cartesian Plots¶
In [5]:
open Plotly.NET
let data=
Http.RequestString "https://raw.githubusercontent.com/plotly/datasets/master/tips.csv"
|> fun csv -> Frame.ReadCsvString(csv,true,separators=",")
let getColumnData column=
data
|> Frame.getCol column
|> Series.values
|> Array.ofSeq
Chart.Point(x=getColumnData "total_bill",y=getColumnData "tip")
|> Chart.withTitle(title="Click and drag inside the figure to draw a rectangle or select another shape in the modebar")
//|> Chart.withConfig (Config.init()) //modeBarButtonsToAdd
//|> Chart.withLayout (Layout.init(Dragmode=StyleParam.DragMode.Rotate)) //dragmode="drawrect",
Out[5]: