graph.cljs

(defn mount-viz []
  (let [svg       (-> (d3/select "#chart")
                      (.append "svg")
                      (.attr "width" 800)
                      (.attr "height" 600)
                      (.append "g"))
        x         (-> (d3/scaleLinear)
                      (.domain #js [(d3/min data) (d3/max data)])
                      (.range #js [0 800]))
        _         (-> (.append svg "g")
                      (.attr "transform" (str "translate(0," 600 ")"))
                      (.call (d3/axisBottom x)))
        histogram (-> (d3/histogram)
                      (.value identity)
                      (.domain (.domain x))
                      (.thresholds (.ticks x 70)))
        bins      (histogram data)
        y         (-> (d3/scaleLinear)
                      (.range #js [600 0]))
        _         (.domain y #js [0 (d3/max bins (fn [d] (.-length d)))])
        _         (-> (.append svg "g")
                      (.call (d3/axisLeft y)))]
    (-> (.selectAll svg "rect")
        (.data bins)
        (.enter)
        (.append "rect")
        (.attr "x" 1)
        (.attr "transform"
               (fn [d]
                 (str "translate(" (x (.-x0 d)) "," (y (.-length d)) ")")))
        (.attr "width"
               (fn [d]
                 (- (x (.-x1 d))
                    (x (.-x0 d))
                    -1)))
        (.attr "height"
               (fn [d]
                 (- 600 (y (.-length d)))))
        (.style "fill" "#69b3a2"))))

(defn render []
  (r/create-class
   {:component-did-mount
    (fn [this]
      (mount-viz))
    :render
    (fn [this]
      [:div#chart])}))