Angara.Chart

An F# library that allows to define and display a chart as a collection of plots such as line, band, markers, heatmap. Supports visualization of uncertain values represented as quantiles.

Also, there is a similar TypeScript component ChartViewer.

Samples gallery

Each sample is represented as an F# module containing function samples: unit -> Chart list. It builds the list of sample charts, so that then all the charts can be rendered using Angara.Html library to an html file:

moduleProgramopenAngara.ChartingtypeSampleCharts={ Lines:Chart list ; Band:Chart list; Markers:Chart list ; Heatmap:Chart list }[<EntryPoint>]letmain argv =letsamples={ Lines = Line.samples(); Band = Band.samples(); Markers = Markers.samples(); Heatmap = Heatmap.samples()}
Angara.Html.Save "Angara.Chart.SampleGallery.html" samples 0

Loading data using Angara.Table

All the samples below will use the Data module to get sample data series. We use Angara.Table library to read data from CSV file.

moduleDataopenAngara.Chartingletwheat= Table.ReadFile("wheat.csv")letuwheat= Table.ReadFile("uwheat.csv")letsite= Table.ReadFile("site.csv")letnpz= Table.ReadFile("npz.csv")letgrid= Table.ReadFile("grid.csv")letugrid= Table.ReadFile("ugrid.csv")letcol colName = Tables.ToArray<float[]> colName
letquantiles prefix table ={ median = table |> col (prefix +"_median")
lower68 = table |> col (prefix +"_lb68")
upper68 = table |> col (prefix +"_ub68")
lower95 = table |> col (prefix +"_lb95")
upper95 = table |> col (prefix +"_ub95")}

Line

moduleLineopenAngara.Chartingletsamples()=lett= Data.site |> Data.col "t"letp= Data.site |> Data.col "p"letp_uncertain= Data.npz |> Data.quantiles "p"[[ Plot.line(t, p)]|> Chart.ofList
[ Plot.line(Array.init 100(fun i ->letx= float(i)/10.0in x*x), stroke ="#7F7F7F", thickness =3.0)]|> Chart.ofList
[ Plot.line(LineX.Values t, LineY.UncertainValues p_uncertain)]|> Chart.ofList
]

Markers

moduleMarkersopenAngara.Chartingletsamples()=letlon= Data.wheat |> Data.col "Lon"letlat= Data.wheat |> Data.col "Lat"letwheat= Data.wheat |> Data.col "wheat"letwheat_uncertain= Data.uwheat |> Data.quantiles "w"[[ Plot.markers(lon, lat, displayName ="Lat/lon")]|> Chart.ofList
[ Plot.markers(lon, lat, color = MarkersColor.Values wheat, colorPalette ="0=Red=Green=Yellow=Blue=10", shape = MarkersShape.Circle, displayName ="Lat/lon/color")]|> Chart.ofList
[ Plot.markers(lon, lat, color = MarkersColor.Values wheat, colorPalette ="0=Red=Green=Yellow=Blue=10", size = MarkersSize.Values wheat, sizeRange =(5.0,25.0),
shape = MarkersShape.Diamond, displayName ="Lat/lon/color/size")]|> Chart.ofList
[ Plot.markers(lon, lat, color = MarkersColor.UncertainValues wheat_uncertain,
size = MarkersSize.Value 15.0,
shape = MarkersShape.Circle, displayName ="uncertain color")]|> Chart.ofList
[ Plot.markers(lon, lat, color = MarkersColor.Values wheat_uncertain.median,
size = MarkersSize.UncertainValues wheat_uncertain, sizeRange =(5.0,25.0),
displayName ="uncertain size")]|> Chart.ofList
[ Plot.markers(MarkersX.Values lat, MarkersY.UncertainValues wheat_uncertain,
displayName ="uncertain y")]|> Chart.ofList
]

Band

moduleBandopenAngara.Chartingletsamples()=lett= Data.site |> Data.col "t"letp_lb95= Data.npz |> Data.col "p_lb95"letp_ub95= Data.npz |> Data.col "p_ub95"[[ Plot.band(t, p_lb95, p_ub95)]|> Chart.ofList
]

Heatmap

moduleHeatmapopenAngara.Chartingletsamples()=letlon= Data.grid |> Data.col "lon"letlat= Data.grid |> Data.col "lat"letvalue= Data.grid |> Data.col "value"letlon2= Data.ugrid |> Data.col "lon"letlat2= Data.ugrid |> Data.col "lat"letvalue_uncertain= Data.ugrid |> Data.quantiles "value"[[ Plot.heatmap(lon, lat, value)]|> Chart.ofList
[ Plot.heatmap(lon, lat, value, treatAs = HeatmapTreatAs.Discrete)]|> Chart.ofList
[ Plot.heatmap(lon2, lat2, HeatmapValues.TabularUncertainValues value_uncertain, colorPalette ="blue,white,yellow,orange")]|> Chart.ofList
]