Elm-d3 makes it easy to create and architect declarative front-end applications. By combining Elm’s FRP and D3’s data binding, it improves on both. D3 code becomes modular and composable thanks to Elm’s purity and static types. Elm gains a principled way of accessing the DOM and leveraging HTML, SVG, and CSS. Their powers combined, you can throw out your frameworks. After this tutorial, you will be proficient enough with Elm-d3 to easily create a widget that you can integrate into any web application.
By the end of the tutorial, attendees will have implemented a basic chart as well as a simple Todo list application using the Elm-d3 library. Building up to that, they will have learned:
With those learnings in mind, attendees will be able go forth and implement more sophisticated visualizations and applications using Elm-d3.
The target audience is commercial users who would like to use a functional approach on the front-end. Whether you are frustrated with JS or just exploring alternative approaches, you will get a lot out of this. It is also valuable for academics interested in seeing FP used to solve a very real practical problem.
NOTE: This tutorial is meant to form a series with the morning tutorial by Evan Czaplicki.
This tutorial requires the Elm Platform, the Elm-d3 source code, and a modern web browser. Documentation of the process can be found here. The Elm-d3 source code is available via GitHub.
Spiros Eliopoulos is a research engineer at Cornell University, serving as Lead Engineer on the Frenetic controller platform for Software-Defined Networks. He’s the author of the Elm-d3 library that provides Elm bindings to the D3 JavaScript library. Previously, he was the founding CEO of Tracelytics, a SaaS-based Application Performance Management company built on top of the X-Trace distributed tracing framework. He resides in Brooklyn, via Rhode Island.