Using Vega-Morphcharts to get smooth transitions between different charts

[tomthe]

Hi,

SandDance is amazing, but I want to display some charts that are not available in SandDance and don't fit the use case of SandDance. Line charts and time series for example. But I would really like to use the smooth transitions that I can get when I use Vega-Morphcharts. The documentation is not great, but I was able to get smooth transitions between bar charts. But when I try to display line charts or other chart types with Vega-Morphcharts, it shows something... but not in the right place.

https://microsoft.github.io/SandDance/docs/vega-morphcharts/v1/ says you accept pull request which add such abilities, but Vega-Morphcharts is basically not documented at all (or am I missing something?).

What would you recommend to get SandDance-like transitions for other chart types:

• use Morphcharts directly (but I also couldn't find documentation, not even a licence or a repository. Is it even open-source?)
• use the SandDance library, but not the Morphcharts renderer. I don't really need 3D. Are there other renderers with more supported chart-types?

Thank you very much and keep building this cool stuff!

[danmarshall]

Hi @tomthe, thanks for comments. True, we don't have much in the way of documentation for vega-morphcharts, other than to say it has limitations. It's not fully capable of rendering all of the Vega marks, currently it's just image, rect as cubes, rules, text - the types of things that are renderable in MorphCharts.

You may find a few GitHub issues with more details.

The code is the best place to see what's implemented, you might start here: https://github.com/microsoft/SandDance/blob/master/packages/vega-morphcharts/src/morphcharts/render.ts#L71

Previously in our v3 version, we have used deck.gl as our rendering engine, wrapped in our vega-deck.gl project.

The MorphCharts engine is not open sourced at this time, but it does have documentation at https://www.morphcharts.com/
MorphCharts has great support for transitions and has many built-in chart layouts. It doesn't use Vega for these layouts.

You might not need a WebGL renderer at all. WebGL will give you the best visual performance when animating tens of thousands or more points, regardless of 2D or 3D.

[tomthe]

Thank you for your answers and pointers, very helpful!

You might not need a WebGL renderer at all

Yes, maybe. But I want to have the transitions-magic, that sanddance provides when I pass it a new vega-spec.
Could I just replace the renderer in this code-chunk:

function update(spec) {
  view = new SandDance.VegaMorphCharts.ViewGl(vega.parse(spec), { presenter: view && view.presenter, getView: function () { return viewType; } })
      .renderer('morphcharts')
      .initialize(document.querySelector('#split-right'))
      .run();
  lastSpec = spec;
}

by replacing VegaMorphCharts with something else that is not deckGL? Does another renderer have more functionalities/charttypes?

[danmarshall]

If transitions-magic is your top criteria, then MorphCharts is the right choice imo.

Due to the fact that transitions can be staggered:

and manually controlled:

Our vega-deck.gl renderer also had transitions, but did not have staggering:

Vega has 2 built-in renderers, svg and canvas:
https://vega.github.io/vega/docs/api/view/#view_renderer

They did build their own WebGL renderer. It does not have the transition context between charts, which is why we built our own. Afaik there aren't any other renderers out there.

[drdavidbrown]

Hi @tomthe,

The plan is to eventually make MorphCharts open source. In the meantime, it has been published to npm so you can use it. It's a low-level API, but if you are willing to invest the time in building on it, I can help. As Dan mentioned, there is some documentation at http://morphcharts.com, but feel free to email morphcharts@microsoft.com with specific questions and I'll do my best to answer them for you.

Regards,
Dave

[tomthe]

I had a deeper look at morphchart and its source code (through npm and here in the SandDance repository, where the morphchart functions are marked as MIT-licensed?). It is very promising. It doesn't seem to be too hard to use. But after reading through the nice code examples on https://morphcharts.com/ I still had a lot of questions. For now I decided against using it in the near future, but I will keep looking into it in the next months.

Thank you very much for your advice and the offer to help me!!