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 2.3.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.3.1
Committed At 2018-05-11 22:31:00 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-Lite specifications in Elm providing a pure functional interface to declarative visualization construction.

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-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 more comprehensive visualization libraries. 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)

  • Extensive use of union types 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.

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. 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.

  • elm-vega is currently limited to the Vega-Lite specification (and a small amount of the Vega specification) so is focussed on Cartesian coordinate systems (e.g. no pie charts or rose diagrams). However, full Vega integration is currently under development and will be released shortly.

  • 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