Skip to content

Latest commit

 

History

History
43 lines (30 loc) · 4.76 KB

elmVegaliteWalkthrough1.md

File metadata and controls

43 lines (30 loc) · 4.76 KB
id elm
litvis
dependencies
gicentre/elm-vegalite
latest

@import "../css/tutorial.less"

  1. Introduction
  2. Single View Specifications
  3. Layered and Multi-view Composition
  4. Interaction

A Walk through elm-vegalite in litvis

At the heart of litvis is the ability to create a range of expressive visualizations using elm-vegalite. This walkthrough will show how to use elm-vegalite to create interactive visualizations in the Elm language embedded within a litvis document. The content is based on the talk given by Wongsuphasawat et al at the 2017 Open Vis Conf. If you wish to follow along with their talk, timings are given by each section.

To use elm-vegalite in a litvis document you first need to import the library, which typically in a litvis document is placed in a short section of hidden code (view the markdown source to see it).

import VegaLite exposing (..)

A Grammar of Graphics (0:30)

Elm-vegalite is a wrapper for the Vega-Lite visualization grammar which itself is based on Leland Wilkinson's Grammar of Graphics. The grammar provides an expressive way to define how data are represented graphically. The seven key elements of the grammar as represented in elm-vegalite and Vega-Lite are:

  • Data: The input to visualize. Example elm-vegalite functions: dataFromUrl, dataFromColumns and dataFromRows.
  • Transform: Functions to change the data before they are visualized. Example elm-vegalite functions: filter, calculateAs and binAs.
  • Projection: The mapping of 3d global geospatial locations onto a 2d plane . Example elm-vegalite function: projection.
  • Mark: The visual symbol(s) that represent the data. Example elm-vegalite functions: line, circle, bar, textMark and geoshape.
  • Encoding: The specification of which data elements are mapped to which mark characteristics (commonly known as channels). Example elm-vegalite functions: position, shape, size and color.
  • Scale: Descriptions of the way encoded marks represent the data. Example elm-vegalite functions: scDomain, scPadding and scInterpolate.
  • Guides: Supplementary visual elements that support interpreting the visualization. Example elm-vegalite functions: axTitle (for position encodings) and leTitle (for color, size and shape encodings).

In common with other languages that build upon a grammar of graphics such as D3 and Vega, this grammar allows fine grain control of visualization design. But unlike those languages, Vega-Lite and elm-vegalite provide practical default specifications for most of the grammar, allowing for a much more compact high-level form of expression.

Next >> Single View Specifications