Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support for d3.js transitions #456

Closed
jlegewie opened this issue May 13, 2013 · 12 comments

Comments

Projects
None yet
7 participants
@jlegewie
Copy link

commented May 13, 2013

Hi,

it would be great if reveal.js provides better support for d3.js (and possibly vega) visualizations. The idea would be that users can embed d3.js graphs in slides (which is already possible). But the important addition is that pressing the button for next slide runs a certain transition instead of changing to the next slide. So there should be some standard way in which the user defines the container for a figure such as <div id="fig-name" class="fig-container">, and a standard way in which each step of the transitions are saved such an array of transition functions. reveal.js then checks each figure for transitions and instead of changing to the next slide, runs this transitions. To enable back and forth, there could be a second array of transitions that reverses the previous one. So which figure could be a javascript object a function for create (run at the beginning to create the vis), an array t with functions for each step of the transitions, and an array t_inv for the inverse functions that revers the transitions.

Does that make any sense? I think it would be a beautiful way to add dynamic visualizations to presentations and d3.js (and possibly vega) are just the right tools for that!

@g-palmer

This comment has been minimized.

Copy link

commented Jul 18, 2013

This is actually a really cool idea and I think would be a fantastic feature that is likely to be used.

I wouldn't mind working on something along these lines.

@hakimel

This comment has been minimized.

Copy link
Owner

commented Jul 18, 2013

From what I understand this would be very similar to how fragments work currently. Fragments are steps within a slide and are all stepped through before leaving the slide, they also work when navigating backwards. You could do something like the following:

Reveal.addEventListener( 'fragmentshown', updateVisualization );
Reveal.addEventListener( 'fragmenthidden', updateVisualization );

function updateVisualization( event ) {
  var step = Reveal.getIndices().f;

  switch( step ) {
    case 0:
      // move to vis state 0
      break;
    case 1:
      // move to vis state 1
      break;
    case 2:
      // move to vis state 2
      break;
  }
}

That doesn't include a condition for which slide you're on but you get the idea.

I'd like to do this through fragments rather than adding new functionality that would then need to behave well together with fragments. I'm open to discussing other ways of exposing this if you have any ideas though.

@ptamarit

This comment has been minimized.

Copy link

commented Dec 16, 2013

Hi,

I confirm that you can have D3 transitions triggered on Reveal's previous/next fragments events.
You can see it in action here: http://ptamarit.com/slides-data-viz-web-d3/en/#/example-bind-result

What I have in the slides is a placeholder and some empty fragments like this: <span class="fragment"></span>.

Then I have the following config: https://github.com/ptamarit/slides-data-viz-web-d3/blob/master/src/js/reveal-to-d3-config.js
It has a map where the keys are the slide IDs, containing another map with an init function (typically creating an SVG element and appending it to the placeholder), and then one function per fragment index.

The following code is taking care of listening to the events and calling the corresponding functions: https://github.com/ptamarit/slides-data-viz-web-d3/blob/master/src/js/reveal-to-d3.js

I didn't need inverse functions because the functions I'm calling can be called in any order (I'm just binding different data sets), but there might be cases where it's needed.

One improvements I could add is to programmatically add the right amount of fragments in the slides given the number of functions in the config.

And of course, the code is not generic enough to turn it into a Reveal plugin, but if anyone feels like working on it, that would be great.

@bnjmnt4n

This comment has been minimized.

Copy link
Collaborator

commented Mar 8, 2016

Closing this for now as there’s a working demo of this. Feel free to implement this as a plugin.

@flying-sheep

This comment has been minimized.

Copy link
Contributor

commented Apr 25, 2016

nice. in modern:

import Reveal from 'reveal.js'

export default function registerSlideListeners(config) {
    Reveal.addEventListener('slidechanged',   e => handleEvent(config, true))
    Reveal.addEventListener('fragmentshown',  e => handleEvent(config))
    Reveal.addEventListener('fragmenthidden', e => handleEvent(config))
}

function handleEvent(config, isSlideEvent=false) {
    const currentSlideId = Reveal.getCurrentSlide().id
    const currentFragment = Reveal.getIndices().f

    if (!currentSlideId || !(currentSlideId in config))
        return

    const functions = config[currentSlideId]

    if (isSlideEvent && 'init' in functions) {
        functions.init()
        delete functions.init
    }

    if (currentFragment in functions) {
        functions[currentFragment]()
    }
}
@gcalmettes

This comment has been minimized.

Copy link

commented Mar 11, 2017

very useful, thanks @ptamarit.

@jlegewie

This comment has been minimized.

Copy link
Author

commented Aug 17, 2017

Has anyone worked on this more? A Reveal plugin for @ptamarit solution would be great.

@jlegewie

This comment has been minimized.

Copy link
Author

commented Sep 13, 2017

I put together a reveal.js plugin that integrates d3.js with transitions seamlessly into reveal.js presentations. The plugin is here.

Here is a demo.

@flying-sheep

This comment has been minimized.

Copy link
Contributor

commented Sep 14, 2017

it’s broken. “event” is not defined jlegewie/reveal.js-d3js-plugin#1

@jlegewie

This comment has been minimized.

Copy link
Author

commented Sep 14, 2017

Should be fixed...

@ptamarit

This comment has been minimized.

Copy link

commented Sep 14, 2017

@jlegewie: you should add a link to your project in the Plugins page.

@gcalmettes

This comment has been minimized.

Copy link

commented Nov 29, 2017

I have been inspired by @jlegewie's work and I made a D3 plugin that fully supports the Reveal fragments. It also plays back the last transition when navigating back from another slide to render the last state of the visualization, and it is compatible with multi visualizations per slides. The plugin itself doesn't have any D3 dependencies and could be used for any other javascript visualization library. See the repo and demo.

@bnjmnt4n bnjmnt4n removed the plugin label Jan 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.