Skip to content

Commit

Permalink
add intermediate bar and scatter examples;
Browse files Browse the repository at this point in the history
  • Loading branch information
@gadfly361
gadfly361 committed Feb 18, 2018
1 parent 46a3490 commit 995b8ce
Show file tree
Hide file tree
Showing 11 changed files with 928 additions and 445 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Expand Up @@ -2,6 +2,9 @@
/target
/*-init.clj
/dev-resources/public/js/*min
/dev-resources/public/js/*dev
/dev-resources/public/js/examples-dev.js
/dev-resources/public/js/basics-dev.js
out
*.*~

Expand Down
12 changes: 12 additions & 0 deletions dev-resources/public/basics-dev.html
View file
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src="js/basics-dev.js"></script>
<script>rid3.basics.main();</script>
</body>
</html>
12 changes: 12 additions & 0 deletions dev-resources/public/examples-dev.html
View file
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src="js/examples-dev.js"></script>
<script>rid3.examples.main();</script>
</body>
</html>
887 changes: 450 additions & 437 deletions dev-resources/public/js/examples.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions project.clj
View file
Expand Up @@ -29,7 +29,7 @@
:figwheel {:on-jsload "rid3.basics/reload"}
:compiler {:main rid3.basics
:optimizations :none
:output-to "dev-resources/public/js/basics.js"
:output-to "dev-resources/public/js/basics-dev.js"
:output-dir "dev-resources/public/js/basics-dev"
:asset-path "js/basics-dev"
:source-map-timestamp true
Expand Down Expand Up @@ -58,7 +58,7 @@
:figwheel {:on-jsload "rid3.examples/reload"}
:compiler {:main rid3.examples
:optimizations :none
:output-to "dev-resources/public/js/examples.js"
:output-to "dev-resources/public/js/examples-dev.js"
:output-dir "dev-resources/public/js/examples-dev"
:asset-path "js/examples-dev"
:source-map-timestamp true
Expand Down
2 changes: 1 addition & 1 deletion src/basics/rid3/b01_make_elem.cljs
View file
Expand Up @@ -29,7 +29,7 @@
(.attr "height" height)
(.attr "width" width)))}

;; This of pieces as the things you are drawing on your
;; Think of pieces as the things you are drawing on your
;; whiteboard.
:pieces
[{:kind :elem
Expand Down
210 changes: 210 additions & 0 deletions src/examples/rid3/bar_intermediate.cljs
View file
@@ -0,0 +1,210 @@
(ns rid3.bar-intermediate
(:require
[reagent.core :as reagent]
[rid3.core :as rid3]
[rid3.examples-util :as util]
[goog.object :as gobj]
))

(def cursor-key :bar-intermediate)

(def height 140)
(def width 260)

(def margin {:top 8
:left 32
:right 16
:bottom 40})

(defn translate [left top]
(str "translate("
(or left 0)
","
(or top 0)
")"))

(def color
(-> js/d3
(.scaleOrdinal #js ["#3366CC"
"#DC3912"
"#FF9900"])))

(def transition-duration 800)


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Dataset

(defn ->mock-dataset []
(mapv #(hash-map :label %
:value (rand-int 200))
["A" "B" "C"]))

(defn prepare-dataset [ratom]
(-> @ratom
(get :dataset)
clj->js))



;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Scales

(defn ->x-scale [ratom]
(let [{:keys [dataset]} @ratom
labels (mapv :label dataset)]
(-> js/d3
.scaleBand
(.rangeRound #js [0 width])
(.padding 0.1)
(.domain (clj->js labels)))))

(defn ->y-scale [ratom]
(let [{:keys [dataset]} @ratom
values (mapv :value dataset)
max-value (apply max values)]
(-> js/d3
.scaleLinear
(.rangeRound #js [height 0])
(.domain #js [0 max-value]))))


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Axes

(defn lighten-axis [node]
;; lighten path
(-> node
(.select "path")
(.style "stroke" "lightgrey"))

;; light text
(-> node
(.selectAll ".tick text")
(.style "fill" "#404040"))

;; light line
(-> node
(.selectAll ".tick line")
(.style "stroke" "lightgrey")))


(defn x-axis-did-mount [node ratom]
(let [x-scale (->x-scale ratom)]
(-> node
(.attr "transform" (translate 0 height))
(.call (.axisBottom js/d3 x-scale)))
(lighten-axis node)))


(defn ->y-axis [did-mount?]
(fn [node ratom]
(let [y-scale (->y-scale ratom)]

;; create axis
(if did-mount?
(-> node
(.call (-> (.axisLeft js/d3 y-scale)
(.ticks 3))))
;; Add did-update version that transitions on re-render (i.e.,
;; when data changes)
(-> node
.transition
(.duration transition-duration)
(.call (-> (.axisLeft js/d3 y-scale)
(.ticks 3)))))

(lighten-axis node)
)))


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Bars

(defn ->bars [did-mount?]
(fn [node ratom]
(let [y-scale (->y-scale ratom)
x-scale (->x-scale ratom)]

;; common
(-> node
(.attr "x" (fn [d]
(let [label (gobj/get d "label")]
(x-scale label))))
(.attr "fill" (fn [d i]
(color i)))
(.attr "width" (.bandwidth x-scale)))

;; only for did-mount, set have bars grow from x-axis
(when did-mount?
(-> node
(.attr "height" 0)
(.attr "y" height)))

;; add transition to bars height on page load and when data
;; changes
(-> node
.transition
(.duration transition-duration)
(.attr "height" (fn [d]
(let [value (gobj/get d "value")]
(- height
(y-scale value)))))
(.attr "y" (fn [d]
(let [value (gobj/get d "value")]
(y-scale value))))))))



;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Example

(defn example [app-state]
(let [viz-ratom (reagent/cursor app-state [cursor-key])]
(reset! viz-ratom {:dataset (->mock-dataset)})
(fn [app-state]
[:div
[:h4 "Intermediate Bar Chart"]
[util/link-source (name cursor-key)]
[:button
{:on-click #(swap! viz-ratom assoc :dataset (->mock-dataset))}
"Randomize data"]

[rid3/viz
{:id "bar-intermediate"
:ratom viz-ratom
:svg {:did-mount
(fn [node ratom]
(-> node
(.attr "width" (+ width
(get margin :left)
(get margin :right)))
(.attr "height" (+ height
(get margin :top)
(get margin :bottom)))))}

:main-container {:did-mount
(fn [node ratom]
(-> node
(.attr "transform" (translate
(get margin :left)
(get margin :right)))))}
:pieces
[{:kind :container
:class "x-axis"
:did-mount x-axis-did-mount}

{:kind :container
:class "y-axis"
:did-mount (->y-axis true)
:did-update (->y-axis false)}

{:kind :elem-with-data
:class "bars"
:tag "rect"
:prepare-dataset prepare-dataset
:did-mount (->bars true)
:did-update (->bars false)
}]
}]
])))
2 changes: 1 addition & 1 deletion src/examples/rid3/bar_simple.cljs
View file
Expand Up @@ -13,7 +13,7 @@

(def margin {:top 8
:left 32
:right 8
:right 16
:bottom 40})

(defn translate [left top]
Expand Down
20 changes: 18 additions & 2 deletions src/examples/rid3/examples.cljs
View file
Expand Up @@ -5,7 +5,9 @@
[re-frisk.core :as rf]
[rid3.pie-simple :as pie-simple]
[rid3.bar-simple :as bar-simple]
[rid3.bar-intermediate :as bar-intermediate]
[rid3.scatter-simple :as scatter-simple]
[rid3.scatter-intermediate :as scatter-intermediate]
))


Expand All @@ -29,12 +31,16 @@

[:section
[:h3 "Bar Chart"]
[bar-simple/example app-state]
[:div.flex-container.flex-wrap
[bar-simple/example app-state]
[bar-intermediate/example app-state]]
]

[:section
[:h3 "Scatter plot"]
[scatter-simple/example app-state]
[:div.flex-container.flex-wrap
[scatter-simple/example app-state]
[scatter-intermediate/example app-state]]
]

[:section
Expand Down Expand Up @@ -66,6 +72,16 @@
button {
margin:0;
}
.flex-container{
display:-ms-flexbox;
display:flex
}
.flex-container.flex-wrap{
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
"]


Expand Down

0 comments on commit 995b8ce

Please sign in to comment.