elm christmas

Data Visualization in Elm

←Previous postNext post →

Data Visualization in Elm

A 2 min read written by
Simen Støa

Elm ships with a powerful api for creating and manipulating Svg. Svg is great for data visualization, but the api is basically just an implementation of the Svg standard. For higher level abstractions, we have to depend on packages from the elm community. Jakub Hampl (creator of elm-visualization) has curated a list of packages here, but the two most notable packages is probably Teresa Sokol's line-charts and Jakub Hampl's elm-visualization.

terezka/line-charts

Tereza Sokol's line-charts is a great example of a package like this, and is also mentioned in the elm/svg docs as an example to follow. It is really easy to get started with, but also lets you customize everything as you learn more about the package. Creating a line chart can be as simple as this:

type alias Point =
  { x : Float, y : Float }


chart : Html.Html msg
chart =
  LineChart.view1 .x .y
    [ Point 1 2, Point 5 5, Point 10 10 ]

Which generates:

"Simple line chart"

For more complex examples, go to https://terezka.github.io/line-charts/.

Line-charts is an opionated library, largely based on the work of Edward Tufte, a pioneer in the field of data visualization. His book The Visual Display of Quantitative Information contains detailed analysis of how to display data for precise, effective, quick analysis. This is used to give sensible default values, making it easy to create beautiful and effectful visualizations.

gampleman/elm-visualization

Where line-charts focuses on simple line charts, elm-visualization gives you a lot more options. The library is heavily inspired by d3.js.

"Stream graph created with elm-visualization"

It is not as easy to get started with as line-charts, but very powerful once you get to know it. To compensate it has a lot of examples, like the stream graph above, to get you started. These are also good examples for the use of typed-svg, which leverages Elm's type system for more maintainable and error-free Svg code.

←Previous postNext post →