 Well, like Irene said, I'm Jim Blanahan, and I do work at Voku, which is why she has to say all that nice stuff about me but Yeah, I'm really excited to be working there. I'm very fortunate that we are a data visualization team there And we're making some really cool stuff And last year like or two years ago, like she said I presented at the first open vizconf I was very fortunate for that or I did some crazy stuff abusing the forces is what I'm all about and Now we're going to dive into another niche, but very interesting topic scrolling So let's let's get started. I'm not a UX expert or a historian, but I'll pretend to be both for an introduction Scrolling has really been around since the beginning of GUI's and it harkens back to Terminal-based applications and it solves that very real problem of having too much data to display to your user and Having them be able to control the amount of stuff that they see It's not the only solution to this problem You could think of hypercard and similar systems use a stacking metaphor and I found at least one Operating system of Commodore 64 that use that stock stacking metaphor throughout the the file system So there were no scrolling But scrolling stuck around it's been refined a little bit over the years But I'd say it was a functional solution to this problem But not a very elegant one until the introduction of a very Important piece of hardware and that is of course the scroll wheel this is something that Microsoft actually got right and They didn't they didn't invent it, but they popularized this it's been called one of the most useful Innovations and pointy devices. I'm not really sure what that means, but I like it and of course there were previous iterations that weren't popular maybe due to aesthetic reasons But the the entelemouse in 96 added this scroll wheel apparently we have excel to thank for this the researchers in In Microsoft working on Excel. We're trying to come up with ways to zoom in and out of Excel documents Turns out nobody really wants that but it was the coupling of hardware and Software that allowed that added the scroll wheel to scroll up and down in Microsoft and Excel documents Now we live in a world where We have all sorts of pointing devices as you might call them scroll trackpads and Magic mice, but all of them have scrolling as a fundamental piece of of How they interact and that makes scrolling very powerful as Joshua Porter put it Scrolling is a continuation as opposed to clicking which is a decision so scrolling is something that you're already doing on the website and Instead of explicitly having to decide to click on something a user can just scroll And of course we've taken advantage of that on it in the web In many different ways we have parallax scrolling for interesting Ways to move foreground and background images for your new startup. We have infinite scrolling for for your Acronysly load data In ways that might disrupt the ability to understand where you are and in that data And then we have art scrolling which is a term that I just made up But what it does exist my favorite example of this is an embroidery website which due to some malformed html converts the help helps into this kind of Serial tyrant on tirade on on what it means to So it kind of a found web art in the realm of scroll I Know y'all want to make your own scrolling art So that's why I've been made in broiden a new book market that turns any Wikipedia article into You'll find that very useful But today I'd like to narrow in on how scrollings being used in data visualizations and interactive Interactive pieces today, and I'd like to start with a little bit of a Categorization of the of the different ways the different examples of how I found scrollings been in use So we'll move from kind of Less complicated in terms of implementation details to more and I'd like to start with scrollable dimensions Really, this is not a Not a tricky topic, but but something that isn't used too much, but instead of keeping your Visualization confines to a single view view frame you can actually use scrolling to expand a dimension of your data This is often done in Distances so here we have a website that allows you to scroll through the distance of a whole mile and you can go to different reference points like the world's tallest man if you want and It's collaborative, so you can add your own distances and measures you can take this to space and here we're moving away from earth and Exploring different levels of satellites As you move towards the moon you can take this to an extreme in space and Have the idea of the moon was only one pixel. What would the rest of the solar system look like? This is a great project something. I would never want to scroll through twice But it is impressive. There's a lot of space out there You have moving up in in the terms of Complication you can use scrolling to trigger visualizations and and interactions Scrolling is interesting because as a user is scrolling on your website There's a pretty good chance that they're engaging on that Website or at least capable of being engaged and you can take advantage of that. So Bloomberg has done that in the trigger here the scroll just starts the animation of average heat indexes over over time to To have a better sense of when the user is ready to engage in that The New York Times does this a lot here that scrollings used to load up images probably for performance But also trigger these cool animations about world cup soccer balls. So it's getting the Interaction the visualization to the audience at the right time oftentimes these Visualizations are built around a narrative or a story Scrolling can be used to direct that story and tell it in a real intuitive manner a great example of this is In the color meanings project here, which is a story around colors and how they're interpreted in English and Chinese languages and cultures so each each scroll brings you to a new section and Each section provides a subset of the data and explanations around that New York Times again has this with clubs that connect a big mesh of of force layout of Soccer players in the clubs that they're in Each section shows a different facet of the data set and at the bottom you can explore On your own and find your own team that you're interested in or your own player Bloomberg has a bunch of these and we'll be looking at code in a second That is inspired by Bloomberg's work, but here's one about how Americans love SUV so much And each section again slices and dices the data and you can go to the bottom and find your own vehicle Minds the Honda fit this turns out. It's not not nearly as popular as I was hoping slight twist on this idea is as this Interesting visualization that uses scrolling as a transition between Visualizations so the sections transition it can be a little distracting But it's definitely an interesting way to get the user to keep scrolling down They want to see what's coming next And this in this interaction around skateboards skateboard competition Because scrolling is a continuous process you can take advantage of that and and Move your visualizations in a continuous manner This is great for for journeys. So here's a journey from St. Petersburg to Moscow and the The little map on the side there is updating Based on where you are so it gives a great Geographical sense of where these cities are located as well as some sense of how far you are in the article This kind of moving in a infographic uses Continuous scrolling methods to show potential water waste and how much water we eat every day and here the visualizations are revealed in a in a fluid manner pun intended and Similar to this one around the inequalities in funding of elections again, the continuous Scrolling is used to as an aesthetic purpose, but also shows real data You can take this journey in 3d and here The transition moves you into the Donwall Ascent and we get to follow along with the climbers and it really Helps constrain the potentials of D3 and make it intuitive for everyday reader Well, that's broken interactive stroke Interactive storytelling is is kind of the the last piece of Complexity and here we see a lot of use of scrolling It's got a new name scrollie telling I might be German in origin But the ideas are kind of first popularized by snowfall and still one of the most popular scrollie telling examples The idea is slightly more general than that though. It's it's we have these different types of content like text and images and multimedia and The web is where we can bring those together and a unique Medium and scrolling can be an intuitive way to do that You can use scrollie telling to tell stories about Robots and techno music and and fire And this great little daff punk expose. You can use it to tell more serious stories like this one around Contingent in in the Philippines around these islands and they use these great Video-based maps as well as images and text to set the story Okay, so now we've seen lots of examples of scrolling. I'm sure you all really want to learn how to implement one of your own So we're gonna Use a an example of this to kind of motivate us. Let's see if it works. Well We'll be a little Here we go So I we mentioned that I was in 2013 part of the open-viz conf and I I mentioned that mostly to to motivate this this Example I went back and did something that nobody should do. I listened to my talk again, and I Wanted to analyze it in some way, but I kept focusing on my mistakes my ums and and us It turns out I had a hundred and eighty of these of these words out of five thousand Total words it doesn't seem like a lot, but it really kind of smatters all over the place And it turns out I'm a um um kind of guy Something I learned about myself But I use Oz sparingly I Was hoping that perhaps my my ums and us were front-loaded and as as time went on I built it up confidence and you know gotten to a groove It does seem to be kind of the trend here over the first 15 minutes But then something happens and it ramps back up Finish pretty strong My theory is I heard a dry cough from the audience right in the middle That that disrupted my my flow wrecked my train of thought and The competing theory is that I just didn't practice the last half of my talk very much The world may never know Hopefully I'm doing better, but now you'll only be able to focus on all my mistakes, which is just fine So that's the demo I like to tell the story around different two different pieces of that of that Implementation stuff about the scrolling events and stuff about transitions and the visualizations. So let's talk about the events first The idea is pretty simple. We have a bunch of sections of content and we need to Figure out where they are first in our in our visualization. So We can use get bounding client wrecked is a native DOM API JavaScript function to pull that out with the one caveat that that function gives you a Value relative to the viewport the current section of the the site that you're looking at So if you were to Scroll partway down and reload your page The sections that you've already passed would be negative and the upcoming sections would be positive So we need to normalize against that a little bit. So here's here's the main code. We're iterating through each section Yeah, it's messed up. Well, you had to you had to we iterate through each section and pull out their position But we Subtract off the section location of the first section And that makes the first section started zero at all always and each other section is relative to that So that helps normalize against this now. We need to figure out which viewport we're in I'm sorry, which section we're in so that we can trigger an event around that And here's the code to do that again. We can use a native Function page y offset that gives you the current vertical scroll and then we find the closest index of the section in that to that position So bisect D3 B's bisect does a binary search and pulls out the index of the closest section And then if that index is not the same index as the one we were at before we can send an event to our visualization code and D3 like many libraries has a Custom event Dispatcher a little bit around that you create a new dispatcher using dispatch and you tell which Types of events you want to send here. We're sending we're telling it We want to send an active event and that becomes a method on your dispatch object that you can pass parameters to and then the In your visualization code that we'll look at in just a second You listen to that event using the on method and do something with the that index And so that's all it for the scrolling side Now transitions if you're not familiar with D3 transitions are ways to animate visual elements and We can get started by setting up all the our visual elements at the start Here's an example using setting up the one of the titles and we can set everything's a passive to zero to hide everything at the beginning then each section of our our Visualization will have a function and we can index into an array to store those functions and then on the Event the active event we can just call the appropriate function So we're using that index as a key between the scrolling code and the visualization code These these functions have two responsibilities showing themselves and hiding the neighboring Transitions and you could do implement this in a number of different ways You could have an internexit function for each slide, but this is Works well for these simple examples So for for this section where I had a bunch of gray squares I need to Hide the title before and make sure that the the section after that turns out some of the squares green is undone by Setting all their fills to gray and then I can just make sure my my squares are visible using the opacity of one And an important Reminder is that every every modification of these visual elements should be a transition To demonstrate that I have a couple of examples. Here's regular transitions between two points And this is doing a left to right in the right to left transition and working as expected Here's an example of interrupted transition So here the left to right gets interrupted and then goes back to to the right to left as long as everything's a transition That works as expected Which is the the visualization goes to the spot you want So this would be an example of the user scrolling in the middle of one of your transitions Here's what happens if you try to set the attributes directly without a transition the the position changes, but the Transition is not Interrupted and so the visualization gets into an invalid state Fortunately if D3 it's easy to set Transitions or make everything transitions You just use the transition method on your selection if you want something to happen immediately you set the duration to zero So I once you guys get internet again You can check out this and a lot more in my new tutorial that I just put out because I have special internet back here so We've heard all great things about Scrolling let's talk a little bit about how terrible it can be To remix that that quote scrolling is a continuation unless it's disrupted in some way and And the the connection between a user and the website through scrolling can be quite fragile Mike Bostock has a great article about how to scroll Which serves as a number of best practices when you're building out what these things of what? To to keep in mind, but a lot of it comes down to not scroll jacking And scroll jacking is it can be defined as anytime where you're ripping control away from the user and doing Something that's not expected around the scrolling this can be Subtle or in this example The the scrolling a small amount of scrolling causes a large change in the view and Delays that you have to wait for or it can be much more explicit in popular Clothing website that I may or may not have worked for in the past The Image hover over you know causes a zoom which is great But it also hijacks the scroll completely so that you forms a scroll jacking zone that you can't escape from Unless you know what you're doing Another more subtle way where this Continuousness can be broken is is perhaps in the two competing mental models that we have to talk about scrolling and Just for Clyde now has a great essay about this Where he describes the two different models we have the moving window model and that's this is what we've actually been using with our scroll wheels where the document is fixed and We are in control of the window of viewport moving up and down on that document and then but the advent of touchscreens and The flipping of the trackpad which probably everybody flip back Is the moving document model or moving text model where the doc the the window is fixed and we're in control of that Text we're in control of the actual document that moves up and down when we scroll So that's why the that's why the orientations flipped when you scroll and when you scroll on a touchscreen But also kind of help explain The fragileness of this that's concept So what are some alternatives? Well as an anonymous important data views laser said I miss the days of the stepper and the stepper of course It's not dead if you're not familiar with the stepper here's an example Where we're using click we're defaulting back to click to explicitly walk through Sections of the data similar to some of the scrolling examples. I was given Bloomberg has done some really great steppers as well and The steppers returned in New York Times with the advent of the 3d Chart that only works really well because you can explicitly step through pieces of it but part of that inconsistent model piece was is around the differences between mobile and And desktop experiences, so I wanted to see if These special kinds of scrolling were used in in mobile environments turns out not so much Of all the examples that I just gave most of the more complex ones revert to a simplified scrolling system and Yet there are So so is it wrong to scroll on on mobile or they're competing other reasons why? these these Visualizations are defaulting to more simpler mechanisms. I think it's a little bit of both as Hopeful segue to the WebGL part of this conference The Donwall was one of the few ones that was kept a consistent Implementation and experience on mobile as well as desktop and that's using WebGL, so we might talk about more of that hopefully And yet there are mobile first and mobile capable visualizations this one About how motorcycle deaths and this one about the Ukraine and Russia both by Hanna Fairfield, which will who we talking tomorrow Use the concept of or the interaction of swipe So it's swiped a new scroll. I wanted to look at mobile visualizations around around that that idea and Luckily for me Irene has compiled a great repository of Visualizations that work well on mobile mobile viz. Everyone should go check it out and it's community driven So we can collaborate and add our own examples So How many of these are using swipe turns out not many Which isn't to say swipe is wrong only about seven them use use swipe but it turns I think that is Indication that there's a lot of room here to work and and as tools become better and as The formats in the in the platform has become more consistent. We'll start to see more of this types of interaction So speaking of tools I like to end real quick with Some libraries that you can try out Adam Pierce from Bloomberg is just is working on this graph scroll Which is a really great library and it's making most of my tutorial I just put out Defunct and and you shouldn't pay attention to it at all and and then so scroller and swiper are both geared around mobile interactions to make those more consistent there's also GUI tools or These more visual tools Plains and Odyssey JS both allow Visualizations that incorporate scroll around positions and locations and then there are tools like page flow that Try to bring in images and media to make a more scrolling telling kind of experience So I'd like to end with special thanks to Adam Pierce again for help with the code I mean Ross for this wonderful conference and Her mobile viz stuff and Lynn Churny for all of her suggestions and and wonder Thanks very much. Let me know what you think