Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Chia-liang Kao (@clkao) is an active open source software developer since 2000. He is best known for creating SVK, a distributed version control system based on Subversion. Lately he has been working with LiveScript and PgREST, and co-founded the open government initiative in 2012.

You might have heard that using D3.js requires some functional thinking. LiveScript is a JavaScript dialect with strong functional programming influences, which seems a perfect match!

Here are some tips for using LiveScript to make working with D3.js easier. We’ll use the basic bar chart as an example. The LiveScript version of the code can be found here. You can preview the LiveScript generated bar chart here.

Function Expressions

The first thing you’ll notice in LiveScript is the lack of parenthesis and brackets, so like CoffeeScript: function(d) { return d } can be written as (d) -> d, which comes with an implicit return. Because d is the sole argument here, it can be further simplified as -> it.

Similarly, function(d) { return d.letter } can be written as -> it.letter. Since these kind of accessor functions are frequently used in
D3.js, you’ll find the shorthand very pleasing: (.letter).

This makes it possible to write { return d.letter; }) as (.letter), which is read as: given data, map and return their letter fields.

Concise function calls

! means calling a function without arguments, so:

Can be written as y = d3.scale.linear!range [height, 0], with parenthesis omitted.

Commas after literals can be omitted too. Aligning chained .attr calls makes it clear which attributes are data-dependent: (x, y, and height in this case).

If you find this confusing, try picturing a closing parenthesis inserted before each . (space-dot). Note that the omission of parenthesis is optional, and you might add them back whenever you think it makes the code more readable, for example: svg.selectAll(".bar").data(data).

String Interpolation

Here, .attr("transform", "translate(" + margin.left + "," + + ")");
becomes .attr "transform" "translate(#{ margin.left },#{ })".


Sometimes you need to create multiple elements for each data point, and you usually have to create a variable for the container element:

With cascading, you can avoid the g variable. Think .. as chaining the result of the first line (the invisible g) as caller:


Since LiveScript is indent-strict, you can no longer use the free-form alignment like:

However, you can use the cascading feature above for each append after .enter():

Using LiveScript

In the plunker online live editor, adding .ls files just works. Check out this boilerplate for starting a D3.js project using LiveScript.

To use in production, the common build tools like grunt, brunch, and gulp all support LiveScript.


while LiveScript is a very rich but concise language, each feature has a well-defined mapping to JavaScript. This makes the resulting JavaScript quite readable. Visit to play with the examples or try some sniplets yourself.

D3.js is incredibly powerful for its expressiveness. Along with concise LiveScript, you can do a lot more with less code.

Look below for some great D3.js books from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Developing a D3.js Edge is aimed at intermediate D3.js developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. You will also want to have a good debugger handy (Chrome Developer panel or the Firefox/Firebug combo), to help you step through the many real world examples that you’ll find in this book.
Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.
It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

Tags: brunch, cascading, CoffeeScript, D3.js, Grunt, gulp, Javascript, LiveScript,

Comments are closed.