Monday, June 5, 2017

D3 and Livescript is like Peanut Butter and Chocolate

Livescript is an awesome... somewhat new language that doubles down on functional programming. It directly compiles into Javascript, much like Typescript and Coffeescript.

I spend a lot of time with D3 and Javascript. D3, in short, is a data visualization library for Javascript that is very declarative in nature.

If you're familiar with D3 you spend a lot of time doing things like this:
d3.selectAll(".bars")
    .style("fill", function (data) {
        return data.colour;
    });

This is a silly example that selects all elements having class bar. Then changes their colour to whatever is stored in the colour property bound to that element.

With Livescript it looks like this:
d3.selectAll ".bars"
    .style "fill", (data) -> data.colour

This works too:
d3.selectAll '.bars'
    .style 'fill', -> it.colour

Or even this
d3.selectAll \.bars
    .style \fill, (.colour)

Once you get used to the lack of parentheses it starts to makes sense on one line.
d3.selectAll \.bars .style \fill, (.colour)

I highly recommend having a look. https://livescript.net/

No comments: