Svelte Beeswarm Walkthrough - Wrapping Up

[00:00 - 01:43] All right, let's finish this chart with some really simple final polish that again is totally optional But it'll literally take you 30 seconds So you might as well see what I'm gonna show you before moving to the next module And that polish is basically centered around this fade-in transition that's applied to The force diagram right now. I don't love it and this is kind of D3 force internally Flying all of these circles into their positions one by one I just think it looks kind of nausea-inducing like there's there's a lot of movement all at the outset And what I want to do to tackle this is add a fade transition that basically Delays for the duration that it takes to fade into place. So what does that mean right now? This transition is maybe taking 300 milliseconds and they're mostly in the places they want to be So what I want to do is just use felt built-in fade property So I say in fade and I want to say wait to fade in each of the circles for like 300 milliseconds And then I'll refresh Okay, I still see it a little bit. It's maybe 400 milliseconds and I save refresh That looks a lot better. You could play around with whatever you want this number to be but what we've done is we've really limited the Momentum the movement at the beginning Which as I kind of said could be really jarring for a lot of users to see all of that movement all at once The other thing you could do is transition these one by one. So you could you know access the index using like This and then you could say I want to do 400 delay plus Index times 10 so the first element would be 400 milliseconds the second element would be 410 milliseconds third 420 etc. Now I save this and refresh now. What would you notice?

[01:44 - 03:45] Kind of fade in one by one with that kind of like gradual fade in effect So whatever you prefer here, you could have them fade in to place like that You could just have the simpler solution, which is what I had earlier And not have any respect to index whatsoever But I think this is a small improvement on what we had previously So to recap, you know We're done with this module and what we've done is we've taken a lot of the patterns from our very simple scatter plot and brought them into This more complex B-swarmed diagram, you know the principles were the same right we drew elements We drew peripheral elements and we added interactivity those are kind of the the key essential parts of any chart But on top of those things we've also introduced some other really cool Interactions for example toggling between states in a D3 force diagram Speaking of we've learned how to use D3 physics to arrange circles With momentum like so and that respect each other's space using collision properties rather than just fixed positions As we did in a scatter plot and we've added group-wide filtering in a legend And we've added a bit of a cooler tool tip I would say that has like labels that has numbers it has an inline bar chart And has all the other features like respecting the screen width and everything else So I hope this module has been Intertaining for you. I hope it's been engaging. I hope you've enjoyed it if you ran into any issues Obviously totally okay, and please reach out to me leave a comment on the video or DM me on Twitter Or reach me any other way Love to troubleshoot this with you But I really hope this was engaging and fun And I'm excited to see you in the next module after hopefully you take a little bit of a break I know I'm going to and in that next module. We're going to be building is a rotating globe So a geographic visualization will be working with you know maps and projections and rotations All for the first time so I'm really excited to get into that module and I'll see you there