Skip to content

2.1.0
Compare
Choose a tag to compare
@gampleman gampleman released this 15 Jan 15:09
· 75 commits to master since this release
2.1.0
8b1432c

Version 2.1 of elm-visualization focuses on helping you provide interactivity to your data visualisations. Here is an overview of the additions:

Interpolation

Interpolation is simply a smooth path between a starting value and an ending value. We model these as a function that takes a Float in the range (roughly) 0..1, where 0 is the starting value and 1 is the ending value. The provided Interpolation module provides some basic interpolation functions for common types, as well as many ways to compose these interpolators for more complex types.

The good news is that the Elm ecosystem already has interpolators for many types in the wild, for example elm-geometry or elm-units.

Interpolation has many uses in data viz. They are perfect for making sequential scales or for animation.

Transition

The Transition module makes animations out of Interpolators. The basic idea is this:

  1. You make an interpolator for some intermediate representation of your data (i.e. this is the data you wish to visualise, potentially with a few further attributes calculated, but not a Html Msg).
  2. You build a view function that does the data viz based on this intermediate representation.
  3. In your update you create Transition from your Interpolator. You give it a duration and optionally some easing.
  4. You subscribe to Browser.Events.onAnimationFrameDelta and step your Transition.

This allows you to define even highly complex animations with relative ease. The main power here is in the Interpolators, as they make it easy to compose animations.

We've also added a new example of complex animation:

Bar Chart Race

Zoom

Often in data visualisation we want to support users to both get a high level overview of the data, but at the same time allow them to explore the fine details. A useful technique is to allow panning and zooming. Unfortunately implementing this correctly in a cross-browser/device way is quite tricky. This release adds the Zoom module, that implements the many event listeners and bookkeeping necessary for doing this.

There's also a new example on how to use it (in combination with a WebGL based visualisation):

Zoom

Minor Changes

  • Scale.Color.tableau10 has been added for a new, attractive categorial palette.
  • The examples website has been rewritten in Elm and published on Netlify. The new URL is https://elm-visualization.netlify.com, so please update any links you may maintain. The old examples site will stay online for some time, but is now officially deprecated. (Also please excuse any minor bugs or issues with the new website. We will iron them out over the course of time. Contributions welcome ;-)).
  • Some documentation was updated to clarify domains and ranges in scales.
Assets 2
Loading