CUFP 2014 Tutorial

Wiki ▸ CUFP 2014 Tutorial

This tutorial presents the fundamental concepts behind D3.js and how they map to the Elm programming language via the elm-d3 library.

Development Environment

Download and install the Haskell Platform and node.js for your OS/distribution. Then install the Elm programming language using cabal:

cabal install elm

Finally, clone the elm-d3 repository, install the node dependencies and build the library:

git clone https://github.com/seliopou/elm-d3
cd elm-d3
npm install smash
make

Tutorial Sections

1. D3.js Basics
2. D3.js Data Join
3. Reusable Chart Pattern
4. D3.js in Elm
5. DOM Events
6. TodoMVC

D3.js Resources

• D3.js Documentation
• Thinking with Joins - A blog post about D3's computational model
• Towards Resuable Charts - A blog post about widget design in D3

Elm Resources

• Syntax Reference
• Library Documentation
• MVC in a Reactive World - A blog post about the MVC architecture in Elm