D3 and ClojureScript

This is a guest post by Joanne Cheng (twitter), a freelance software engineer and visualization consultant based in Denver, Colorado. She has taught workshops and spoken at conferences about visualizing data with D3. Turns out ClojureScript and D3 are a great fit, in this post she’ll show you how to create your own visualization using the power of D3 and the elegance of ClojureScript.

I use D3.js for drawing custom data visualizations. I love using the library, but I wanted to try one of the several compile to JavaScript options, and I decided to look into ClojureScript. It ended up working out well for me, so I’m going to show you how I created a D3.js visualization using ClojureScript!

What we’re visualizing

The U. S. Energy Administration releases data on how much energy the US produces and consumes and what types of energy are used. NPR released slopegraphs of how much and what types of energy each state in the US produces. The article inspired me to dive into the data and create a slopegraph that shows how energy generation has changed in the entire country over the last 10 years.

I downloaded energy generation data from 2005 to 2015 from the U. S. Energy Information Administration data browser, converted it to a Clojure hash map, and used it to create the visualization.


Install Leiningen

If you don’t have Clojure set up on your machine or installed it years ago, telling yourself that you would look into Clojure one day, you’re going to need to install Leiningen. Leiningen is your build tool and dependency manager for this project. You can use your package manager of choice to install it (preferred) or check out the installation instructions on the official website.


We’re going to create a new Figwheel project. Figwheel is what is going to create our new project directory, build our ClojureScript code, and autoreload the browser every time our code changes.

In your command line, go to the directory where you want your project to live and run the following command:

lein new figwheel us-energy-slopegraph

Sit back a few seconds, and make sure no errors appear. Here’s what the output should look like:

Generating fresh 'lein new' figwheel project.

Change into your 'us-energy-slopegraph' directory and run 'lein figwheel'
Wait for it to finish compiling
Then open 'http://localhost:3449/index.html' in your browser

Now you can change into your newly created project directory, and start Figwheel:

cd us-energy-slopegraph
lein figwheel

You should now see something like this:

$ lein figwheel
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid ;)
Figwheel: Starting server at
Figwheel: Watching build - dev
Compiling build :dev to "resources/public/js/compiled/us-energy-slopegraph.js" from ["src"]...
Successfully compiled build :dev to "resources/public/js/compiled/us_energy_slopegraph.js" in 1.689 seconds.
Prompt will show when Figwheel connects to your application

After a little while your browser will pop up with Figwheel’s welcome page, located at Now your ClojureScript project is all set up!

Every time you save a file in the project directory, Figwheel will automatically recompile and reload your browser, so you don’t need to manually refresh the page.

Once it’s fully loaded, Figwheel will switch to a REPL, a command line prompt that lets you evaluate bits of ClojureScript. This allows you to enter bits of ClojureScript code directly into your terminal, and it will be executed by your browser.

Type this in and press “enter”:

(js/alert "Now look at your browser!")

Installing D3.js

In your us-energy-slopegraph project directory, open the file called project.clj. Insert [cljsjs/d3 "4.12.0-0"] in that list of library names after :dependencies: It should look something like this:

  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.946"]
                 [org.clojure/core.async  "0.3.443"]
                 [cljsjs/d3 "4.12.0-0"]]

Now you’re going to want Figwheel to install this dependency. Restart Figwheel by hitting Ctrl-D and running lein figwheel again. Figwheel will install any new dependencies added to project.clj.

Open up src/us_energy_slopegraph/core.cljs — you’ll mostly be working in this file. You may notice there are a few lines of boilerplate code. Remove the println and the defonce app-state lines - we don’t need those for this project. core.cljs should now look something like this:

(ns example-project.core
    (:require ))


(defn on-js-reload []

The first line is the namespace definition. This is also where we’ll load the D3.js package that we just installed. Require cljsjs.d3 in this file by altering the first two lines to look like this:

(ns us-energy-slopegraph.core
  (:require [cljsjs.d3]))

By loading this namespace you make sure the necessary JavaScript files get loaded. These typically define global variables, which you can access with the js prefix, like js/d3. If you wanted to add React to this ClojureScript project, you would add it as a dependency, require cljsjs.react, and access it with js/React.

ClojureScript and JavaScript libraries

Using existing JavaScript libraries from ClojureScript can be challenging. ClojureScript does aggressive code optimizations, but these only work when the compiler is able to analyze the complete project, including third party libraries, and this isn’t always possible for code found “in the wild”.

So called “externs” provide extra hints to the compiler about external references that should not be optimized away. The CLJSJS project bundles popular JavaScript libraries together with the necessary externs, and publishes them on Clojure’s code repository: Clojars.

More recent versions of ClojureScript support NPM packages directly, so in time the need for CLJSJS will go away, but for now it’s still the most convenient way to include JavaScript libraries in your ClojureScript project.


Let’s first add some scaffolding to make sure reloading works smoothly.

When you open http://localhost:3449/index.html in your browser, it’s loading resouces/public/index.html. Let’s make a few changes so it works better with this project.

First add this CSS link to the <head> section:

  <link href="https://rawgit.com/lambdaisland/us-energy-slopegraph/master/resources/public/css/style.css" rel="stylesheet" type="text/css">

And then replace the <body> tag with this:

  <div id="slopegraph">
  <script src="js/compiled/us_energy_slopegraph.js" type="text/javascript"></script>

Save and reload the page in the browser. We’ve added a <div> for the visualization, and an extra <script> tag. This script calls an exported function called main in the us-energy-slopegraph.core namespace and is called once when the page loads. We’ll implement this main function in ClojureScript.

Add this main function (make sure it’s before the on-js-reload function) in core.cljs and export it so it’s callable from JavaScript.

(defn ^:export main []
  (println "This is the main function."))

Also call this main function in on-js-reload

(defn on-js-reload []
  (println "This is the on-js-reload function.")

Now make some changes in core.cljs — you can just change the string in the println function — and save the file. When you look at your browser’s JavaScript console you’ll see that on-js-reload gets called every time you make changes.

Why are we using this pattern? Figwheel has an autorefresher built in that will load what we write into the browser. We want to create a main function so we can define exactly what happens when the the app loads the first time, and what happens on subsequent reloads.


One of D3’s core concepts is the data join. This tutorial won’t go into the deep parts of D3.js, so if you’re completely unfamilar with it, I suggest looking into Mike Bostock’s blog post or the book Interactive Data Visualization for the Web.

We’re going to be drawing our visualization using SVG. To start, we’ll need to create an SVG element using D3.js.

Before you continue you might want to grab this code template off Github. ClojureScript can be quite particular about the order you put things in. The template contains empty stubs for most of the functions so you can simply fill them in, and named sections that should make it clear where to put the rest.

;; data

(def height 450)
(def width 540)

;; Lifecycle

(defn append-svg []
  (-> js/d3
      (.select "#slopegraph")
      (.append "svg")
      (.attr "height" height)
      (.attr "width" width)))

append-svg is a function that selects an HTML element with the id of slopegraph, appends an svg element, and sets height and width attributes on it. The Mozilla Web docs is a resouce that can tell us what attributes we can set on certain SVG elements are great to have as a reference when working with SVG. We defined the height and width values in the first two lines of the code example above because we’ll be using them throughout the code example.

In JavaScript append-svg would look like this:

function append_svg() {
  return d3.select("#slopegraph").append("svg").attr("height", height).attr("width", width);

Try calling (append-svg) from the Figwheel REPL running in your terminal.


Now inspect the page in your browser (F12). You should see an SVG element in your HTML now!

<div id="slopegraph">
    <svg height="450" width="540">

Now call append-svg from the main function so that you have an SVG element to work with when the page loads.

(defn ^:export main []

Save the changes, and inspect the HTML on index.html again. Do you notice anything unusual?

There are two SVG elements! When we save our changes, on-js-reload gets called and calls main, which calls append-svg.

To solve this issue for now, let’s remove the SVG element when on-js-reload gets called. Add the remove-svg function to core.cljs, and modify on-js-reload so we call remove-svg before main is called.

(defn remove-svg []
  (-> js/d3
      (.selectAll "#slopegraph svg")

(defn on-js-reload []

As soon as you save this change core.cljs will reload, Figwheel will invoke on-js-reload, which then removes any leftover <svg> elements, before adding a new one. No more duplicate SVG elements!

You’ll notice I used the thread-first macro (->) in append-svg and remove-svg when chaining calls to D3 methods. The thread-first macro takes a starting value and a number of function calls. The starting value is used as the first argument for the first function, then the result is used as first argument for the next function, and so forth. This helps us “chain” the D3 selection methods together. Without it remove-svg would look like this:

(defn remove-svg []
  (.remove (.selectAll js/d3 "#slopegraph svg")))

Those periods in .remove and .selectAll indicate that we’re calling JavaScript methods, rather than plain ClojureScript functions.

You may also want to check out the .. operator. It works similarly to thread-first, but you don’t have to prefix all those JavaScript methods with a .. The ClojureScript Interop episode on Lambda Island explains more about this syntax.

The benefit of using -> over .. is that it allows you to freely mix ClojureScript functions and JavaScript methods.

The Data

I used a separate script to transform the CSV data I downloaded from U. S. Energy Information Administration into a ClojureScript hash map containing the percentages of a few energy sources generated (Note: “Renewables” is the sum of biomass, geothermal, solar, and wind). This is the data we’ll be working with to draw our slopegraph. Insert this hash map definition into core.cljs.

(def data {2005 {:natural-gas 0.2008611514256557
                 :coal        0.48970650816857986
                 :nuclear     0.19367190804075465
                 :renewables  0.02374724819670379}
           2015 {:natural-gas 0.33808321253456974
                 :coal        0.3039492492908485
                 :nuclear     0.1976276775179704
                 :renewables  0.08379872568702211}})


Let’s create a function called draw-slopegraph that takes a D3 selection called svg and the data hash map. Update main to call draw-slopegraph with the svg element created by append-svg and the data hash map. This will make sure that our visualization reflectes the changes we make in our code.

(defn draw-slopegraph [svg data])


(defn ^:export main []
  (let [svg (append-svg)]
    (draw-slopegraph svg data)))

Each column of our slope graph represents a year. The column on the left will display 2005 data, the column on the right will display 2015 data. If you look back at the slopegraph examples in the NPR article, you’ll notice that each text element is positioned vertically based on the associated numeric value. The text element in this case is the hash map key (‘natural-gas’, ‘coal’, etc), and the numeric value is the hash map value (in percent). We’ll use D3.js to position those names correctly for each column.

Create a function called draw-column. draw-column will take a D3.js selection (where the text elements be drawn inside), a year’s worth of data, the column index, and any additional svg attributes. draw-column will do the standard D3.js procedure for creating new elements from data: create a placeholder selection, bind the data, call enter, create new elements (in this case, SVG text elements), then set attributes for those text elements.

(defn draw-column [svg data-col index custom-attrs]
  (-> svg
      (.selectAll (str "text.slopegraph-column-" index))
      (.data (into-array data-col))
      (.append "text")))

Notice the call to into-array when we pass our data to the .data call. One of the things you’ll find when using JavaScript libraries from ClojureScript is that sometimes you need to turn ClojureScript data structures into plain JavaScript ones. into-array turns a ClojureScript sequence type into a native JavaScript array. I could have also used clj->js, but clj->js recursively turns all ClojureScript values in data into native JavaScript types, which means we can’t use ClojureScript methods on those JavaScript values.

Now modify draw-slopegraph to make sure we’re calling draw-column for each year of data.

(defn draw-slopegraph [svg data]
  (let [data-2005 (get data 2005)
        data-2015 (get data 2015)]
    (draw-column svg data-2005 0 {"x" (* width 0.25)})
    (draw-column svg data-2015 0 {"x" (* width 0.75)})))

We’re setting the x attribute for each column to align them horizontally.

Save your changes, open index.html and inspect the HTML. You won’t see anything on the page, but you’ll see that we just created text SVG elements for each item in data-col.

We need to set the y attribute of those text elements, which will set the vertical position. We’re going to create a helper function that will return a D3 scale function which will help us translate those values into pixel values.

;; helpers

(def height-scale
  (-> js/d3
      (.domain #js [0 1])
      (.range #js [(- height 15) 0])))

For the display text itself, we want to display the name of the energy source and the percent value. For example, :natural-gas 0.2008611514256557 will be Natural gas 20.08%. Some more helper functions should help us out with that.

Modify the require statement to include clojure.string.

(ns us-energy-slopegraph.core
  (:require [cljsjs.d3]
            [clojure.string :as str]))

Then add these two helpers:

(defn format-percent [value]
  ((.format js/d3 ".2%") value))

(defn format-name [name-str]
  (-> name-str
      (str/replace "-" " ")

format-percent uses D3’s formatters to convert the decimal number into a percent string. format-name does some simple string manipulation to clean up the name string. Feel free to try out these two functions using the REPL!

dev:cljs.user=> (us-energy-slopegraph.core/format-name "natural-gas")
"Natural gas"
dev:cljs.user=> (us-energy-slopegraph.core/format-percent 0.19293818293)

Now let’s set the attributes in the text elements we created in draw-column. Add the attrs function below and modify draw-column.

;; helpers

(defn attrs [el m]
  (doseq [[k v] m]
    (.attr el k v)))

;; draw functions

(defn draw-column [svg data-col index custom-attrs]
  (-> svg
    (.selectAll (str "text.slopegraph-column-" index))
    (.data (into-array data-col))
    (.append "text")
    (.classed (str "slopegraph-column" index) true)
    (.text (fn [[k v]] (str (format-name (name k)) " " (format-percent v))))
    (attrs (merge custom-attrs
            {"y" (fn [[_ v]] (height-scale v))}))))

The attrs function is a helper function that helps us pass in SVG attributes to a selection using a whole hash map, rather than calling attr for every attribute we want to set without needing to install an external library.

Save your changes and look at index.html again. You should now see text!

We’re still missing the line and the header, but let’s first refactor the code to make drawing those easier. The data join pattern in D3.js is going to be used again and again, so let’s pull out some of that code into a separate function.

;; helpers

(defn data-join [parent tag class data]
  (let [join  (-> parent
                  (.selectAll (str tag "." class))
                  (.data (into-array data)))
        enter (-> join
                  (.append tag)
                  (.classed class true))]
    (-> join (.exit) (.remove))
    (.merge join enter)))

;; draw functions

(defn draw-column [svg data-col index custom-attrs]
  (-> svg
      (data-join "text" (str "text.slopegraph-column-" index) data-col)
      (.text (fn [[k v]] (str (format-name (name k)) " " (format-percent v))))
      (attrs (assoc custom-attrs
                    "y" (fn [[_ v]] (height-scale v))))))

With that data-join in place we’re now ready to implement draw-header and draw-line

(def column-1-start (/ width 4))
(def column-space (* 3 (/ width 4)))

(defn draw-header [svg years]
  (-> svg
      (data-join "text" "slopegraph-header" years)
      (.text (fn [data _] (str data)))
      (attrs {"x" (fn [_ index]
                    (+ 50 (* index column-space)))
              "y" 15})))

(defn draw-line [svg data-col-1 data-col-2]
  (-> svg
      (data-join "line" "slopegraph-line" data-col-1)
      (attrs {"x1" (+ 5 column-1-start)
              "x2" (- column-space 5)
              "y1" (fn [[_ v]]
                     (height-scale v))
              "y2" (fn [[k _]]
                     (height-scale (get data-col-2 k)))})))

And call them from draw-slopegraph

(defn draw-slopegraph [svg data]
  (let [data-2005 (get data 2005)
        data-2015 (get data 2015)]

    (draw-column svg data-2005 1 {"x" column-1-start})
    (draw-column svg data-2015 2 {"x" column-space})

    (draw-header svg [2005 2015])
    (draw-line svg data-2005 data-2015)))

Again I’m not going to go into the details of the D3 API, I hope that intuitively you can get a sense of what is going on. The line connecting the two columns together uses a d3 line generator which works a little differently than the text elements we drew.

There are a lot of things we can do to make this visualization more readable. Maybe we can attach mouse handlers so we can highlight one column at a time, like this slopegraph example here? You may want to clone the finished project and try to add that feature yourself using ClojureScript!

Final thoughts

Learning a new language can be an overwhelming task. There’s the pain of learning new syntax and paradigms, then also build tools, editor tools, a decent number of conceptual talks, and a whole lot more. Getting all these thrown in the face can feel like too much work to get started with a language.

Picking up figwheel meant that I could learn Clojure in a responsive environment with a pretty small setup process. I was able to apply my JavaScript knowledge to ClojureScript and start writing small D3.js visualizations to learn the language. From there, I slowly learned about better ways to write my code, picked up new editor and REPL tools, and continued my Clojure education.

If learning Clojure seems overwhelming, a Figwheel project may be right for you!

Additional Clojure Resources

  • If you want to dive straight into Clojure in a graphical environment with zero setup, I also highly suggest Maria.cloud.
  • Figwheel

D3.js resources

More blog posts

The Classpath is a Lie

A key concept when working with Clojure is “the classpath”, a concept which we inherit from Clojure’s host language Java. It’s a sequence of paths that Clojure (or Java) checks when looking for a Clojure source file (.clj), a Java Class file (.class), or other resources. So it’s a lookup path, conceptually similar to the PATH in your shell, or the “library path” in other dynamic languages.

The classpath gets set when starting the JVM by using the -cp (or -classpath) command line flag.

java -cp src:/home/arne/.m2/repository/org/clojure/clojure/1.10.3/clojure-1.10.3.jar clojure.main

A Tale of Three Clojures

By Alys Brooks

Recently, I was helping a coworker debug an issue with loading a Clojure dependency from a Git repository. (If you don’t know you can do this; it’s very handy. Here’s a guide.) I realized that there were really two Clojures at play: the Clojure that clojure was running to generate the classpath and the Clojure that was used by the actual Clojure program.

Taking a step back, there are really three things we might mean when we say “Clojure”:

Launching the Lambda Island Redesign

It’s finally live! A gorgeous, in-depth redesign of the Lambda Island website. After months of hard work we soft-launched earlier this week. Today we want to tell you a little more about the project, the whys and the hows, and to invite you to check it out. And when you’re done do come tell us what you think on our Discord.

Redesigned front page

We already told you in a previous post how Lambda Island and Gaiwan are changing. In a short amount of time we went from a one man endeavor to a team of six, drastically changing what we are able to take on and pull off.

Lambda Island Open Source Update July 2021

By Alys Brooks

It’s been a while since our last update! Community contributors and Lambda Island team members have been busy working on new projects and improving existing ones. We’re trying to strike a balance between venturing into new territory while ensuring existing projects continue to improve.

If you want to join in, check out our blog post calling for contributions, or jump right in to our first issues list.

Lambda Island is Changing

Last month marked the five year anniversary of Lambda Island. Five years since I quit my job, built a video platform, and figured out how to put together tutorial videos. It’s been quite a ride. All this time I’ve been fortunate to be part of the Clojure community, to watch it grow and evolve, and to help individuals and companies to navigate these waters.

I learned some hard lessons along the way. Like how hard it is to bootstrap an educational content business catering to a niche audience, or how lonely and stressful it can be in business to go it alone.

And with these lessons came changes. I started doing more consulting work again. To some extent it was a necessity, but it also provided me with an opportunity to get involved with many Clojure projects out there in the wild. To work with talented individuals, to learn what amazing things people were doing, and to help shape these companies, products, and the greater narrative around Clojure as a technology and community.

Why are Clojure beginners just like vegans searching for good cheese?

By Ariel Alexi

Have you ever wondered what to do if you love cheese but you want to be a vegan and how this affects you when you learn Clojure?

This was my question too. I love cheese, but I wanted to find a good vegan cheese replacement for my breakfast sandwich. This wasn’t a fun journey, all the vegan cheese substitutes weren’t like the real deal! After a talk with one of my vegan friends, he told me that my point of view over cheese replacement in the sandwich was wrong. Instead of searching for a good and tasty vegan cheese replacement, just replace it with an avocado. Avocado is a good replacement for your morning sandwich without the compromising that you would do with tasteless vegan cheese substitutes.

The beginner's way

By Ariel Alexi

An OOP developer finding her way in the functional world, what could go wrong?

So why Clojure?

Call for Contributions to Lambda Island Open Source

By Alys Brooks

We’re always excited when someone new contributes a fix, test, documentation update, or even a major new feature to our open source projects. If you’re new to programming, open source projects are a great way to get experience working on a larger project. If you’re not so new, they can be an opportunity to try a new technology or work on a kind of software you usually don’t get a chance to. Either way, it’s rewarding to help out your fellow users or developers—these issues are for Kaocha, one of the most popular and advanced Clojure test runners.

But open source can also be intimidating. If you haven’t been sure where to start, then this post is for you! We’ve outlined the process step by step, and we’re here to support you every step of the way.

Logging in Practice with Glögi and Pedestal.log

In an earlier post I tried to map out the Clojure/Java logging landscape a bit, so people can make an informed choice about how to set up logging for their application. There are several solutions out there with different trade-offs, and recently both Timbre and mulog have had some new releases. However until further notice the default logging setup in the “Lambda Island Stack” remains pedestal.log on the backend, and Glögi at the front.

This blog post is a bit of practical advice on how to make good use of logging, with the focus on these two libraries, which both provide the same API, just for a different platform.

This API consists of a number of macros corresponding with the different log levels, which all take key-value pairs as arguments.

Well Behaved Command Line Tools

Yesterday Vlaaad wrote a pretty cool blog post titled Alternative to tools.cli in 10 lines of code. It’s a great read and a very cool hack. It uses read-string to parse command line arguments, resolves symbols, and invokes the first symbol/function, passing in the rest of the parsed arguments. In other words: it’s the most straightforward way to translate a command line invocation into a Clojure function call.

The benefits are illustrated well in the post. It removes all possible friction. Want to add a new subcommand? Just add a function. Adding CLI arguments and options equals adding arguments and options to said function.

It’s actually not too different from what people do in shell scripts sometimes.

Logging in Clojure: Making Sense of the Mess

You may also like Dates in Clojure: Making Sense of the Mess

Logging seems like a simple enough concept. It’s basically println with a couple of extra smarts. And yet it can be oh so confounding. Even when you literally do not care a sigle bit about logging you may still be sent down a rabbit hole because of warnings of things that are or aren’t on the classpath. What even is a classpath?

Lambda Island Open Source Update May 2020

Felipe and I have been busy again, read all about what we’ve been up to in this month’s Lambda Island Open Source update.

We currently have two major projects we are working to get out: Regal and Kaocha-cljs2. They are both still a work in progress, but we’ve again made some good progress this month. Regal is not officially out yet but is at the stage where people can safely start incorporating it into their projects. Kaocha-cljs2 is a big undertaking, but we’re splitting this work into smaller self-contained pieces, and two of those saw their first release this month: Chui and Funnel.


Lambda Island Open Source Update April 2020

With people across the globe isolating themselves it feels sometimes like time is standing still, but looking back it’s been a busy month again for the folks here at Lambda Island. Besides all the maintenance releases we shipped some new features for lambdaisland.uri, our JS logging library Glögi, and a new micro-library, edn-lines. We also have some exciting work in progress, including a brand new browser-based test runner for ClojureScript, written with shadow-cljs in mind.


A big shout goes out to two of our clients, Nextjournal and Pitch. They have made a lot of this work possible either by funding projects directly, or by dogfooding our tools and libraries and giving us an opportunity to improve them. Thank you both for investing in this great ecosystem.

Coffee Grinders, part 2

Back in December I wrote about a coding pattern that I’ve been using more and more often in my work, which I dubbed “Coffee Grinders”. My thoughts around this were still gelling at the time, and so the result was a meandering semi-philosophical post that didn’t really get to the point, and that didn’t seem to resonate that much with people.

Some of the responses I got were “just use functions” or “sounds like a finite-state machine”, which makes it clear that I was not in fact making myself clear.

Having continued to encounter and apply this pattern I’d like to present a more concise, semi-formal definition of coffee grinders.

Advent 2019 part 24, The Last Post

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Day 24, I made it! I did skip a day because I was sick and decided it was more important to rest up, but I’m pretty happy with how far I got.

Let’s see how the others fared who took on the challenge. John Stevenson at Practicalli got four posts out spread out across the advent period, similar to lighting an extra candle every sunday of the advent. Good job!

Advent 2019 part 23, Full size SVG with Reagent

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

I’ve been a big fan of SVG since the early 2000’s. To me it’s one of the great victories of web standards. Mind you, browser support has taken a long time to catch up. Back then you had to embed your SVG file with an <object> tag, and support for the many cool features and modules was limited and inconsistent.

These days of course you can drop an <svg> tag straight into your HTML. What a joy! And since the SVG can now go straight into the DOM, you can draw your SVG with React/Reagent. Now there’s a killer combo.

Advent 2019 part 21, Project level Emacs config with .dir-locals.el

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

An extremely useful Emacs feature which I learned about much too late is the .dir-locals.el. It allows you to define variables which will then be set whenever you open a file in the directory where .dir-locals.el is located (or any subdirectory thereof).

Here’s an example of a .dir-locals.el file of a project I was poking at today.

Advent 2019 part 20, Life Hacks aka Emacs Ginger Tea

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Here’s a great life hack, to peal ginger don’t use a knife, use a spoon. I’m not kidding. Just scrape off the peal with the tip of the spoon, it’s almost too easy.

Here’s a Clojure + Emacs life hack:

Advent 2019 part 19, Advent of Random Hacks

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Something I’m pretty good at is coming up with random hacks. The thing where you’re like “hey how about we plug this thing into that thing” and everyone says “why would you do that that’s a terrible idea” and I’m like (mario voice) “let’s a go”.

And sometimes the result is not entirely useless. Like this little oneliner I came up with yesterday, using Babashka to “convert” a project.clj into a deps.edn.

Advent 2019 part 17, trace! and untrace!

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Here’s a little REPL helper that you may like.

(defn trace! [v]
  (let [m    (meta v)
        n    (symbol (str (ns-name (:ns m))) (str (:name m)))
        orig (:trace/orig m @v)]
    (alter-var-root v (constantly (fn [& args]
                                    (prn (cons n args))
                                    (apply orig args))))
    (alter-meta! v assoc :trace/orig orig)))

(defn untrace! [v]
  (when-let [orig (:trace/orig (meta v))]
    (alter-var-root v (constantly orig))
    (alter-meta! v dissoc :trace/orig)))

Advent 2019 part 16, Coffee Grinders

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Over the last year or so I’ve found myself using some variations on a certain pattern when modelling processes in Clojure. It’s kind of like a event loop, but adapted to the functional, immutable nature of Clojure. For lack of a better name I’m calling these coffee grinders. (The analogy doesn’t even really work but the kid needs to have a name.)

Since I saw Avdi Grimm’s OOPS Keynote at Keep Ruby Weird last year I’ve been thinking a lot about the transaction vs process dichotomy. Avdi talks about the “Transactional Fallacy” from around 15:25. From his slides:

Advent 2019 part 15, jcmd and jstack

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Two shell commands anyone using JVM languages should be familiar with are jcmd and jstack. They are probably already available on your system, as they come bundled with the JDK. Try it out, run jcmd in a terminal.

This is what the result might look like

Advent 2019 part 13, Datomic Test Factories

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

When I started consulting for Nextjournal I helped them out a lot with tooling and testing. Their data model is fairly complex, which made it hard to do setup in tests. I created a factory based approach for them, which has served the team well ever since.

First some preliminaries. At Nextjournal we’re big fans of Datomic, and so naturally we have a Datomic connection as part of the Integrant system map.

Advent 2019 part 12, Pairing in the Cloud with Tmux

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

I’m a strong believer in pair programming. It can be intense and exhausting, and its a skill you need to learn and get good at, but it’s extremely valuable. It improves knowledge sharing, prevents mistakes, and helps people to stay on track to make sure they are building the right thing, which is arguably one of the hardest aspects of our job.

But Gaiwan is a remote-first company. We are spread out across Germany, Brazil, Italy, and work with clients as far away as Singapore and Hong Kong, so we need good ways to pair remotely. For this we need a tool that is

Advent 2019 part 11, Integrant in Practice

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

I’ve been a fan of Integrant pretty much ever since it came out. For me there is still nothing that can rival it.

The recently released clip by the folks from Juxt does deserve an honorable mention. It has an interesting alternative approach which some may prefer, but it does not resonate with me. I prefer my system configuration to be just data, rather than code wrapped in data.

Advent 2019 part 10, Hillcharts with Firebase and Shadow-cljs

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Recently I led a workshop for a client to help them improve their development process, and we talked a lot about Shape Up, a book released by Basecamp earlier this year that talks about their process. You can read it for free on-line, and I can very much recommend doing so. It’s not a long read and there are a ton of good ideas in there.

One of these ideas has also become a feature in Basecamp, namely hill charts. These provide a great way to communicate what stage a piece of work is in. Are you still going uphill, figuring things out and discovering new work, or are you going downhill, where it’s mostly clear what things will look like, and you’re just executing what you discovered?

Advent 2019 part 9, Dynamic Vars in ClojureScript

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Clojure has this great feature called Dynamic Vars, it lets you create variables which can be dynamically bound, rather than lexically. Lexical (from Ancient Greek λέξις (léxis) word) in this case means “according to how it is written”. let bindings for instance are lexical.

(defn hello [x]
  (str "hello " x))

(defn greetings []
  (str "greetings" foo)) ;; *error*

(let [foo 123]
  (hello foo)

Advent 2019 part 8, Everything is (not) a pipe

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

I’ve always been a big UNIX fan. I can hold my own in a shell script, and I really like the philosophy of simple tools working on a uniform IO abstraction. Uniform abstractions are a huge enabler in heterogenous systems. Just think of Uniform Resource Locators and Identifier (URLs/URIs), one of the cornerstones of the web as we know it.

Unfortunately since coming to Clojure I feel like I’ve lost of some of that power. I’m usually developing against a Clojure process running inside (or at least connected to) my trusty editor, and the terminal plays second fiddle. How do I pipe things into or out of that?

Advent 2019 part 7, Do that doto

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

doto is a bit of an oddball in the Clojure repertoire, because Clojure is a functional language that emphasizes pure functions and immutabilty, and doto only makes sense when dealing with side effects.

To recap, doto takes a value and a number of function or method call forms. It executes each form, passing the value in as the first argument. At the end of the ride it returns the original value.

Advent 2019 part 6, A small idiom

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

As an avid tea drinker I’ve been poring (pouring?) over this catalog of teas.

(def teas [{:name "Dongding"
            :type :oolong}
           {:name "Longjing"
            :type :green}
           {:name "Baozhong"
            :type :oolong}
           {:name "Taiwan no. 18"
            :type :black}
           {:name "Dayuling"
            :type :oolong}
           {:name "Biluochun"
            :type :green}])

Advent 2019 part 5, Clojure in the shell

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

I already showed you netcat, and how it combines perfectly with socket REPLs. But what if all you have is an nREPL connection? Then you use rep

$ rep '(clojure.tools.namespace.repl/refresh)'
:reloading ()

Advent 2019 part 4, A useful idiom

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Here’s a little Clojure idiom that never fails to bring me joy.

(into {} (map (juxt key val)) m)

Advent 2019 part 3, `every-pred` and `some-fn`

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Ah clojure.core, it’s like an all you can eat hot-pot. Just when you think you’ve scooped up all it has to offer, you discover another small but delicious delicacy floating in the spicy broth.

In exactly the same way I recently became aware of two functions that until now had only existed on the periphery of my awareness. I’ve since enjoyed using them on several occasions, and keep finding uses for them.

Advent 2019 part 2, Piping hot network sockets with Netcat

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

Part of what I want to do in this series is simply point at some of the useful tools and libraries I discovered in the past year. I’ve adopted a few tools for doing network stuff on the command line which I’ll show you in another post. First though we’ll look at a classic: netcat!

I’ve been using netcat for years, it’s such a great tool. It simply sets up a TCP connection and connects it to STDIN/STDOUT. Pretty straightforward. I’ve been using it more and more though because of Clojure’s socket REPL.

Advent 2019 part 1, Clojure Vocab: to Reify

This post is part of Advent of Parens 2019, my attempt to publish one blog post a day during the 24 days of the advent.

An interesting aspect of the Clojure community, for better or for worse, is that it forms a kind of linguistic bubble. We use certain words that aren’t particularly common in daily speech, like “accretion”, or use innocuous little words to refer to something very specific. Even a simple word like “simple” is no longer that simple.

We can thank Rich Hickey for this. He seems to care a great deal about language, and is very careful in picking the words he uses in his code, documentation, and in his talks.

Advent of Parens 2019

Ah, the advent, the four weeks leading up to Christmas. That period of glühwein and office year-end parties.

The last couple of years I’ve taken part in the Advent of Code, a series of programming puzzles posted daily. They’re generally fun to do and wrapped in a nice narrative. They also as the days progress start taking up way too much of my time, so this year I won’t be partaking in Advent of Code, instead I’m trying something new.

From the first to the 24th of December I challenge myself to write a single small blog post every day. If my friend Sarah Mirk can do a daily zine for a whole year, surely I can muster a few daily paragraphs for four weeks.

Lambda Island Streaming Live this Thursday and Friday

We are definitely back from holidays, and to demonstrate that we’re not just doing one but two live stream events!

Felipe and Arne pairing

Thursday 5 September, 13:00 to 15:00 UTC

Fork This Conference

Last weekend Heart of Clojure took place in Leuven, Belgium. As one of the core organizers it was extremely gratifying to see this event come to life. We started with a vision of a particular type of event we wanted to create, and I feel like we delivered on all fronts.

For an impression of what it was like you can check out Malwine’s comic summary, or Manuel’s blog post.

It seems people had a good time, and a lot of people are already asking about the next edition. However we don’t intend to make this a yearly recurring conference. We might be back in two years, maybe with another Heart of Clojure, maybe with something else. We need to think about that.

Advice to My Younger Self

When I was 16 I was visited by a man who said he had come from the future. He had traveled twenty years back to 1999 to sit down with me and have a chat.

We talked for an hour or so, and in the end he gave me a few pieces of advice. I have lived by these and they have served me well, and now I dispense this advice to you.

Become allergic to The Churn

ClojureScript logging with goog.log

This post explores goog.log, and builds an idiomatic ClojureScript wrapper, with support for cljs-devtools, cross-platform logging (by being API-compatible with Pedestal Log), and logging in production.

This deep dive into GCL’s logging functionality was inspired by work done with Nextjournal, whose support greatly helped in putting this library together.

Clojure’s standard library isn’t as “batteries included” as, say, Python. This is because Clojure and ClojureScript are hosted languages. They rely on a host platform to provide the lower level runtime functionality, which also allows them to tap into the host language’s standard library and ecosystem. That’s your batteries right there.

The Art of Tree Shaping with Clojure Zippers

This is a talk I did for the “Den of Clojure” meetup in Denver, Colorado. Enjoy!

Captions (subtitles) are available, and you can find the transcript below, as well as slides over here.

For comments and discussion please refer to this post on r/Clojure.

Test Wars: A New Hope

Yesterday was the first day for me on a new job, thanks to Clojurists Together I will be able to dedicate the coming three months to improving Kaocha, a next generation test runner for Clojure.

A number of projects applied for grants this quarter, some much more established than Kaocha. Clojurists Together has been asking people through their surveys if it would be cool to also fund “speculative” projects, and it seems people agreed.

I am extremely grateful for this opportunity. I hope to demonstrate in the coming months that Kaocha holds a lot of potential, and to deliver some of that potential in the form of a tool people love to use.

Two Years of Lambda Island, A Healthy Pace and Things to Come

It’s been just over two years since Lambda Island first launched, and just like last year I’d like to give you all an update about what’s been happening, where we are, and where things are going.

To recap: the first year was rough. I’d been self-employed for nearly a decade, but I’d always done stable contracting work, which provided a steady stream of income, and made it easy for me to unplug at the end of the day.

Lambda Island was, as the Dutch expression goes, “a different pair of sleeves”. I really underestimated what switching to a one-man product business in a niche market would mean, and within months I was struggling with symptoms of burnout, so most of year one was characterised by trying to keep things going and stay afloat financially, while looking after myself and trying to get back to a good place, physically and mentally.

Reloading Woes

Update: seems Stuart Sierra’s blog post has dropped off the internet. I’ve updated the link to refer to the Wayback Machine’s version instead.

Setting the Stage

When doing client work I put a lot of emphasis on tooling and workflow. By coaching people on their workflow, and by making sure the tooling is there to support it, a team can become many times more effective and productive.

The Bare Minimum, or Making Mayonnaise with Clojure

Making Mayonnaise

Imagine you have a grandfather who’s great at making mayonnaise. He’s been making mayonnaise since before the war, and the result is truly excellent. What’s more, he does this with a good old fashioned whisk. He’s kept his right arm in shape throughout decades just by beating those eggs and oil and vinegar.

Now he’s bought himself a handheld electric mixer after hearing his friend rave about hers, but after a few tries he gives up and goes back to his whisk. He says he just can’t get the same result. This seems slightly odd, so the next time you go over you ask him to show you how he uses the mixer.

Clojure Gotchas: "contains?" and Associative Collections

When learning a programming language we rarely read the reference documentation front to back. Instead someone might follow some tutorials, and look at sample code, until they’re confident enough to start a little project for practice.

From that point on the learning process is largely “just in time”, looking up exactly the things you need to perform the task at hand. As this goes on you might start to recognize some patterns, some internal logic that allows you to “intuit” how one part of the language works, based on experience with another part.

Developing this “intuition” — understanding this internal logic — is key to using a language effectively, but occasionally our intuition will be off. Some things are simply not obvious, unless someone has explained them to us. In this post I will look at something that frequently trips people up, and attempt to explain the underlying reasoning.

Dates in Clojure: Making Sense of the Mess

Update 2018-11-27: while most of this article is still relevant, I no longer recommend using JodaTime as the main date/time representation for new projects. Even existing projects that aren’t too invested in JodaTime/clj-time should consider migrating to java.time and clojure.java-time across the board.

Update 2 2019-05-29: Also check out the talk Cross Platform DateTime Awesomeness by Henry Widd, given at Clojure/north 2019

You can always count on human culture to make programming messy. To find out if a person is a programmer just have them say “encodings” or “timezones” and watch their face.

Clojure Gotchas: Surrogate Pairs

tl;dr: both Java and JavaScript have trouble dealing with unicode characters from Supplementary Planes, like emoji 😱💣.

Today I started working on the next feature of lambdaisland/uri, URI normalization. I worked test-first, you’ll get to see how that went in the next Lambda Island episode.

One of the design goals for this library is to have 100% parity between Clojure and ClojureScript. Learn once, use anywhere. The code is all written in .cljc files, so it can be treated as either Clojure or ClojureScript. Only where necessary am I using a small amount of reader conditionals.

Simple and Happy; is Clojure dying, and what has Ruby got to do with it?

The past week or so a lot of discussion and introspection has been happening in the Clojure community. Eric Normand responded to my one year Lambda Island post with some reflections on the size and growth of the community.

And then Zack Maril lamented on Twitter: “I’m calling it, clojure’s dying more than it is growing”. This sparked a mega-thread, which was still raging four days later. A parallel discussion thread formed on Reddit. Someone asked if their were any Clojure failure stories. They were pointed at this talk from RubyConf 2016, which seemed to hit a lot of people right in the feels, and sparked a subthread with a life of its own.

Meanwhile Ray, one of the hosts of the defn podcast reacted to the original tweet: “I’m calling it: Clojure is alive and well with excellent defaults for productive and sustainable software development.” This sparked another big thread.

Loading Clojure Libraries Directly From Github

Did you ever fix a bug in an open source library, and then had to wait until the maintainer released an updated version?

It’s happened to me many times, the latest one being Toucan. I had run into a limitation, and found out that there was already an open ticket. It wasn’t a big change so I decided to dive in and address it. Just a little yak shave so I could get on with my life.

Now this pull request needs to be reviewed, and merged, and eventually be released to Clojars, but ain’t nobody got time for that stuff. No sir-ee.

Lambda Island Turns One, The Story of a Rocky Ride

One year ago to date I launched Lambda Island, a service that offers high quality video tutorials on web development with Clojure and ClojureScript. It’s been quite a ride. In this post I want to look back at the past year, provide some insight into how this experience has been for me, and give you a glimpse of what the future has in store.

This story really starts in December 2015. After three years of doing contract work for Ticketsolve I decided it was time for a change. I have been self-employed for many years, but I knew that sooner or later I wanted to try my hand at selling a product, rather than selling my time.

In January and February I took some time for soul-searching, and recharging. I went to speak at RubyConf Australia, and got to hang out with some old friends around Australia and New Zealand. Once back in Berlin I got busy creating Lambda Island.

Writing Node.js scripts with ClojureScript

In the two most recent  Lambda Island episodes I covered in-depth how to create command line utilities based on Lumo, how to combine them with third party libraries, and how to deploy them to npmjs.com.

However there’s a different way to create tools with ClojureScript and distribute them through NPM, without relying on Lumo. In this blog post I want to quickly demostrate how to do just that.

To recap, Lumo is a ClojureScript environment based on Node.js, using bootstrapped (self-hosted) ClojureScript. This means the ClojureScript compiler, which is written in Clojure and runs on the JVM, is used to compile itself to JavaScript. This way the JVM is no longer needed, all you need is a JavaScript runtime to compile and run ClojureScript code, which in this case is provided by Node.js. On top of that Lumo uses nexe, so Lumo can be distributed as a single compact and fast executable binary.

Announcing lambdaisland/uri 1.0.0

I just released lambdaisland/uri, a pure Clojure/ClojureScript URI library. It is available on Github and Clojars.

This is a small piece of the code base that powers lambdaisland.com. It’s inspired by Ruby’s Addressable::URI, the most solid URI implementation I’ve seen to date, although it only offers a small part of the functionality that library offers.

It’s written in pure Clojure/ClojureScript, with only minimal use of .cljc reader conditionals to smooth over differences in regular expression syntax, and differences in core protocols. It does not rely on any URI functionality offered by the host, such as java.net.URL, so it’s usable across all current and future Clojure implementations (Clojure, ClojureScript, ClojureCLR).

re-frame Subscriptions Got Even Better

Up until recently, to use re-frame subscriptions in Reagent views, you had to use a form-2 component.

A form-2 component is a function that returns another function, which does the actual rendering of the component to hiccup. In contrast, a form-1 component renders the hiccup directly.

;; form-1
(defn todo-item [todo]
   [todo-checkbox (:id todo) (:completed todo)]
   [:label {:unselectable "on"} title]
   [:button.destroy {:on-click #(dispatch [:todos/remove (:id todo)])}]])

;; form-2
(defn todo-item [todo]
  (fn [todo]
     [todo-checkbox (:id todo) (:completed todo)]
     [:label {:unselectable "on"} title]
     [:button.destroy {:on-click #(dispatch [:todos/remove (:id todo)])}]]))

Game Development with Clojure/ClojureScript

This weekend it’s Ludum Dare again, the world’s longest running game jam. The idea is that, alone or with a team, you build a game in a weekend based on a certain theme.

We got a little team together here in Berlin, and so I’ve been reviewing what options there are for someone wanting to build a game in Clojure or Clojurescript.

The good news is there are plenty of options, as you’ll see from the list below. You can do desktop games, browser based games with canvas or webgl, and you can even create Unity 3D games, all from your comfortable Clojure parentheses.

Union Types with Clojure.Spec

Elm and other statically typed languages have a great feature called Union Types (also called Sum Types or Algebraic Data Types).

Here’s an example taken from Elm. Suppose your system used to represent users as integers, maybe just an auto-incrementing primary key, but then switched to UUIDs represented as strings.

To correctly model this situation, you need a way to create a type that can be either an integer or a string, that’s what union types give you.