diff --git a/docs/intro/visualization.html b/docs/intro/visualization.html index 07b9d3d..4a3a6f8 100644 --- a/docs/intro/visualization.html +++ b/docs/intro/visualization.html @@ -143,7 +143,7 @@ {:MSIZE 4 :MCOLOR "brown" :HEIGHT 100 - :WIDTH 100})]))
The following is inspired by the example at Plotnine's main page.
(def mtcars
+ :WIDTH 100})]))
The following is inspired by the example at Plotnine's main page. Note how we add regression lines.
(def mtcars
(-> "/tmp/mtcars.csv"
(tc/dataset {:key-fn keyword})))
(let [pallete (->> :accent
color/palette
@@ -9983,7 +9983,7 @@
(defn compute [form] (if-let [result ((clojure.core/deref *cache) form)] result (do (POST "/compute" {:headers {"Accept" "application/json"}, :params (pr-str {:form form}), :handler (fn [response] (swap! *cache assoc form (read-string response)) (.log js/console (pr-str (clojure.core/deref *cache)))), :error-handler (fn [e] (.log js/console (str "error on compute: " e)))}) [:div [:p "computing"] [:pre [:code (pr-str form)]] [:div.loader]])))
(defn refresh-page [] (.reload js/location))
(ns main (:require [reagent.core :as r] [reagent.dom :as dom] [ajax.core :refer [GET POST]] [clojure.string :as string] [scicloj.clay :as clay]))
-(GET "/counter" {:handler (fn [response] (when (not= response (clojure.core/str 145)) (clay/refresh-page))), :error-handler (fn [e] (.log js/console (str "error on counter: " e)))})
+(GET "/counter" {:handler (fn [response] (when (not= response (clojure.core/str 153)) (clay/refresh-page))), :error-handler (fn [e] (.log js/console (str "error on counter: " e)))})
(def data (quote nil))
(let [socket (js/WebSocket. (clojure.core/str "ws://localhost:" 1971))] (.addEventListener socket "open" (fn [event] (.send socket "Hello Server!"))) (.addEventListener socket "message" (fn [event] (case (.-data event) "refresh" (clay/refresh-page) (println [:unknown-ws-message (.-data event)])))))
(defn vega [spec] [:div {:ref (fn [el] (-> el (js/vegaEmbed (clj->js spec) (clj->js {:renderer :svg})) (.then (fn [res])) (.catch (fn [err] (println (str "vegaEmbed error: " err))))))}])
@@ -9995,13 +9995,13 @@
(dom/render (fn [] widget6) (.getElementById js/document "widget6"))
(def widget9 nil)
(dom/render (fn [] widget9) (.getElementById js/document "widget9"))
-(def widget12 [:div [:div [vega (quote {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 200, :tooltip true}, :width 400, :background "floralwhite", :height 300, :data {:values "x,y\n0,0.31760091672999213\n1,1.8458848562555006\n2,2.6772138073303857\n3,3.555446277009805\n4,4.77864679201703\n5,5.661878792449292\n6,6.002308024458628\n7,7.385268165110822\n8,8.130571160115535\n", :format {:type "csv"}}})]]])
+(def widget12 [:div [:div [vega (quote {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 200, :tooltip true}, :width 400, :background "floralwhite", :height 300, :data {:values "x,y\n0,0.22862486200791787\n1,1.331638161176539\n2,2.2201528431794495\n3,3.8508076415259596\n4,4.860303450418627\n5,5.172688466437661\n6,6.106522249346133\n7,7.353952281761975\n8,8.313118960812897\n", :format {:type "csv"}}})]]])
(dom/render (fn [] widget12) (.getElementById js/document "widget12"))
-(def widget15 [:div [:div [vega (quote {:width 400, :background "floralwhite", :title {:text "points and a line"}, :layer [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 400, :background "floralwhite", :height 300} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 400, :background "floralwhite", :height 300}], :height 300, :data {:values "x,y\n0,0.31760091672999213\n1,1.8458848562555006\n2,2.6772138073303857\n3,3.555446277009805\n4,4.77864679201703\n5,5.661878792449292\n6,6.002308024458628\n7,7.385268165110822\n8,8.130571160115535\n", :format {:type "csv"}}})]]])
+(def widget15 [:div [:div [vega (quote {:width 400, :background "floralwhite", :title {:text "points and a line"}, :layer [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 400, :background "floralwhite", :height 300} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 400, :background "floralwhite", :height 300}], :height 300, :data {:values "x,y\n0,0.22862486200791787\n1,1.331638161176539\n2,2.2201528431794495\n3,3.8508076415259596\n4,4.860303450418627\n5,5.172688466437661\n6,6.106522249346133\n7,7.353952281761975\n8,8.313118960812897\n", :format {:type "csv"}}})]]])
(dom/render (fn [] widget15) (.getElementById js/document "widget15"))
-(def widget18 [:div [:div [vega (quote {:width 400, :background "floralwhite", :vconcat [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 100, :background "floralwhite", :height 100} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 100, :background "floralwhite", :height 100}], :height 300, :data {:values "x,y\n0,0.31760091672999213\n1,1.8458848562555006\n2,2.6772138073303857\n3,3.555446277009805\n4,4.77864679201703\n5,5.661878792449292\n6,6.002308024458628\n7,7.385268165110822\n8,8.130571160115535\n", :format {:type "csv"}}})]]])
+(def widget18 [:div [:div [vega (quote {:width 400, :background "floralwhite", :vconcat [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 100, :background "floralwhite", :height 100} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 100, :background "floralwhite", :height 100}], :height 300, :data {:values "x,y\n0,0.22862486200791787\n1,1.331638161176539\n2,2.2201528431794495\n3,3.8508076415259596\n4,4.860303450418627\n5,5.172688466437661\n6,6.106522249346133\n7,7.353952281761975\n8,8.313118960812897\n", :format {:type "csv"}}})]]])
(dom/render (fn [] widget18) (.getElementById js/document "widget18"))
-(def widget20 [:div [:div [vega (quote {:hconcat [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 100, :background "floralwhite", :height 100} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 100, :background "floralwhite", :height 100}], :width 400, :background "floralwhite", :height 300, :data {:values "x,y\n0,0.31760091672999213\n1,1.8458848562555006\n2,2.6772138073303857\n3,3.555446277009805\n4,4.77864679201703\n5,5.661878792449292\n6,6.002308024458628\n7,7.385268165110822\n8,8.130571160115535\n", :format {:type "csv"}}})]]])
+(def widget20 [:div [:div [vega (quote {:hconcat [{:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "circle", :size 400, :tooltip true}, :width 100, :background "floralwhite", :height 100} {:encoding {:y {:field "y", :type "quantitative"}, :x {:field "x", :type "quantitative"}}, :mark {:type "line", :size 4, :color "brown", :tooltip true}, :width 100, :background "floralwhite", :height 100}], :width 400, :background "floralwhite", :height 300, :data {:values "x,y\n0,0.22862486200791787\n1,1.331638161176539\n2,2.2201528431794495\n3,3.8508076415259596\n4,4.860303450418627\n5,5.172688466437661\n6,6.106522249346133\n7,7.353952281761975\n8,8.313118960812897\n", :format {:type "csv"}}})]]])
(dom/render (fn [] widget20) (.getElementById js/document "widget20"))
(def widget23 nil)
(dom/render (fn [] widget23) (.getElementById js/document "widget23"))
diff --git a/notebooks/intro/visualization.clj b/notebooks/intro/visualization.clj
index a206c39..4154155 100644
--- a/notebooks/intro/visualization.clj
+++ b/notebooks/intro/visualization.clj
@@ -90,6 +90,7 @@
;; ### Combining a few things together
;;
;; The following is inspired by the example at Plotnine's [main page](https://plotnine.readthedocs.io/en/stable/).
+;; Note how we add regression lines.
(def mtcars
(-> "/tmp/mtcars.csv"