                          (inc tweet-count)))))
 
                   :news-frequencies
-                  (om/transact!
-                   app
-                   :news-frequencies
-                   (fn [old] data)))
+                  (do
+                    (om/transact!
+                     app
+                     :news-frequencies
+                     (fn [old] data))
+                    (let [freqs data
+                          text (mapv first data)
+                          margin {:top 50 :right 50 :bottom 50 :left 50}
+                          width (- (.-clientWidth (. js/document (getElementById "tweets-count"))) (margin :left) (margin :right))
+                          height (- 500  (margin :top) (margin :bottom))]
+                      (if (empty? freqs)
+                        nil
+                        (draw-bars "#tweets-count" freqs text height width margin)))))
                 (recur))))))
 
     om/IRenderState

  (-> d3
      .-scale
      (.linear)
      (.domain [(apply max data) 0])
      (.range [height 0])))


(defn create-svg [margin width height]
  (-> d3
      (.select "#tweets-count")
      (.append "svg")
      (.attr {:width  (+ width (margin :left) (margin :right))
              :height (+ height (margin :top) (margin :bottom))})
      (.append "g")
      (.attr {:transform (str "translate(" (margin :left) "," (margin :top) ")")})))


(defn create-bars [data height width margin]
  (let [svg (create-svg margin width height)
        x1 (x data width)
        y1 (y data height)]
    (-> svg
        (.selectAll "g.bar")
        (.data data)
        (.enter)
        (.append "g")
        (.attr (clj->js {:class "bar"
                         :transform #(str "translate(" (x1 %2) "," (- height  (y1 (data %2))) ")" )}))
        (.style {:fill "steelblue"}))))


(defn draw-bars [data height width margin]
  (let [bars (create-bars data height width margin)
        x1 (x data width)
        y1 (y data height)]
    (do
      (-> bars
          (.append "rect")
          (.attr {:height  #(y1 %)
                  :width (.rangeBand x1)}))
      (-> bars
          (.append "text")
          (.attr {:x (/ (.rangeBand x1) 2)
                  :y y1
                  :dy "-0.35em"
                  :text-anchor "middle"})
          (.style "fill" "white")
          (.text identity)))))

;; --- D3 end ---
(defsnippet tweet-item "templates/tweet-list.html" [:.tweet-item]
  [tweet owner]
  {[:.tweet-text] (content (:text tweet))



(deftemplate stat-screen "templates/stats.html" [app]
  {[:#selected-stat] (content "Tweets Count")})



(deftemplate tweet-list "templates/tweet-list.html" [data owner]
