Update Scatterplot example to use ClojureScript's new `(:use [cljs-d3…

….core :only []])` namespace import syntax. Hooray! No more threading-macro hackery! Also update compile script to use `:foreign-libs` option to concatenate+minify d3.js dependency. Thanks to Luke VanderHart's (@levand) blog post: http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
lynaghk · Oct 3, 2011 · ef5db2e · ef5db2e
1 parent 4ffc457
commit ef5db2e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/README.markdown b/README.markdown
@@ -14,10 +14,11 @@ It transparently coerces ClojureScript data types into the appropriate JavaScrip
 
 
 ```clojure
-(ns sample.main
-  (:require [cljs-d3.core :as d3]
-            [cljs-d3.scale :as scale])
-  (:require-macros [cljs-d3.macros :as d3m]))
+(ns sample.scatterplot
+  (:require [cljs-d3.scale :as scale]
+            [cljs-d3.tooltip :as tooltip])
+  (:use [cljs-d3.core :only [d3 select selectAll append style attr data enter
+                             on event]]))
 
 (defn rand [] ((.random js/Math)))
 
@@ -31,14 +32,14 @@ It transparently coerces ClojureScript data types into the appropriate JavaScrip
                      :class (if (> (rand) 0.5)
                               "A" "B")})
 
-      scatterplot (d3m/-> d3/d3 (select "#example")
+      scatterplot (-> d3 (select "#example")
                           (append "svg:svg")
                           (style {:border "2px solid darkGray"
                                   :border-radius 8})
                           (attr {:width  Width
                                  :height Width}))
 
-      points      (d3m/-> scatterplot
+      points      (-> scatterplot
                           (selectAll "circle.num")
                           (data sample-data)
                           (enter)(append "svg:circle")
@@ -48,9 +49,8 @@ It transparently coerces ClojureScript data types into the appropriate JavaScrip
                                             "A" "darkRed"
                                             "B" "darkBlue")
                                  :cx #(scale (:x %))
-                                 :cy #(scale (:y %))}))
+                                 :cy #(scale (:y %))}))]
 
-      ])
 ```
 
 For more details and examples, see [http://keminglabs.com/cljs-d3/](http://keminglabs.com/cljs-d3/).

diff --git a/compile.clj b/compile.clj
@@ -2,6 +2,8 @@
 
 (if (= 1 (count *command-line-args*))
   (closure/build (first *command-line-args*) {:optimizations :simple ;;TODO: Advanced compilation chokes on SVG handling in D3
+                                              :foreign-libs [{:file "vendor/d3/d3.js"
+                                                              :provides ["jsd3.core"]}]
                                               :output-dir "resources/public/out"
                                               :output-to "resources/public/main.js"})
   (println "compile.clj requires one argument: path to cljs file to compile"))
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -7,7 +7,6 @@
 </head>
 <body>
 <div id="example"></div>
-<script src='d3/d3.js'></script>
 <script src='main.js'></script>
 </body>
 </html>
diff --git a/samples/scatterplot.cljs b/samples/scatterplot.cljs
@@ -1,8 +1,8 @@
-(ns sample.main
-  (:require [cljs-d3.core :as d3] ;;core must be imported as 'd3' for the cljs-d3 threading macro to work.
-            [cljs-d3.scale :as scale]
+(ns sample.scatterplot
+  (:require [cljs-d3.scale :as scale]
             [cljs-d3.tooltip :as tooltip])
-  (:require-macros [cljs-d3.macros :as d3m]))
+  (:use [cljs-d3.core :only [d3 select selectAll append style attr data enter
+                             on event]]))
 
 (defn rand [] ((.random js/Math)))
 
@@ -16,14 +16,14 @@
                      :class (if (> (rand) 0.5)
                               "A" "B")})
 
-      scatterplot (d3m/-> d3/d3 (select "#example")
+      scatterplot (-> d3 (select "#example")
                           (append "svg:svg")
                           (style {:border "2px solid darkGray"
                                   :border-radius 8})
                           (attr {:width  Width
                                  :height Width}))
 
-      points      (d3m/-> scatterplot
+      points      (-> scatterplot
                           (selectAll "circle.num")
                           (data sample-data)
                           (enter)(append "svg:circle")
@@ -38,11 +38,11 @@
 
   ;;Add mouseover tooltip to points
   (tooltip/init!)
-  (d3/on points "mousemove"
-         #(let [e (d3/event)]
+  (on points "mousemove"
+         #(let [e (event)]
             (tooltip/show! (.pageX e) (.pageY e)
                            (str "<div style=\"background-color: white; border: 1px solid black;\">"
                                                    "Datum: (" (:x %) ", " (:y %) ")"
                                                    "</div>"))))
-  (d3/on points "mouseout"
+  (on points "mouseout"
          #(tooltip/hide!)))
diff --git a/src/cljs/cljs_d3/core.cljs b/src/cljs/cljs_d3/core.cljs
@@ -1,5 +1,6 @@
 (ns cljs-d3.core
-  (:require [clojure.string :as s])
+  (:require [clojure.string :as s]
+            [jsd3.core :as jsd3])
   (:require-macros [cljs-d3.macros :as d3m]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;