This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Declarative visualization with Elm and Vega / Vega-Lite
version 3.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 3.0.0
Committed At 2018-08-10 12:11:16 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1





Declarative visualization for Elm

This library allows you to create Vega and Vega-Lite specifications in Elm providing a pure functional interface for declarative visualization.

The library does not generate graphical output directly, but instead it allows you to create a JSON specification that can be sent to the Vega and Vega-Lite runtime to create the output. This is therefore a 'pure' Elm package without any external non-Elm dependencies.


A simple scatterplot encoding engine power and efficiency as x- and y-position and country of origin with colour:

    cars =
        dataFromUrl "" []

    enc =
            << position X [ pName "Horsepower", pMType Quantitative ]
            << position Y [ pName "Miles_per_Gallon", pMType Quantitative ]
            << color [ mName "Origin", mMType Nominal ]
toVegaLite [ cars, circle [], enc [] ]

This generates a JSON specification that when sent to the Vega-Lite runtime produces the following output:

alt text

The specification generated by elm-vega for this example looks like this:

  "$schema": "",
  "data": {
    "url": "",
    "format": {
      "type": "json"
  "mark": "circle",
  "encoding": {
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    "color": {
      "field": "Origin",
      "type": "nominal"

Why elm-vega?

A rationale for Elm programmers

There is a demand for good visualization packages with Elm. And there are certainly plenty of data visualization packages available, ranging from low level SVG rendering through a host of charting packages (e.g. Charty and elm-charts) to elegant, opinionated chart construction and a more comprehensive visualization library. The designs of each reflects a trade-off between concise expression, generalisability and comprehensive functionality.

Despite the numbers of libraries, there is a space for a higher level data visualization package (avoiding, for example the need for explicit construction of chart axes) but one that offers the flexibility to create a wide range data visualization types and styles. In particular no existing libraries offer easily constructed interaction and view composition (building 'dashboards' comprising many chart types). elm-vega is designed to fill that gap.

Characteristics of elm-vega

  • Built upon the widely used Vega and Vega-Lite specifications that have an academic robustness and momentum behind its development (Vega-Lite is itself built upon the hugely influential Grammar of Graphics).

  • High-level declarative specification (a chart can be fully specified in as few as five lines of code)

  • Strict typing and friendly error messages means "the compiler is your friend" when building and debugging complex visualizations.

  • Flexible interaction for selecting, filtering and zooming built-in to the specification.

  • Hierarchical view composition allows complex visualization dashboards to be built from trees of simpler views.

  • Full coverage of the Vega specification for more comprehensive and flexible visualization design.

A rationale for data visualisers

Vega-Lite hits the sweet spot of abstraction between lower-level specifications such as D3 and higher level visualization software such as Tableau, while Vega provides addtional flexiblity when it is needed. By using JSON to fully encode a visualization specification Vega and Vega-Lite are portable across a range of platforms and sits well in the JavaScript / Web ecosystem. Yet JSON is really an interchange format rather than one suited directly for visualization design and construction.

By wrapping Vega and Vega-Lite within the Elm language, we can avoid working with JSON directly and instead take advantage of a typed functional programming environment for improved error support and customisation. This greatly improves reusability of code (for example, it is easy to create custom chart types such as box-and-whisker plots that can be used with a range of datasets) and integration with larger programming projects.

Elm and elm-vega provide an ideal environment for educators wishing to teach Data Visualization combining the beginner-friendly design of Elm with the robust and theoretically underpinned design of a grammar of graphics.


  • elm-vega does not render graphics directly, but instead generates data visualization specifications that may be passed to JavaScript for rendering.

  • While limited animation is possible through interaction and dynamic data generation, there is no direct support for animated transitions (unlike D3 for example).

Further Reading