Database Reference
In-Depth Information
6.
We'll use D3's facilities to scale the values onto the graph. These objects will be
created by
get-scales
:
(defn get-scales [width height]
[(.. js/d3 -time scale (range #js [0 width]))
(.. js/d3 -scale linear (range #js [height 0]))])
7.
D3 also provides helpers to calculate and draw the axes:
(defn get-axes [x y]
[(.. js/d3 -svg axis (scale x) (orient "bottom"))
(.. js/d3 -svg axis (scale y) (orient "left"))])
8.
The graph's line itself will be created by getting the date and the closing price and
scaling these by the appropriate scales (
x
or
y
), as follows:
(defn get-line [x y]
(.. js/d3 -svg line
(x #(x (.-date %)))
(y #(y (.-close %)))))
9.
The main SVG element will be populated using the
get-svg
function:
(defn get-svg [margin width height]
(.. js/d3 (select "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) \)))))
10. The next several functions will apply the data to the graph in order to populate
the axes and the line. However, the irst two functions that directly deal with the
data will simply make sure that the data values are of the right type and calculate
the domains:
(defn coerce-datum [parse-date d]
(aset d "date" (parse-date (.-date d)))
(aset d "close" (js/parseFloat (.-close d))))
(defn set-domains [x y data]
(.domain x (.extent js/d3 data #(.-date %)))
(.domain y (.extent js/d3 data #(.-close %))))
11. The next two functions will use the data to draw the
x
and
y
axes:
(defn build-x-axis [height svg x-axis]
(.. svg (append "g")
(attr "class" "x axis")
