GitLab

Sanddance transitions

Samples:

• https://www.sanddance.ms/
• http://algorithms-tour.stitchfix.com/
• https://tcdata360.worldbank.org/stories/tech-entrepreneurship/
• https://gramener.com/playground/blog/posts?post=08-16-2017-elvis-presley.md
• https://gramener.com/playground/blog/posts?post=08-04-2017-kishore-kumar.md
• https://gramener.com/playground/senate/similarity
• https://gramener.com/playground/senate/
• https://labs.spotify.com/2018/03/02/introducing-coordinator-a-new-open-source-project-made-at-spotify-to-inject-some-whimsy-into-data-visualizations/

Implementation notes:

• The component should define the positions of a set of entities (shapes) across stages
• When the stage transitions, the positions are smoothly animated to another
• The component should allow control over animation
• The component should accept layouts as input
• The component should trigger an event on stage transition

Other notes:

• sanddance is created as a component in the g1 namespace as g1.sanddance().
• d3 and lodash are the only dependencies for g1
• Browsers: Edge, Chrome, Firefox, Safari, Android browser, Safari iOS

Specification

sanddance is a component that transitions elements between states

Each state is named, and has a set of state configuration information. In other words, it's a dict of dicts.

"states": {
  "treasure-trove": {
    "name": "Treasure Trove",
    "conf": {
    }
  },
  "duets": {
    "name": "The Duets",
    "conf": {
    }
  }
}

A state should capture all transitionable attributes of each element. For example, position, color, size, etc. These attributes are best specified dynamically. For example:

var collapse_to_point = g1.sanddance({
  name: "collapse_to_point",
  attrs: {
    opacity: 0.7,        // Set the opacity= of all elements to 0.7
    cx: 450,             // Set the cx= of all elements to 450
    cy: 400,             // Set the cy= of all elements to 400
    fill: 'blue',        // Set the fill= of all elements to blue
  },
  duration: 1000,        // Collapse with a 1s duration
  delay: 1000            // All items move after a delay of 1s
})

// Attributes can be different for each object
var explode_randomly = g1.sanddance({
  name: "explode_randomly",
  attrs: {
    opacity: 0.9,
    cx: function(d) { return Math.random() * 1000 },
    cy: function(d) { return Math.random() * 500 },
    fill: function(d) { return Math.random() < 0.5 ? 'red' : 'blue' },
  },
  duration: function(d) { return Math.random() * 1000 },
  delay: 500
})

To apply a state, we can call sanddance as follows:

var circles = d3.selectAll('circle')
  .call(g1.sanddance.chain(
  explode_randomly(),    // Explode after 0.5s, up to a 1s duration
  explode_randomly(),    // Explode after 0.5s, up to a 1s duration
  collapse_to_point()    // Collapse after 1s with a 1s duration
))

The above animation happens in chain.

These also support the following events:

• sanddance.start is triggered when the animation starts
• sanddance.end is triggered when the animation of all the elements ends

For example:

var circles = d3.selectAll('circle')
  .call(g1.sanddance.chain(
  explode_randomly()
    .on('start', function () { console.log('started 1st explode_randomly') })
    .on('end', function () { console.log('ended 1st explode_randomly') }),
  explode_randomly()
    .on('start', function () { console.log('started 2nd explode_randomly') })
    .on('end', function () { console.log('ended 2nd explode_randomly') })
  ))

This will enable creating use-cases

Create a function g1.sanddance.layout(options) that behaves as follows:

function layout({
  width: 500,
  height: 300,
  layout: 'grid',    // or column, scatter, density, circle
  layoutx: 'department',  // x-layout for column, scatter, density
  layouty: 'gender'       // y-layout for scatter / density
  group: 'facet',    // or cluster
  groupby: 'class',  // categorical column to group by
  grouplimit: 10,    // maximum number of groups to show
  // ...
})

var show_as_grid = g1.sanddance({
  name: 'show_as_grid',
  attrs: {
    transform: g1.sanddance.layout({layout: 'grid', width: 300, height: 200}),
  },
  duration: 300,
});