geoplot.clj

(ns geoplot
  (:require [nextjournal.clerk :as clerk]
            [nextjournal.clerk.viewer :as viewer]
            [clojure.data.json :as json]
            [clojure.java.io :as io]
            [applied-science.js-interop :as js]))

;; # replicating the Observable Plot [earthquake map example](https://observablehq.com/@observablehq/plot-earthquake-globe?intent=fork) in Clerk using `sci`

(def earthquake-data
  (with-open
    [r (io/reader "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson")]
    (json/read r)))

(def world-data
  (with-open [r (io/reader "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")]
    (json/read r)))

(def geo-plot-viewer
  {:transform-fn clerk/mark-presented
   :render-fn
   `(fn [data _]
      (require '[applied-science.js-interop :as js])
      [nextjournal.clerk.render/with-dynamic-import
       {:module "https://cdn.skypack.dev/@observablehq/[email protected]"}
       (fn [Plot]
         (let [earthquakes
               (map (fn [f]
                      (let [c ('d3/geoCentroid f)]
                        (js/lit
                         {:magnitude ('Math/pow 10 (js/get-in f [:properties :mag]))
                          :latitude (second c)
                          :longitude (first c)})))
                    (js/get (js/lit ~earthquake-data) :features))
               geoplot
               (. Plot plot
                  (js/obj
                   :projection (js/obj :type "orthographic" :rotate [-90, -30])
                   :marks
                   (cljs.core/array
                    (. Plot geo
                       (let [world (js/lit ~world-data)]
                         ('topojson/feature world "land"))
                       (js/lit {:fill "grey" :fillOpacity 0.2
                                :stroke "black"}))
                    (. Plot sphere)
                    (. Plot dot
                       earthquakes
                       (js/lit {:x "longitude" :y "latitude" :magnitude "magnitude"
                                :stroke "red" :fill "red" :fillOpacity 0.2}))
                    )))]
           [:div {:ref (fn [el]
                         (if el
                           (doto el
                             (.append geoplot))
                           (do
                             (.remove geoplot))))}]))])})

^{::clerk/viewer geo-plot-viewer}
{:something "something"}