[simplest-plotly-streaming-chart] First cut

Author: harold

src/data_visualization/simplest-plotly-streaming-chart.png

@@ -0,0 +1,24 @@
+^{:kindly/hide-code true
+  :clay {:title  "Simplest Plotly Streaming Chart"
+         :quarto {:type     :post
+                  :author   [:harold]
+                  :date     "2025-12-13"
+                  :description "Driving Plotly to Update a Chart with New Points."
+                  :image    "simplest-plotly-streaming-chart.png"
+                  :category :data-visualization
+                  :tags     [:chart :data :streaming :update]
+                  :keywords [:chart :data :streaming :update]}}}
+(ns data-visualization.simplest-ploty-streaming-chart
+  (:require [scicloj.kindly.v4.kind :as kind]))
+
+(kind/hiccup
+ [:div#streaming-chart])
+
+(kind/hiccup
+ [:div
+  [:script {:src "https://cdn.plot.ly/plotly-3.3.0.min.js"
+            :type "application/javascript"}]
+  [:script {:src "https://cdn.jsdelivr.net/npm/[email protected]/dist/scittle.js"
+            :type "application/javascript"}]
+  [:script {:src "simplestplotlystreamingchart.cljs"
+            :type "application/x-scittle"}]])

src/data_visualization/simplest_plotly_streaming_chart.clj

@@ -0,0 +1,13 @@
+(ns data-visualization.simplestplotlystreamingchart)
+
+(def id "streaming-chart")
+
+(def v* (atom 0))
+
+(js/Plotly.newPlot id (clj->js [{:y [@v*]}]))
+
+(let [f (fn []
+          (swap! v* + (- (* 2 (rand)) 1))
+          (js/Plotly.extendTraces id (clj->js {:y [[@v*]]}) (clj->js [0])))
+      i (js/setInterval f 300)]
+  (js/setTimeout #(js/clearInterval i) 30000))