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
Closed

support for d3.js transitions #456

jlegewie opened this issue May 13, 2013 · 12 comments

Comments

@jlegewie
Copy link

@jlegewie jlegewie 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!

@gmp
Copy link

@gmp gmp 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
Copy link
Owner

@hakimel hakimel 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
Copy link

@ptamarit ptamarit 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
Copy link
Collaborator

@bnjmnt4n bnjmnt4n 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
Copy link
Contributor

@flying-sheep flying-sheep 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
Copy link

@gcalmettes gcalmettes commented Mar 11, 2017

very useful, thanks @ptamarit.

@jlegewie
Copy link
Author

@jlegewie jlegewie commented Aug 17, 2017

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

@jlegewie
Copy link
Author

@jlegewie jlegewie 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
Copy link
Contributor

@flying-sheep flying-sheep commented Sep 14, 2017

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

@jlegewie
Copy link
Author

@jlegewie jlegewie commented Sep 14, 2017

Should be fixed...

@ptamarit
Copy link

@ptamarit ptamarit commented Sep 14, 2017

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

@gcalmettes
Copy link

@gcalmettes gcalmettes 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants