1. elm-d3: Front-end
Development without
Frameworks
Spiros Eliopoulos (@seliopou)
June 30, 2014
NYC D3.js Meetup

2. What is Elm?
• Elm is a functional-reactive programming language for
the web.
• It kind of looks like Haskell or OCaml and is statically-
typed like them, but it’s less scary and compiles to
JavaScript.
• It models inputs as time-varying values called
Signals.!
• You can lift pure functions to Signals to build up
complex applications from basic inputs.

3. What is D3?
• Preaching to the choir.
• Assumed.

4. Let’s get on the same
page about MVC.

5. Model is Information
• The model describes the entire state of the
application, all in one place.
• It has a concrete type: m, i.e, data m = { … }
• While bits of state may be otherwise strewn about
the application, the model is the authoritative
record of state. In other words, you should never
read the random bits.

6. View is Computation
• To display an interface, you have to produce some
representation of the interface that the underlying
system can use to render the interface, e.g., HTML.
• The representation has a type r.
• The view is a function from the model to the
representation: m -> r.

7. Controller is Computation
• The controller mediates user interactions and
model updates. It handles events by updating the
model accordingly.
• Events have a concrete type e.
• An event handler is a function from an event and
model to an updated model: e -> m -> m.!
• A controller turns a stream of events into a signal of
models: Stream e -> Signal m

8. A “complete” MVC application.
view m = …
handler e m = …
controller = … handler …
!
main : Signal Element
main = lift view (controller events)

9. An even more “complete” MVC application.
view m = …
handler e m = …
controller = folde initModel handler
!
main : Signal Element
main = lift view (controller events)

10. An even more “complete” MVC application.
view m = render w h d3_view m
handler e m = …
controller = folde initModel handler
!
main : Signal Element
main = lift view (controller events)

11. Goal I: Use Elm to create
models, event handlers,
and controllers.

12. Goal II: Use D3.js to
create declarative,
compseable views.

13. Part Ia
A Basic Operation

14. An example operation.
d3.selectAll(“div”)

15. Shorthand for this.
d3.select(document).selectAll(“div”)

16. More generally.
context.selectAll(“div”)

17. Remove free variables so it works in isolation.
function(context) {
return context.selectAll(“div”);
}

18. Parameterize by the element name.
var selectAll = function(elt) {
return function(context) {
return context.selectAll(elt);
}
}

19. Using it.
selectAll(“div”)(d3.select(document))

20. Part Ib
Another Basic Operation

21. Another example operation.
context.attr(“class”, “box”);

22. Get rid of free variables
var attr = function(name, val) {
return function(context) {
return context.attr(name, val);
}
}

23. Using it.
!
attr(“class”,“box”)(d3.select(“div”))

24. Part Ic
Last Basic Operation

25. Data binding for good measure.
var bind = function(val) {
return function(context) {
return context.data(val);
};
}

26. Part Id
So what?

27. …

28. Part II
Combining Operations

29. How do you write an operation
that will set the class string
of every <div> to “box”?

30. Regular D3.js.
d3.selectAll(“div”)
.attr(“class”, “box”);

31. Using basic operations.
var div_op = function(context) {
return attr(“class”, “box”)
(selectAll(“div”)(context);
}

32. Ugly.
What’s happening?

33. This code has to be read from the inside out.
var div_op = function(context) {
return attr(“class”, “box”)
(selectAll(“div”)(context);
}

34. Method-chaining
operations is now
function application.

35. Making method chaining explicit.
var chain = function(op1, op2) {
return function(context) {
return op2(op1(context));
};
}

36. For good measure, making sequencing explicit.
var seq = function(op1, op2) {
return function(context) {
op1(context);
return op2(context);
};
}

37. Composing operations.
var div_op =
chain(selectAll(“div”),
attr(“class”, “box”));

38. Better. Understandable.
Also more general.

39. Still not great to
read or write.

40. Part III
Writing D3 in Elm

41. Wouldn’t this be nice?
div_op : Selection a
div_op =
selectAll “div”
|. str attr “class” “box”

42. Why Is This Nice?
• This is Elm code: it’s type-safe.
• |. is the method chaining
operation: concise and no
code inversion.
• It’s compositional: take basic
operations and combine them
to create a “bigger” operation.
• It’s reusable: The new
operation is just another value
that you can compose with
other operations.
div_op : Selection a
div_op =
selectAll “div”
|. str attr “class” “box”
!
div_op’ : Selection Int
div_op’ =
div_op
|. attr “width” (d i -> show d)

43. Selection a
• This is the type of a D3 operation in Elm.
• The a is the type of data that the operation expects to be
bound to the parent selection it’s applied to.
• If a is a type variable, then the operation does not
inspect the data and can be used in all contexts.
• If a is a concrete type, such as Int, that limits the other
operations it can be composed with.
• The render function from before is what does the initial
data binding of the model to the root of the DOM tree.

44. Wouldn’t this be nice?
circles : Widget [Point] Point
circles =
selectAll "circle"
|= List.tail
|- enter <.> append “circle”
|. num attr "r" 1.5
|. str attr "fill" "black"
|- update
|. fun attr "cx" (p _ -> show p.x)
|. fun attr "cy" (p _ -> show p.y)

46. Widget a b
• This is the type of a D3 data bind, introduced by
the |= operation.
• The a is the type of operations that the data bind
can be composed with.
• The b is the type of operations that can be
composed with the data bind.
• You turn a Widget a b into a Selection a
using the embed function.

47. Wouldn’t this be nice too?
voronoi : Widget [Point] [Point]
voronoi =
selectAll "path"
|= Voronoi.cells
|- enter <.> append "path"
|- update
|. fun attr "d" (d _ -> path d)
|. fun attr "class" (_ i ->
"q" ++ (show (mod i 9)) ++ "-9")

48. Defining the view (svg function elided).
view : Dims -> Margins -> Selection [Point]
view dims margins =
svg dims margins
|. seq (embed voronoi) (embed circles)

49. Part IV
Writing Applications
using elm-d3

51. https://github.com/seliopou/elm-d3