Skip to content

Instantly share code, notes, and snippets.

@actsasgeek
Last active January 24, 2016 21:59
Show Gist options
  • Save actsasgeek/3120ac9cdae44c5264b0 to your computer and use it in GitHub Desktop.
Save actsasgeek/3120ac9cdae44c5264b0 to your computer and use it in GitHub Desktop.
An attempt to convert a d3 JavaScript chart to ClojureScript.
(def ^:export letter-data (clj->js [
{"letter" "A" "frequency" .08167}
{"letter" "B" "frequency" .01492}
{"letter" "C" "frequency" .02782}
{"letter" "D" "frequency" .04253}
{"letter" "E" "frequency" .12702}
{"letter" "F" "frequency" .02288}
{"letter" "G" "frequency" .02015}
{"letter" "H" "frequency" .06094}
{"letter" "I" "frequency" .06966}
{"letter" "J" "frequency" .00153}
{"letter" "K" "frequency" .00772}
{"letter" "L" "frequency" .04025}
{"letter" "M" "frequency" .02406}
{"letter" "N" "frequency" .06749}
{"letter" "O" "frequency" .07507}
{"letter" "P" "frequency" .01929}
{"letter" "Q" "frequency" .00095}
{"letter" "R" "frequency" .05987}
{"letter" "S" "frequency" .06327}
{"letter" "T" "frequency" .09056}
{"letter" "U" "frequency" .02758}
{"letter" "V" "frequency" .00978}
{"letter" "W" "frequency" .02360}
{"letter" "X" "frequency" .00150}
{"letter" "Y" "frequency" .01974}
{"letter" "Z" "frequency" .00074}]))
(defn ^:export draw-chart [data]
(let [margin (clj->js {"top" 20, "right" 20, "bottom" 30, "left" 40})
width (js/parseInt (.. js/d3 (select "#foo") (style "width")))
width (- width (.-left margin) (.-right margin))
height (js/parseInt (.. js/d3 (select "#foo") (style "height")))
height (- height (.-top margin) (.-bottom margin))
x-scale (.. (js/d3.scale.ordinal) (rangeRoundBands (clj->js [0, width]) 0.1))
y-scale (.. (js/d3.scale.linear) (range (clj->js [height, 0])))
x-axis (.. (js/d3.svg.axis.) (scale x-scale) (orient "bottom"))
y-axis (.. (js/d3.svg.axis.) (scale y-scale) (orient "left") (ticks 10 "%"))
svg (.. js/d3
(select "#foo")
(append "svg")
(attr "width" (+ width (.-left margin) (.-right margin)))
(attr "height" (+ height (.-top margin) (.-bottom margin)))
(append "g")
(attr "transform" (str "translate(" (.-left margin) "," (.-top margin) ")")))]
(.domain x-scale (.map data (fn [d] (.-letter d))))
(.domain y-scale (clj->js [0 (js/d3.max data (fn [d] (.-frequency d)))]))
(.. svg
(append "g")
(attr "class" "x axis")
(attr "transform" (str "translate( 0," height ")"))
(call x-axis))
(.. svg
(append "g")
(attr "class" "y axis")
(call y-axis)
(append "text")
(attr "transform" "rotate(-90)")
(attr "y" 6)
(attr "dy" ".71em")
(style "text-anchor" "end")
(text "Frequency"))
(.. svg
(append "g")
(selectAll ".bar")
(data data)
(enter)
(append "rect")
(attr "class" "bar")
(attr "x" (fn [d] (x-scale (.-letter d))))
(attr "width" (.rangeBand x-scale))
(attr "y" (fn [d] (y-scale (.-frequency d))))
(attr "height" (fn [d] (- height (y-scale (.-frequency d))))))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment