XPlot


XPlot: F# Data Visualization Package

XPlot is a cross-platform data visualization package for the F# programming language powered by popular JavaScript charting libraries Google Charts and Plotly. The library provides a complete mapping for the configuration options of the underlying libraries and so you get a nice F# interface that gives you access to the full power of Google Charts and Plotly. The XPlot library can be used interactively from F# Interactive, but charts can equally easy be embedded in F# applications and in HTML reports.

The next two demos show some of the more complex and advanced charts that can be created using XPlot. If you're getting started with XPlot, see the other documentation pages for simpler charts.

XPlot Google Charts example

The following example uses the Google Charts library to create a combo chart showing coffee production in Bolivia, Ecuador and Madagascar (as bar plots), together with the average visualized as a line chart:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
let series = [ "bars"; "bars"; "bars"; "lines" ]
let inputs = [ Bolivia; Ecuador; Madagascar; Average ]

inputs
|> Chart.Combo
|> Chart.WithOptions 
     (Options(title = "Coffee Production", series = 
        [| for typ in series -> Series(typ) |]))
|> Chart.WithLabels 
     ["Bolivia"; "Ecuador"; "Madagascar"; "Average"]
|> Chart.WithLegend true
|> Chart.WithSize (600, 250)

The XPlot library uses the F# |> operator to configure charts. In the above example, we use Chart.Combo to create a basic chart and then we set a number of properties - Chart.WithOptions specifies how the chart looks, Chart.WithLabels and Chart.WithLegend adds the legend that annotates the individual chart series.

XPlot Plotly example

The following example uses the Plotly online data analytics and visualization tool. It creates a scatter plot, rendered on a polar chart with different marker color for each of the trials stored in the HobbsPearson data set:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
let traces =
  [ for trial in HobbsPearson ->
    Scatter(r = trial.Radial, t = trial.Angular, 
      mode = "markers", marker = Marker(color=trial.Color))]

let layout =
  Layout(title = "Hobbs-Pearson Trials", showlegend = false,
    plot_bgcolor = "rgb(223,223,223)")

Figure(Data.From(traces), layout, Width=400, Height=300)

The code snippet creates one Scatter data series for each of the trials in the input. It sets the r and t properties to two lists of input values. If we wanted to produce an ordinary rectangular scatter plot, we could instead set the x and y properties.

How to get XPlot

XPlot as part of FsLab

If you want to get XPlot as part of larger package of F# and .NET tools for doing data science, then check out the FsLab web site. This gives you a nice cross-platform environment where you can access data using F# Data type providers, analyze the data using Deedle data frames and series and then visualize data using XPlot.

Stand alone XPlot packages

Alternatively, you can reference XPlot via a NuGet package. On Windows, you can use the XPlot.GoogleCharts.WPF and XPlot.Plotly.WPF packages, which provide you with a Chart.Show method that opens a chart in a new WPF window.

Assuming the packages are in your packages folder, you can reference the libraries as follows:

1: 
2: 
3: 
4: 
5: 
#I "packages/XPlot.GoogleCharts.1.1.6/lib/net40"
#I "packages/XPlot.GoogleCharts.WPF.1.1.6/lib/net40"
#r "XPlot.GoogleCharts.dll"
#r "XPlot.GoogleCharts.WPF.dll"
open XPlot.GoogleCharts

When using Plotly, you'll also need to create a user account at the plot.ly web site and pass your user name and API key to the Plotly.Signin function as follows:

1: 
2: 
3: 
4: 
5: 
#I "packages/XPlot.Plotly.1.1.6/lib/net40"
#r "XPlot.Plotly.dll"
#load "credentials.fsx"
open XPlot.Plotly
Plotly.Signin MyCredentials.userAndKey

Documentation

The documentation for the library is automatically generated from F# script files that you can find in the docs/content folder on GitHub. The links in the right panel point to a number of tutorials that demonstrate some common scenarios. You can also copy the source code from GitHub.

Additionally, the library also comes with an API reference that is generated from code comments. This is work in progress, so please help us & contribute comments and documentation! The most important types are:

  • Google Chart type contains methods for creating charts like Chart.Line and for configuring charts like Chart.WithOptions.
  • Google Options type contains parameters for charts that are specified using Chart.WithOptions.
  • Google Configuration module contains other types that are used as parameters to Chart.WithOptions.

  • Plotly Graph module contains methods for creating various kinds of charts such as Scatter used above.
  • Plotly Layout type specifies common properties of Plotly charts like title and color.
namespace XPlot
module GoogleCharts

from XPlot
namespace XPlot.Plotly
type Plotly =
  private new : unit -> Plotly
  static member Signin : username:string * password:string -> unit

Full name: XPlot.Plotly.Plotly
static member Plotly.Signin : username:string * password:string -> unit
module MyCredentials
val userAndKey : string * string

Full name: MyCredentials.userAndKey
val Bolivia : (string * float) list

Full name: Index.Bolivia
val Ecuador : (string * float) list

Full name: Index.Ecuador
val Madagascar : (string * float) list

Full name: Index.Madagascar
val Average : (string * float) list

Full name: Index.Average
type HobbsPearsonTrial =
  {Radial: float list;
   Angular: obj list;
   Color: string;}

Full name: Index.HobbsPearsonTrial
HobbsPearsonTrial.Radial: float list
Multiple items
val float : value:'T -> float (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.float

--------------------
type float = System.Double

Full name: Microsoft.FSharp.Core.float

--------------------
type float<'Measure> = float

Full name: Microsoft.FSharp.Core.float<_>
type 'T list = List<'T>

Full name: Microsoft.FSharp.Collections.list<_>
HobbsPearsonTrial.Angular: obj list
type obj = System.Object

Full name: Microsoft.FSharp.Core.obj
Multiple items
HobbsPearsonTrial.Color: string

--------------------
type Color =
  new : unit -> Color
  member ShouldSerializefill : unit -> bool
  member ShouldSerializefillOpacity : unit -> bool
  member ShouldSerializestroke : unit -> bool
  member ShouldSerializestrokeWidth : unit -> bool
  member fill : string
  member fillOpacity : float
  member stroke : string
  member strokeWidth : int
  member fill : string with set
  ...

Full name: XPlot.GoogleCharts.Configuration.Color

--------------------
new : unit -> Color
Multiple items
val string : value:'T -> string

Full name: Microsoft.FSharp.Core.Operators.string

--------------------
type string = System.String

Full name: Microsoft.FSharp.Core.string
val HobbsPearson : HobbsPearsonTrial list

Full name: Index.HobbsPearson
Multiple items
type Color =
  new : unit -> Color
  member ShouldSerializefill : unit -> bool
  member ShouldSerializefillOpacity : unit -> bool
  member ShouldSerializestroke : unit -> bool
  member ShouldSerializestrokeWidth : unit -> bool
  member fill : string
  member fillOpacity : float
  member stroke : string
  member strokeWidth : int
  member fill : string with set
  ...

Full name: XPlot.GoogleCharts.Configuration.Color

--------------------
new : unit -> Color
val series : string list

Full name: Index.series
val inputs : (string * float) list list

Full name: Index.inputs
type Chart =
  static member Annotation : data:seq<#seq<DateTime * 'V * string * string>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'V :> value)
  static member Annotation : data:seq<DateTime * #value * string * string> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Area : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
  static member Area : data:seq<#key * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bar : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
  static member Bar : data:seq<#key * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bubble : data:seq<string * #value * #value * #value * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bubble : data:seq<string * #value * #value * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Bubble : data:seq<string * #value * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  static member Calendar : data:seq<DateTime * #value> * ?Labels:seq<string> * ?Options:Options -> GoogleChart
  ...

Full name: XPlot.GoogleCharts.Chart
static member Chart.Combo : data:seq<#seq<'K * 'V>> * ?Labels:seq<string> * ?Options:Options -> GoogleChart (requires 'K :> key and 'V :> value)
static member Chart.WithOptions : options:Options -> chart:GoogleChart -> GoogleChart
Multiple items
type Options =
  new : unit -> Options
  member ShouldSerializeaggregationTarget : unit -> bool
  member ShouldSerializeallValuesSuffix : unit -> bool
  member ShouldSerializeallowHtml : unit -> bool
  member ShouldSerializealternatingRowStyle : unit -> bool
  member ShouldSerializeanimation : unit -> bool
  member ShouldSerializeannotations : unit -> bool
  member ShouldSerializeannotationsWidth : unit -> bool
  member ShouldSerializeareaOpacity : unit -> bool
  member ShouldSerializeavoidOverlappingGridLines : unit -> bool
  ...

Full name: XPlot.GoogleCharts.Configuration.Options

--------------------
new : unit -> Options
val typ : string
Multiple items
type Series =
  new : ?type:string -> Series
  member ShouldSerializeannotations : unit -> bool
  member ShouldSerializeareaOpacity : unit -> bool
  member ShouldSerializecolor : unit -> bool
  member ShouldSerializecurveType : unit -> bool
  member ShouldSerializefallingColor : unit -> bool
  member ShouldSerializelineWidth : unit -> bool
  member ShouldSerializepointShape : unit -> bool
  member ShouldSerializepointSize : unit -> bool
  member ShouldSerializerisingColor : unit -> bool
  ...

Full name: XPlot.GoogleCharts.Configuration.Series

--------------------
new : ?type:string -> Series
static member Chart.WithLabels : labels:seq<string> -> chart:GoogleChart -> GoogleChart
static member Chart.WithLegend : enabled:bool -> chart:GoogleChart -> GoogleChart
static member Chart.WithSize : size:(int * int) -> chart:GoogleChart -> GoogleChart
val traces : Scatter list

Full name: Index.traces
val trial : HobbsPearsonTrial
Multiple items
type Scatter =
  inherit Trace
  new : unit -> Scatter
  member ShouldSerializeconnectgaps : unit -> bool
  member ShouldSerializeerror_x : unit -> bool
  member ShouldSerializeerror_y : unit -> bool
  member ShouldSerializefill : unit -> bool
  member ShouldSerializefillcolor : unit -> bool
  member ShouldSerializeline : unit -> bool
  member ShouldSerializemarker : unit -> bool
  member ShouldSerializemode : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Scatter

--------------------
new : unit -> Scatter
property Scatter.r: seq<float>
property Scatter.t: seq<obj>
Multiple items
type Marker =
  new : unit -> Marker
  member ShouldSerializecauto : unit -> bool
  member ShouldSerializecmax : unit -> bool
  member ShouldSerializecmin : unit -> bool
  member ShouldSerializecolor : unit -> bool
  member ShouldSerializecolorscale : unit -> bool
  member ShouldSerializeline : unit -> bool
  member ShouldSerializemaxdisplayed : unit -> bool
  member ShouldSerializeopacity : unit -> bool
  member ShouldSerializeoutliercolor : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Marker

--------------------
new : unit -> Marker
HobbsPearsonTrial.Color: string
val layout : Layout

Full name: Index.layout
Multiple items
type Layout =
  new : unit -> Layout
  member ShouldSerializeangularaxis : unit -> bool
  member ShouldSerializeannotations : unit -> bool
  member ShouldSerializeautosize : unit -> bool
  member ShouldSerializebargap : unit -> bool
  member ShouldSerializebargroupgap : unit -> bool
  member ShouldSerializebarmode : unit -> bool
  member ShouldSerializebarnorm : unit -> bool
  member ShouldSerializeboxgap : unit -> bool
  member ShouldSerializeboxgroupgap : unit -> bool
  ...

Full name: XPlot.Plotly.Graph.Layout

--------------------
new : unit -> Layout
Multiple items
type Figure =
  new : data:Data * ?Layout:Layout -> Figure
  member GetInlineHtml : filename:string -> string
  member Plot : filename:string -> PlotlyResponse option
  member Fileopt : string
  member Height : int
  member Layout : Layout option
  member Origin : string
  member Response : PlotlyResponse option
  member Width : int
  member Fileopt : string with set
  ...

Full name: XPlot.Plotly.Figure

--------------------
new : data:Data * ?Layout:Layout -> Figure
Multiple items
module Data

from XPlot.GoogleCharts

--------------------
namespace Microsoft.FSharp.Data

--------------------
type Data =
  new : traces:seq<Trace> -> Data
  member Json : string
  static member From : traces:seq<#Trace> -> Data

Full name: XPlot.Plotly.Data

--------------------
new : traces:seq<Trace> -> Data
static member Data.From : traces:seq<#Trace> -> Data
Fork me on GitHub