+TITLE: plotly-cl

Plot stuff using ~plotly.js~ in Common Lisp.

We will reproduce the following chart from [[https://plot.ly/javascript/line-and-scatter/#data-labels-on-the-plot][here]].

[[file:./plot.png]]

JavaScript code is copied below. Lisp code follows.

+BEGIN_SRC js

var trace1 = { x: [1, 2, 3, 4, 5], y: [1, 6, 3, 6, 1], mode: 'markers+text', type: 'scatter', name: 'Team A', text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'], textposition: 'top center', textfont: { family: 'Raleway, sans-serif' }, marker: { size: 12 } };

var trace2 = { x: [1.5, 2.5, 3.5, 4.5, 5.5], y: [4, 1, 7, 1, 4], mode: 'markers+text', type: 'scatter', name: 'Team B', text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'], textfont : { family:'Times New Roman' }, textposition: 'bottom center', marker: { size: 12 } };

var data = [ trace1, trace2 ];

var layout = { xaxis: { range: [ 0.75, 5.25 ] }, yaxis: { range: [0, 8] }, legend: { y: 0.5, yref: 'paper', font: { family: 'Arial, sans-serif', size: 20, color: 'grey', } }, title:'Data Labels on the Plot' };

Plotly.newPlot('myDiv', data, layout);

+END_SRC

+BEGIN_SRC common-lisp

(in-package :plotly-cl)

(let ((trace-1 ((:x . #(1 2 3 4 5)) (:y . #(1 6 3 5 1)) (:mode . "markers+text") (:type . "scatter") (:name . "Team A") (:text . ("A-1" "A-2" "A-3" "A-4" "A-5")) (:textposition . "top center") (:textfont . ((:family . "Raleway, sans-serif"))) (:marker . ((:size . 12))))) (trace-2((:x . #(1.5 2.5 3.5 4.5 5.5)) (:y . #(4 1 7 1 4)) (:mode . "markers+text") (:type . "scatter") (:name . "Team B") (:text . ("B-a" "B-b" "B-c" "B-d" "B-e")) (:textposition . "bottom center") (:textfont . ((:family . "Times New Roman"))) (:marker . ((:size . 12))))) (layout `((:xaxis . ((:range . (0.75 5.25)))) (:yaxis . ((:range . (0 8)))) (:legend . ((:y . 0.5) (:yref . "paper") (:font . ((:family . "Arial, sans-serif") (:size . 20) (:color . "grey"))))) (:title . "Data Labels on the Plot")))) (pl-plot (list trace-1 trace-2) :layout layout :width 1000 :height 500))

+END_SRC