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

With these bits of infrastructure, we can create the plot, as follows:

1. We'll deine a handler for the page itself, in the src/web_viz/web.clj ile, using
the d3-page function. This will embed the JavaScript to create the chart and create
an SVG element to contain it:
(defn scatter-charts []
(d3-page "Scatter Chart"
"webviz.scatter.scatter_plot();"
[:div#scatter.chart [:svg]]))

2. Next, we'll deine the routes for it. You can add the highlighted routes to the current
set, as follows:
(defroutes
site-routes
(GET "/scatter" [] (scatter-charts))
(GET "/scatter/data.json" []
(redirect "/data/census-race.json"))
(route/resources "/")
(route/not-found "Page not found"))

3. Let's add a little style to the chart. Create resources/css/style.css and add

this:
div.chart {
height: 450px;
width: 650px;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: smaller;
}

4. Now, let's create a new ile named src-cljs/webviz/scatter.cljs .
The namespace declaration for this is given as follows:
(ns webviz.scatter
(:require [webviz.core :as webviz]))

5. We'll need to summarize the data in order to get the totals for the white and

African-American populations by state. The following functions will take care of this:
(defn sum-by [key-fn coll]
"This maps the values in a collection and sums the
results."
(reduce + 0 (map key-fn coll)))
(defn sum-values [key-fn coll]