Creating Charts for the Web - Clojure Data Analysis - page 312

We can use the same namespace declaration that we did in the Creating HTML with
Hiccup recipe.

I've transformed the CSV data into JSON, so we can serve it statically. You can download this
from http://www.ericrochester.com/clj-data-analysis/data/census-race.
json and put it into the resources/data/ directory in your project.

How to do it…

There are a number of steps that need to be performed to add a resource to a web
application, as shown here:

1. Before we get started, we need to download the NVD3 style sheet from

https://raw.github.com/novus/nvd3/master/src/nv.d3.css and
save it into resources/css .

2. We'll also need the NVD3 JavaScript library itself from https://raw.github.com/

novus/nvd3/master/nv.d3.min.js . Save it to resources/js .

3. Now, let's add a Hiccup template function to the src/web_viz/web.clj ile. We

can pass it a title and some content, and it will ill in the rest of the page:
(defn d3-page
[title js body & {:keys [extra-js] :or {extra-js []}}]
(html5
[:head
[:title title]
(include-css "/css/nv.d3.css"))
(include-css "/css/style.css")]
[:body
(concat
[body]
[(include-js "http://d3js.org/d3.v3.min.js")
(include-js "/js/nv.d3.min.js")]
(map include-js extra-js)
[(include-js "/js/script.js")
(javascript-tag js)])]))

4. Let's also add some ClojureScript infrastructure. This function will abstract out the

boilerplate to create NVD3 and D3 charts. We'll put this and the next few deinitions
into src-cljs/webviz/core.cljs , as shown here:
;;; A group of values. Each group has a key/label and
;;; a JS array of point values.
(deftype Group [key values])
;;; A point. Each point has a location (x, y) and a
;;; size.
(deftype Point [x y size])