Plotly.js Haskell bindings examples

This web pages shows plots generated with the plotlyhs packages, along with the Haskell code that generated the plots. To use the plots on the generate page, the Plotly.js source code should first be including by adding this tag to your HTML header:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Alternatively, this tag can be included in an HTML page using the plotlyCDN function in Graphics.Plotly.Lucid (when using Lucid) or Graphics.Plotly.Blaze(when using blaze-html).

A complete & minimal example

{-# LANGUAGE OverloadedStrings #-}

import Lucid
import Lucid.Html5
import Graphics.Plotly
import Graphics.Plotly.Lucid
import Lens.Micro

import qualified Data.Text.Lazy as T
import qualified Data.Text.Lazy.IO as T

main =
    T.writeFile "test.html" $ renderText $ doctypehtml_ $ do
    head_ $ do meta_ [charset_ "utf-8"]
               plotlyCDN
    body_ $ toHtml $ plotly "myDiv" [myTrace]

pointsData :: [(Double, Double)]
pointsData = zip [1,2,3,4] [500,3000,700,200]

myTrace
  = line (aes & x .~ fst
              & y .~ snd) pointsData

In the examples below, we omit all of the imports, main function, html header and focus only on the Plotly value (the argument to toHtml). The Plotly value can be constructed with the function plotly which takes two arguments: the element id of the <div> for the plot (this element will be created if you call toHtml on the Plotly value) and a list of traces.

A simple plot

We use these this basic dataset:

pointsData :: [(Double, Double)]
pointsData = zip [1,2,3,4] [500,3000,700,200]

Code to generate build the Plotly value (which has a toHtml instance), result on the right

plotly "div1" [line (aes & x .~ fst 
                         & y .~ snd) 
                    pointsData]

The above is quite unbearably sized & padded for this tutorial, so let's fix the margins and the plot height

plotly "div2" [line (aes & x .~ fst 
                         & y .~ snd) 
                    pointsData]
    & layout . margin ?~ thinMargins
    & layout . height ?~ 300

Lines and Markers

plotly "div3" [points (aes & x .~ fst 
                           & y .~ snd) 
                      pointsData]
    & layout . margin ?~ thinMargins
    & layout . height ?~ 300

plotly "div4" [points (aes & x .~ fst 
                           & y .~ snd)
                      pointsData 
                  & mode ?~ [Lines, Markers]]
    & layout . margin ?~ thinMargins
    & layout . height ?~ 300

Iris plots

This plot uses the iris value from the datasets package

plotly "div6"
    [points (aes & x .~ sepalLength 
                 & y .~ sepalWidth
                 & color ?~ (fromEnum . irisClass)) iris]
    & layout . margin ?~ thinMargins
    & layout . height ?~ 300

Horizontal bar plots

Using this simple dataset:

hbarData :: [(Text, Double)]
hbarData = [("Simon", 14.5), ("Joe", 18.9), ("Dorothy", 16.2)]

plotly "div7" 
    [hbars (aes & y .~ fst
                & x .~ snd)
           hbarData]
    & layout . margin ?~ thinMargins
    & layout . height ?~ 300