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

How to do it…

We'll follow the same worklow as we did in the last recipe: write a handler, add a route,
and write the client-side ClojureScript. To do this, perform the following steps:

1. The handler will return a D3 page, complete with the code to create the DIV and

SVG elements and to call the ClojureScript function that we'll deine in a minute:
(defn bar-chart []
(d3-page "Bar Chart"
"webviz.barchart.bar_chart();"
[:div#barchart.chart [:svg]]))

2. Next, we'll add the routes for this chart:

(defroutes
site-routes
(GET "/barchart" [] (bar-chart))
(GET "/barchart/data.json" []
(redirect "/data/chick-weight.json"))
(route/resources "/")
(route/not-found "Page not found"))

3. Now, we'll create the ClojureScript. Create a src-cljs/webviz/barchart.cljs

ile and add this namespace declaration:
(ns webviz.barchart
(:require [webviz.core :as webviz]))

4. We'll convert the data into two categories of the Group and Point data structures

that NVD3 expects. For the irst category, get-diet-counts expects a hash table
that associates a diet code with the items from the dataset that have this diet code.
The y value for the point is the count of those items:
(defn count-point [pair]
(let [[diet items] pair]
(webviz/Point. diet (count items) 1)))
(defn get-diet-counts [diet-groups]
(apply array (map count-point diet-groups)))

5. We'll add a pair of functions for the other category. The y value for these points will be

the sum of the weights, as shown here:
(defn sum-by [key-fn coll]
(reduce + 0 (map key-fn coll)))
(defn weight-point [pair]
(let [[diet items] pair