purescript-d3

Example

Here is the JavaScript code from part 1 of Mike Bostock's Let's Make a Bar Chart series of tutorials for D3:

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

And here is the PureScript equivalent:

array = [4, 8, 15, 16, 23, 42]

main = do

  x <- linearScale
    .. domain [0, max id array]
    .. range [0, 420]
    .. toFunction

  rootSelect ".chart"
    .. selectAll "div"
      .. bindData array
    .. enter .. append "div"
      .. style' "width" (\d -> show (x d) ++ "px")
      .. text' show

Note that .. is an alias for >>=. The fluent interface is just a poor man's programmable semicolon!

The PureScript D3 bindings statically enforce several properties of D3's selection semantics; for instance, if you were to remove the .. append "div" above you would get a type error, because the code following it would be attempting to set things on the unrealized nodes of an enter selection. Similarly, if you removed the .. bindData array line you would get a type error because you can only obtain an enter selection from an update selection (the selection produced by calling data in JavaScript or bindData in PureScript). In JavaScript you would have to wait until runtime to see these kinds of errors.

Selections also carry information about the type of data bound to them (if any). Until data is bound to a selection it is only possible to set constant attributes on it; afterwards you can use well-typed functions of the data.

You can find more examples here.

Development

yarn          # install dependencies from package.json and bower.json
yarn build    # compile the code