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

How it works…

At this point, we can see some payoff for all of the work and code we put into the Creating
scatter plot with NVD3 recipe. As we could leverage the create-chart function, we avoided
a lot of the boilerplate involved in creating graphs.

However, setting up a web resource in this manner still involves a number of standard steps,
as follows:

1. Deine the resource on the server ( bar-chart ).
2. Deine the routes to access this resource.
3. Create the ClojureScript ile.

4. In ClojureScript, write functions to transform the data.

5. In ClojureScript, create the chart.

Creating histograms with NVD3

To show the distribution of our data, we generally use a histogram. In this recipe, we'll use a
histogram to display the distribution of lengths in the abalone dataset.

Getting ready

We'll use the same dependencies and plugins in our project.clj ile as we did in the
Creating scatter plots with NVD3 recipe. Also, we'll use the framework we've created in the
recipes in this chapter upto the Creating scatter plots with NVD3 recipe.

For the data, we'll use the abalone dataset from the Creating histograms with Incanter
recipe. I've transformed the data to JSON, and you can download it from http://www.
ericrochester.com/clj-data-analysis/data/abalone.json . Save it to the
resources/data/ directory in your web application.

How to do it…

We'll create the handler and the routes and then we'll spend most of this recipe in adding the
ClojureScript to create the graph. To do this, perform the following steps:

1. For the handler, we'll pass the options for this chart to the d3-page function,

as shown here:
(defn hist-plot []
(d3-page "Histogram"
"webviz.histogram.histogram();"
[:div#histogram.chart [:svg]]))