Legends and other details to build a Flow - Certified Flow Designer Training 4 Transcript
Presentations
great. So this is my full presentation almost through quickly, because I know we want to make you got it. Got it. so i'll move You This quick one This is a data based on the crowd.
County Consortium. It contains in this case all the protest data from September of 2,020 to March of 2,021
This is just summary by type. This is a summary by type and the size of the event.
Wow! Oh, hey! nice! This one is just a timeline by type, and this is a fairly conspicuous event.
Just after the beginning of 2021. Those are arrests.
By the way, this is state. I type. Oh, no, the sorry. This is type by timeline, so we use it out.
Yes, type by timeline. Oh, and each of these slides is titled.
So I was looking for an option to automatically display this title of the step as a title of the Slide.
Didn't got it you didn't find one. But I thought vehicle, Yeah, there's not a way to do that. There is a way to add the name to each step which I think We want today.
Oh, okay, oh, great, Okay, cool. And I was. This is before I really got into the geolocation stuff. So I was able to make a core plan, often in distance by the size total size, of the total number of events in that State which turned out to be interesting.
Wow! The next one is the same chloroplast, and then with the with the by state breakdown, and these are sorted, I believe, by type.
The limitation. Obviously, i'm finding is the color scheme and the complexity of the categories. There are too many values. it's very difficult with useful color differentiators.
So there may be like a stepping thing or a alternate kind of visibility thing that sometimes i've done with, or color blind users that might be used segmenting out a usage of color sets so that would that's what that's
it, and then this is This is the events by state, by type.
So this is just a stack in the center. of each state region, and I was having trouble getting the latitude and longitude to work, because I do have latitude and longitude event in the data set info for each of the events So
I wouldn't work it wouldn't work the latitude and longitude Fields would not appear where they knew they were supposed to hear, and that, I think was because the size of the data says so large it's just under the 10
megabyte, limit I think 14,000 rows or something like It's a big file, but it's not as big as many files, and it's certainly not as big as the totality of the data set itself.
So I think. so that what I did was I took a 100 row data set based on the exact same schema, imported that as a second data source, built the chart, using a much smaller segment of data so that it could it showed
me properly what I was looking for, and then change the sources, and then all the fields mapped. So I think sometimes the browser gets confused being able to manage its data space and find all the fields you're looking for at times.
So if it does, it's helpful to have little sample versions of your data set so you can build stuff and then replace it with the richer data.
Later. So that was what I had here couldn't geolocate. So that's what I did. and then the next result. is I was able to geolocate. and then I re-imported the the the 6 What we definitely definitely have seen, and we probably need a better way to help people
identify. this is that if your lat long data doesn't if some of it is outside the parameters of Latin long, then it doesn't show you those as options we're a little bit strict on that and
probably don't need to be that strict so we haven't seen it have in a relationship to the data size, but just that some value in your Latin long fields is is problematic and I can help you find those
with some quick things, Yeah, that was That was the the 2 1, 2 before is this.
One was stacks on the State. And yeah, it was. It was interesting, and I knew exactly what you mean about clean did But here's what I think I think the way the logic of the program works. you.
If it's successfully, finds the fields based on a correct and and properly formatted subset of the data, it will keep the field names, even if subsequent rows are omitted, because the data isn't
valid correct, so you may want to be completely figured. it out. Okay.
So this was lat long this was lot long and then event, but broken out by event.
And then this one was slightly more legible and then size. And this legend, and I put in a filter.
I think maybe the next one is the one with the filter on it. Yeah a time filter that does not change the total display of the legend.
I'm wondering if there's a way to set up a dynamic relationship between the filters and the legend that might be really helpful.
So soon yup cool cool And then I think that their main one more
Oh, oh, yeah. There was nothing else I would wanted to show. Thank you Awesome. Do you thanks for showing that Mickey.
It's you're covering a lot of territory there with with maps and different visualization types, especially with the large data set, which always makes it inherently a little harder but very cool to see
How do you wanna go next? and share with the group and you're on mute?
How.
Myself. Can you hear me now? We can hear you now? Yes, alright!
So this is The data set behind this is the last 7 years of in our school.
So I did remove teacher names and student names and anonymize it.
So since this I have to upload it this to the cloud I want to make sure it's protected. And so basically It's about 20,000 rows of data. Each row is a great, you know, for a particular subject, and we are an Ib school.
So this is Ibm Yp. subtracts and these are on a very right side, are the actual courses that's offered.
And then in the middle are the subjects and then i'm just taking the data from spring of 2,022.
The the the bit, the very recent one. And basically this is trying to exercise the the categories.
So I took a snapshot and then have different levels of category.
So to group the data. and so the next step you it's about great distribution.
So this actually, each and every one of these dots. You can actually, you know, if you zoom into it, you can actually click on it.
It shows you the the interactions of a particular a grade.
But just just to give everyone background if you are not. If the meal was Ib. the the grace are not AbCD. they are not a scale from one to 7, so 7 is like an A and 5 and 6 is like a B, 4, 3 and 4 will be A C and anything below
3 you failed as a D. so obviously you can see you know one and 2. It's a very rare and over the last 7 years only you know.
Probably a couple of dozen people actually failed, ever failed a class. And then you know the majority of them would get a b so 5 or 6, and that's the it's not normal distribution.
But we I am actually one we want to did. This was because our principal asked about. Do we have great inflation over the years because some parents are complaining that it it's getting easier to get sevens.
This is an overall data. So we're looking at we are probably as a percentage.
They're probably more than we want in terms of if we are advertising our school as having very rigorous academics, you know, having this many sevens or a's.
Probably is a little bit of a problematic situation. so we need to drill into it a little bit and see where you know over time.
How it happened, or you know, per subject, how it happened. So this one is a, you know, 3 dimensional looking at from different subjects over time.
And Some of these subjects on like there is a little bit of a trend if you look at, you know, through the timeline, and this is spring, that 2020 looks like that several subjects during around that time you know
a spring and fall of 2020 there's like a significant spike in the average score.
So i'm sorry I should have said this is average grade over time per subject.
So I I Something happened during spring of 2020, I wonder what that was?
So what happened? We did a discussion with our teachers. And then, you know, basically, we were thrown into online learning.
Just, you know, and no one was prepared for that. And you know honestly, teacher, feel really guilty on one hand about kind of a failing.
Some of students and students were having challenges you know the at home. There's some of them have you know problem really self-disciplined to do work.
Others just just generally struggle for not having interactions. and teachers got compassionate.
So they the grades were little loops in terms it's not a strictly to based on the the criteria anymore.
I think that was our reason. And then, after that we are a school Director had a stern talk.
Was the teachers about this inflation situation. so as you can see after that there's a major drop of grace, because all of a sudden the teacher got really strict, and because we were you know, worried about in great inflation so this
is a little bit busy. I was having to try, really, you know, trying. I guess I can use the the, you know, trying to isolate each and one of these to look at it.
But I still want to see them all on one screen, and you know sometimes it from one to another to to do some comparison.
So 1 one way I did this was I create this. So this basically, if you look at it from the the center going out of is from, you know, 0.
Nobody gets 0, of course, in the the but you know one through 7. So the closer you it is towards the center is the lower the grade.
This gives a couple of you know. insights one is some subjects like this.
Heel. it stands for humanity, for English as additional language. So these are our students, whose their parents don't speak English they come here.
They from Germany, friend friends, and you know maybe Japan. and then they are in the process of learning English.
Well in learning, humanities, and humanity in our school is economics, history, and the geography, and especially in subject like economics and history, they really struggle, and they can't really write a 20 page essay about stomach event in world.
war 2, so we actually pull them out into this different subject. Well, it is not different. It starts with a modified humanity specifically for English language learners.
And there are grades are lower, because it would not be fair for the native English speakers from the Us.
And Australia to get a 5 on the humanities, and the English language learners get a 7 in a like a easier subject, which is related to that.
Anyways it gets complicated there. but this. So this makes sense. And then also this can tell which subject, or which teachers grade a tighter in terms of in on like.
If you look at maybe English, a so English a would be literature and the language for for that they grade pretty tight, And you know this shorter stick.
Here. music is really long stick, you know so the it's a little bit all over the place. I guess You can say that's more subjective we don't know we can have discussions about this.
Of course this has to, you know, getting down to individual teachers and the student covers, and there's different factors involved in here.
And then for this Initially, I thought it would be easy to create a legend, and then use this legend to filter the data and going from one
So yeah and and then I realized that Jeremy, just wait a second. Okay.
So I I realized that this is not as easy as it. And so so what I did was I ended up creating some buttons using the buttons to simulate this feature.
So basically it looks like I am trying to. I am able to switch from you know, one to another, using this a legend.
But in reality they are just transparent. buttons on there, and I later found out from Belle that there's actually in the works.
Maybe maybe I should just talk about this. You know that maybe this a little easier down down the road.
But but what this you know. I just use this as an example. You know you can actually sound here. You can see the relationship between heel and humanities.
You know in overall how how you know one goes, you know. The grace relation. but also I don't know if you you guys is a teacher, would recognize this right away.
So this charts the way that these, these, all these lines graphs are going.
The plots are going is firms let's say a fall of 2,015 to spring, of 2,016 and then from fall of 2,000 16 to spring of 200.
And 17. so on and so forth. Basically, the the fall semester is all of us. School year starts, and then spring semester is the you know.
How is the school year ends, and from the fall to the spring, you know, from midterm to finals, and as we expect students get assessed for the same criteria, and they improve dramatically.
This is called learning in a school. So then, of course, when you start the next school year there there is that's how you can tell whether or not there is a inflation of grades or not, because in some grade some subjects they
they grate pretty tight in a pretty tight range between 5.5 and 6 In some.
Some of them are, I mean. we were looking at music was a little bit all over the place, and there may be a overall general trend of going up.
You know, over time, so that that would be inflation. Or also, you know, there is a 10 over of teacher in 2,000.
I got a new teacher. So there's a new teacher maybe what's grading a little differently than the previous t-shirt.
So that's these are some insights that you can tell i'm using using the this this graph. So that is what I want to share in here. There are some proprietary information.
Now I i'm not good no this is really great thank you for sharing that and this this one's Probably I spend the most time on because it's it looks easy. but it's time consuming how to create a lot
of pro perspectives, and then do the using the filter to create correspond to the button actions. It just so. everybody else knows.
In about a month or so we'll be releasing software yeah, just so, everybody else knows in about a month or so we'll be releasing software where you can use the legend like this to build intelligent filters that's
right? Yeah. So how you have I am very impressed that you have built this the hard way in any regards to to add invisible buttons to do this, and that's actually one thing we're gonna cover today. is buttons.
So you are definitely head of the curve there in terms of making that interactive. Some of the things on Step 2 where you were talking about visual crowding, especially on when you have multiple lines all on top of each other.
You did the right thing where you know, you can filter it through by double clicking. So you can, isolate something ideally we'll have in the future, and the ability to multi select you can select multiple lines so that you can see them at comparing Contrast one other thing to do and i'm not sure if
you've done this already. is to sort the data and So by sorting it's from high to low it it tends to make more of a surface, and it's easier to compare and then lastly is to change where
the access is so the access is actually more in the middle. And so then you have things going above, and below the axis we've also found helpful to then visualize what's moving up, and what's moving down and I can show some other examples of that But it's amazing to see all
the things you've sort of encountered in the ways You've gone about to help make those easier to to click through, because it's exactly yeah exactly right.
So I was really excited to have you present this yeah that's a good example for everyone else to to glean from in terms of some of the interactions. and how you're showing same data set moving through these different
visuals. So all right, this is really cool i'm gonna steal steel time here back.
I I know we spent some more, a little bit more time on those. But those were really impressive presentations that I think were very well worth it. I was going to show one hierarchy that I was working on related to inflation data still in progress, and I didn't didn't quite load up
Electricity Generation Flow
yet. But today what we're going to be doing is diving into this flow on us electricity generation, and in this flow there's a few things that we are going to cover.
Buttons
Or quite a lot that we are going to cover one of the one that's one of which is buttons.
So here we have actually a button that takes us to the data source. So as a way to more consistently source all of we recommend adding in a button that links to the actual data set that you use, and that's an easy way to cites, cite the information So some of the things that
we are going to be doing, diving into additional dimensions. How do we actually stack these dots on top of each other?
We're going to be using point per row for this information and most importantly, we're going to focus in on storytelling.
How do I take this visual that I created and now? how do I tell a story across multiple mediums?
So there's the medium of computer of just on the computer me sharing through zoom there's also the live meeting aspects where I can start a meeting, and that is always available.
So you're aware. Let me stop this first and took me back.
I'm sorry about that. Okay.
So when I ended the meeting, it it close the window so That's why i'm going to just reload the page here
As the Internet box down little slower here, but
So the we have multiple ways to present and one of the last ones being actually diving into an ar video. And so there's some some considerations when you actually develop and build a flow in ar that we're going to cover So with that
let me start to actually dive in so to do this just like last time, and some of the other times we'll be using our training data sets which is located in that demo media folder.
I'll put a link to this in the chat window here is that everyone has its and on this data sets what we have is year a source.
So this is the electricity generation source, the actual amounts of terawatt hour power that is generated from that. And the terawatt hours was something that is just divided by 10.
I forget what the original value was. but convert. To tear. one hours was dividing by 10. And so from this we can actually build this chart.
And so, Mickey, to your points from last time as Well, we're covering animation number one form of animation rather which is, how do you go from basically this step to this step and keep adding in more information and So that is something we're gonna cover
as well. with that. let's start out okay so this is a blank flow.
I've gone ahead and clicked edits refreshions it's a Google spreadsheets where i'm linking in this Url into the document and importing and so now I can see that information here and Now, i'm going to start
2 billing. But one of the first things to note is that here you have this sort of positive positive stacked bar chart on top, and then you also have a bar chart on the bottom.
That is actually positive. but going down and this was done purposefully to symbolically show how the top is renewables.
And we're growing electricity usage there but we're also growing electricity usage with non-renewable sources.
And so you can see that overall increase in symbolically that we are taking it out of the earth, and so pulling it out of the ground.
Hence. Why, it's going down and lastly we can see the change, since sort of mid 2,000 until today, where we're using less and less cold is actually increase natural. gas. But overall renewables are are growing
more so than the individual components and then one thing that's really nice about how we have the ability to use additional dimensions is that when you add in a depth dimension.
Now you can separate these out as their individual components. So lots of ways to sort of to to sift that same data set alright.
Snapshots
So what we'll want to start out with is to create a snapshot where we sort the renewables from the non renewable sources.
Filtering Sources
So what I'll do is click this little filter icon for the sources, and I can see the different sources available to me.
I'm gonna go ahead and select actually start with the natural ones. First. So everything says those ones and i'm gonna click create snapshot.
I'll click this edit icon and i'll call these renewables, and then i'm going to go back to the original data sets click that filter icon again and select the opposites
And i'm gonna call these not renewals right so now we have 2 snapshots, so on this first swarm.
I'm going to have that. be renewables and then i'll have a second swarm a little bit later, on which I will create, which is not renewables.
So let's start out with the scatter plots on the width axis. We'll put the year, we're gonna format that as year on the height axis we're going to put the value in terawatt hours, and so we'll see this graph starting to come together.
Now this is sort of how you traditionally would see it. And this is point per row which is that each row is a dot in the data sets.
Stacked Bar Charts
But one thing you can do is create stacked bar charts by just changing point. Perot to point per value so we're going to use the terawatt hours as the actual dots in this case, where I believe each dot is going to be equivalent to 100 points. and So to show that i'm gonna
actually hide the height axis, so that all the dots are on top of one another, and then i'm going to go into additional dimensions.
So, even though it looks like each dot here is just one dot there's actually tons of dots within that one dots.
They're all sort of on top of one another and so now what we need to do is separate them out, and that's all done with this additional dimensions category.
Now we've have some like shortcuts to to create views, and the easiest one to start with is stacks.
So if I click stacks it will separate out those dots. And I realize I want to make this little smaller.
So one dot is equal to one value, so one dot is equal to one terawatt hour.
And so these are all stacking up and actually ping it a little shorter. Actually let me take that back, so that we can fit it all on our page.
Color Scheme based on Source
So they're all the same color because we haven't differentiated the colors yet, and the easiest way to do that is to add a color scheme in based on the source. so here.
We see our our 3 different sources, we can change the color scheme. One thing we previously covered is in the environment. Tab.
You can create a custom, color, scheme here name it anything you like, and start to add colors and and change these configurations.
So some of the other things we didn't mention were backgrounds you can change the background. I saw how you had changed the background on your since we have some default options.
One of my favorites is mountains at dusk, where you can change the background for the Vr. Scene. You also have some other options here, So stabilizing grid is good, for if Vr.
Focused environments to reduce motion sickness. And there are some cases where people have wanted to use a light background, and you can do that by actually going to gradients and changing the color of the backgrounds.
Now we encourage people to mostly use dark backgrounds and light contents, because in augmented reality you want light to be emitted from the dot or from the text, so that you can see it black.
Is essentially the lack thereof light, and so if you Have all your contents as dark contents against the light backgrounds.
When you're in august reality it's going to be really difficult to see. But there are instances like embedding this on a web page, and things like that, where you may want a lighter backgrounds and in that case
Okay, Okay, So we have now set up this first part of the graph and some of the other things I want to do are adding interactions and interactions are really important both for in-person meetings.
But also, as you're presenting to be able to select things and actively pull things up. so there are on select pop-ups, which is exactly what it sounds like when I click a dot.
When I see. So Let's adopt what happens and there are 3 options, 3 texts overlay, and 3 d image, 3 d text works in Vr and every other device.
Whereas overlay text works on every device except for when you're in virtual reality or headmounted augmented reality.
And so for this i'm just gonna select value and i'll put up at the source too.
And So when you click on a dot here it's going to bring this information up now, one thing to note is that it's going to always put this on the same line, So if I click all of these you'll see it just
creates one line of text when I click on a dots, and if I want those to be separate lines, I need to either on the trailing text or the preface text, add a character return like just kidding the enter key on my
keyboard, and so by doing that now, when I click on a dots, they will be on separate lines. So that's on select text.
Now overlay text is basically the exact same thing. but instead of it being in 3 dimensions in the environments, when I click on a dot, it is actually on the *d plane.
Of whatever device you are looking at. And so this works on phones actually quite nicely. And then the there is a line that points to whatever you selected.
Just one other thing to note on 3 d texts while we're on. It is that there are pop-up text options here, and by default we bind it to the points.
So when you click on a dot for threed text, it goes up 1 point, one meters left or right point, one meters and point, one meters towards you, and these are all adjustable.
So you can put this in whatever position you like, from the point itself.
Camera Positioning
But you also have the ability, if you wanted to to have this be dynamic, which was how we used to do this where it's based on the camera position.
So it uses the camera and always puts the label out in front of the camera a set distance away. So recommend buying to point for now, it's definitely I think of our best practice is what we've seen and what we would recommend most highly.
One other thing, just to notes is in overlay text. You can actually include Urls so they're on our homepage.
There is a voices of vr podcast flow it's Actually, if Bill, if you maybe you could bring that one up wasting the more time loading the page or we go load it separately.
And I can show you that, but it allows you to basically click on the link. So in that instance you can actually open up the Mp.
3 file, and actually listen to the podcast episode so there's more linkages you could do, and you can also add it add in images
So i'll try to bring that one up for a little bit later. Alright. So that's on select now on rollover text is not clicking the dot, but just scanning over it.
And this is actually really, really powerful, especially in a R. or a lot of devices where you can really just get a sense by not clicking out of, but just dragging over it.
And in Vr. it feels very powerful to just point around and everything's popping out at you. and it's a very easy way to just quickly get a sense of what you're looking at and then when you actually
click! then it brings up the additional information based on whatever you have selected. There now threed image. I believe you need the Url in the image itself.
In one of the columns. so it needs a url to point to. So we're not going to cover that one right now.
Highlighting
Now, what else we got? We got highlight enables and this is a very, very powerful one. Where you have the ability to and let's actually use source. Now we'll use here actually, so what this is saying is when the category column year matches whatever you clicked So in this case i'm
clicking, but 1,992. it will highlight. Everything is 1,992 and
It is saying, if it's a match change it to white and make the size bigger that's what option you could actually do the opposites
Where, instead of highlighting it you could say for everything that's doesn't match, go darker and that way.
In some sense, what you're doing is a pseudo filter where you're just sort of making the other ones a little less importance, but still somewhat visible?
So how? to your question of you know. what could you do to on that?
You know, bar chart, that was a little scattered. That is another option where you're making it just a little easier to to see the other ones.
And you can do multi-selects in this case, where, if you hold down the shift key, you can actually select multiple items, and so that will hopefully help.
In comparing contrasting information so different ways to skin skin this you could also do, Miss, as a small value.
So lots of different ways to do this, a lot of options, and the last one being filter, which is actually something.
I saw how you implemented, where, in addition, if I just double if I double click on it, it will now fill it down to just show me that piece of information.
And one thing to note is that if you have inside this filter category.
There's a checkbox for hide filtered categories. So when I double-click it filtered down just to show 1,994.
If I have this unchecked i'll still see the whole time line perspective so sort of another option to choose from in in that sense.
So lots of ways to to change this. but some of the other things so access, drag, select, enabled, allows you to take any of the axes and be able to zoom in quote unquote.
And you do that by holding the alt key on your keyboard and then dragging over the axis.
And you're seeing here that because I have that filter mechanic on I'm basically actively looking through different time zones or different time periods here.
And if I check this box, I believe when I zoom in now, it's going to basically take over the timeline and readjust the the series.
If I were to hide filtered categories. And unchecked this box. oops
Actually. yeah, What happens there? So that was nice okay cool.
So we've covered those categories here so this works on flat screens.
But does not work on in vr devices. So something 2 notes for this, with access so not use quite as often, but is available.
And then, lastly, and this is used more often on not point per value. but point per row is column pulldowns where you might have a height axis here. and let me go ahead and do that so actually i'll add a
depth access. Just to make this a little easier, so I can add in the depth axis, and because we used additional dimensions.
These are no longer stacking on top of one another but separate it out, which actually is kind of cool in and of itself. And so we'll maybe leave this view on.
But one thing you can do here is within interactions on call and pull down. I can actually change this depth axis to have multiple values.
So I can have this be, say the source and I also have a column called Order, which doesn't really mean anything.
If I now click on this axis I can see that there's 2 options. So in the exact same step I have the ability to now dynamically change one of the axes, and so most often you see that on a height axis where it's a dimension measuring something and you want them to
be able to iteratively change change that. So that is the column. Pull down category so now we've set up a little bit of a view here, so let's go back and let me turn off the depths.
Axis, so these are stacked on top of one another. And what we're going to do is think about the animation. And so what we're going to do is essentially add a second step.
And actually, before I do that, we want to build out the other part. So this is renewables. How about not renewables?
So what easiest way to do this is get this all set with all the interactions and everything you want it to do so that when you duplicate that that's all there now as well and it should be, as simple as
changing this to non renewables. So that now it's showing not our mobiles changing the color scheme to be whatever else I want, since I can choose from my custom, color scheme, I define and this is also going
vertical but I actually want it to go the opposite direction. And so to do that, it is within those additional dimensions that you have the ability to stack these on top of one another, or you can actually have them go on the bottom.
So now it's going down on the bottom one other thing that you'll, You may notice is that there's no vertical axis indicating what these values really are and that's because each of these dots is
taking up a certain amount of space dimensional space that you can actually change. Here. so each dot is point 0 0 5 away from one another.
So it's a it's a little trickier in some sense to to create that back axis. Which you see in this graph. and the way that was created was actually by creating duplicate swarms.
Of the data which will i'll show you and using this as point per row.
And showing just the year column And so if I go back to our flow here
So just for renewables. if I duplicate this swarm what I could do is actually add in that height, axis and have this move upwards.
Since We know that the Scatter plot is one meter high.
We know that the center here is going to be point 5 meters up. So if I move this up, what 5 meters And now have that access?
There, and I don't actually want the dots to be visible. So i'm actually going to make these dots extremely small and not responsive.
And so there's a little bit of of manual work here to to add in sort of that back access, and that that might be changing here in the future
But for now it's just something to be aware of that you might have to to add in an access after the facts for some visualizations that use point per value or stacking dots.
Animation
So now let's actually go ahead and add in some some animation. So if I add a step. what I want to do is essentially go from one filter to a next.
And so this second view has no filter applied, and so on. The first view I want to filter the year so it's just the beginning years.
And so if I go in, I can do this inside of filters where I create a new filter filter of the year, which shows me the current range, and I add in, let's say, 1950 as the new domain and this is just
for that first one. we need to do the same for not renewables. And in the filter where I look at the year is equal to 1950.
Alright. So now we have this very first set, and then when I go from first step to the second step, we now see this animate out, and the way we can adjust that animation.
Step Details
One is within step details. so step details here brings you to some more information on each step.
And Mickey, I think you figured this one out. Which was, You can actually name these steps and you can show those names in the editor as well as when you're presenting.
So you can actually have a step name in this case they're not very exciting names. But but basically, you can. You can name the steps here.
But the thing I wanted to point your attention to was the animation duration to next step.
So this allows you to dynamically change how long it takes between these 2 animation steps. And so, this being 15 s, is a very different look and feel than when it was 2 s, and this can be used to show a very dynamic show over time and things like that. And just while we're on the subjects in the swarm
definition. there is a section for animation, and just to quickly cover it by default.
Ripple animation is on the duration is considered the total duration of how long it takes for that animation to occur.
It's actually overwritten by whatever is in the step details. But what matters is that the item duration which is how long?
Each dot takes to go from its first point to its final destination. The ratio of item duration to duration is the thing that that matters. so.
How quickly the the dots move. so just to help illustrate that for this first swarm i'm going to turn off ripple animation.
And so what you'll see is that the bottom ripples in but the top just comes in all at once, and I forgot for animation.
That requires the same, and refresh. so i'm going to save and refresh the page.
Since that is not one that's we'll take in the preview would do. Unfortunately. So now, when I look at this animation, the bottom is rippling in Nice and smoothly, and then the top actually just comes into place.
And there are circumstances where you do not want rippling. Most notably when you have maps in your changing the heights of a swarm between steps that you don't want it to ripple in, but you want to see all the dots sort of move and expand all together as one
sort of units in some sense so different circumstances. And then just to i'll just write out in animation second one.
I make the item duration much longer so if I make this 6,000, and make an item duration like 200.
Then what you'll see is each dot coming in much faster because it's trying to do more dots.
How do I frame it? alright? The each dot is moving faster. But it still takes the overall same amount of time.
Hope that makes sense to everybody. But, anyways, those are the parameters to to change the change there.
And then I think we've done. this before But you do have the ability to change the shape of the actual dots, so that it is not a dot, but could be something else.
And actually in our demo media folder, we have quite a few different options to choose from. I just can go ahead and grab this cube just just for a bit of fun.
And i'll make these guys a little bigger maybe not that big 15.
Okay, and said, These are little cubes. anyways, So different ways to to slice. and dice this so now that we've created this 2 step flow, which is not necessarily revolutionary.
I want to make sure to cover. How do I actually present this? And I recognize we're a little overtime here so yeah.
So comes across plus The mechanisms that we described are to create a live meeting which you click this button to start that meeting. but the the thing I really wanted to show all using enough to bring this up is that
I recently published a a ar video where it is of my physical space, and I have dots, sort of all surrounding it, and you know I can can show this animation.
Presenting in AR
And I show this because I wanted to help people understand. How does what you have in flow translate when you go into augmented reality?
And so one thing you can do is actually this is all from an app call polycom, which allows you to create a Glb model of your room or any other thing.
You scan, and then in flow, you can actually import that model by adding a model.
So this little button here says, plus model, you add up. You can add a model And the reason I wanted to show this is because of this little text item right here.
I put a little text object at minus 1 point, 2 minus 1 point, 2, 5, 0 0, minus 1 point, 2, 5.
And the reason I did that is because within settings if I go into settings. You'll see there's a little something set here called Mobile Ar Center Point Height offset from the floor.
Shows 1.3 it's. actually 1.2 5 it's just a rounding thing within here, and then there's also the mobile height off table, although Typically, we see people putting it on the floor and I haven't necessarily
seen this one go, but so typically it's minus 1.2, 5. And the reason to know that is because you want to know where the floor is.
When you center your content. and so, by just adding a text object and placing it minus 1 point, 2, 5 meters down.
I now know where the floor is, and so I now know that my graph will essentially go through the floor. If I were to rescentric, so that might cause me to to want to reframe this, maybe move it up, maybe make the dot smaller.
All sorts of things you can do to adjust it alternatively. I could actually just go in and inside of settings I can change the mobile height off off of the ground.
So now I can make this 2 meters out and so no longer will I have that same issue in ar mode because this text objects can now be at the rights location.
I'm sorry that the the ground will show up right so that's the the new view, Maybe might be a little too extreme.
So let me actually adjust this just a little bit. Go to settings and make this minus 1 point. 5.
Oh, sorry. 1.5, not by 1.5 great. So that is something to to notes. when you go into ar mode to record these types of videos.
And the last thing i'll sort of note on those videos I don't think I have enough time to necessarily go go in specifically.
But the thing I wanted to just quickly point out was that you want to stand behind the contents, and the reason being is that in ar mode we don't have image officeation presence.
Where it doesn't account for your body getting in front of the contents, and therefore not showing the content.
So the content will always be visible. so if you are going to stand in the scene. Stand behind it and present it don't stand in front of the content.
So something to note that's a little trickier but is essentially how you do that? the way you get into these meetings to record.
You'll notice that there's a little virtual cell phone that i'm holding and that virtual cell phone is a result of going into ar mode while in a live meeting.
So when I click on this button for a meeting to start a new meeting And i'm gonna join without audio when I now join on my phone.
I will essentially have 2 2 things in the same scene. If that makes sense So I I don't think I have time to necessarily go into the end detail on that.
But essentially, by starting the meeting re centering points, we can actually add in multiple users and create these.
You know, weather, maintenance videos which are are quite popular. And something that's we've seen brands wants to be able to to post, and things like that So that is sort of the the ar mode here.
So if I go back here to the flow itself there are just a few subjects here that I want to make sure to to finalize.
So i'm gonna actually end this meeting again
Oops.
It's edit here. so the last few things I want to make sure to cover Just so we have coverage. One is for the story, Creator which I punish to cover early.
Story Creator
Apologize. So not only can you record these ar videos and share those but you can take any of these flows and add in your audio, and in the future actually your avatar to present the data when they click on the link, So if I
You'll see this flow, and you can go from one step to the next. But if I wanted to add in a bit more I can click on create story which takes me into story creator mode.
Adding Narration
And the main thing you're gonna be doing there is adding narration. So if I click, start new recording there'll be a little countdown timer, and then I can start to actually give my presentation, and so I can record my voice, which is reporting right now.
I'll click Stop! and now, I have added my narration to this step. So whenever someone comes to open this flow, that audio will play and that you can also add a few other things.
Annotate
So if I add in text elements, one thing that we often do is annotate.
So if I have a dot that I want to point people's attention to like. Look at this. If I click annotation line and then clicks left dot annotate, I can pick a dots.
And now I have a line. I can see that align connecting my text object that data points and I can actually open that line directly when I click on this button and take me to the line definition on the visualized
data side, but within create story I forgot you don't have access to the edit. The line dimensions necessarily, but you can adjust other features under these 3 dots, such as the font type, and some other elements there.
So annotation is a very powerful thing. In addition, you can add in a step where I can update a step of this view.
And yeah, that updates the the camera view. And I can actually update or add in a new step as well.
2 last things to just quickly note. there are these 2 buttons on the bottom. This is the camera position preview but there's also a mobile camera.
Pv: So you can actually set a different perspective first step based on the device.
So if you're on a mobile camera or mobile phone that by default it tries to fit everything in the scene.
But sometimes you it just doesn't look quite right until you want it to be a little more zoomed in And so to accommodate that by simply moving the camera using your mouse, you can then set a camera position
and so if I zoom in I can then click update step camera.
And now i've updated the mobile position so a few other options there, just to be aware of So now i'm gonna go back into visualize data.
I can actually see the line that was created here. Since this line category you can change the color.
Sometimes we we have the color. try to match you know the thing you select So it's a little easier to see you'll notice that sometimes those annotation lines look like they're off and they're often a an elements just having to do with the preview once you update a value
here it snaps back to the right spots so just something to be aware of that. This is still a preview window, and sometimes it's not perfect.
Alright gonna finalize this and try to to to knock this out. So we got buttons which we were referencing as a way to point to the data source.
So if I take the data source and I can take this button and i'll put a data source as the title i'm gonna add in an action.
And so I can add an action here to say, Open a link. And here is the Url to that link. So now, when anyone clicks that that it will open up that length.
The other thing to note is that there's also this little icon for showing is that a *d overlay? So now that if I have that selected not only is it in the 3 dimensional scene, but on any *d device, you'll also see it just on next to the next back and and restart buttons so that allows you to add
By adjusting the opacity, I believe, in some other parameters here. Actually, i'm not 1% of all the parameters. You adjust it.
Because i've done it, too. to to create not invisible buttons, but invisible swarm dots where actually each of these swarm dots you can change to be invisible in many instances where you go
into image shape. and actually in our library, we do have transparent picture, which will just basically make it blank or or it'd be invisible.
So just something to to note it's a little bit of a a work around or hack and then, lastly, just to finish up here.
Loading in Images
So we have image files. You can load a png or a jpeg image into the scene itself.
Pull in a image here
And so each of these you know these images you can make curved in addition to some other parameters.
So lots of different options i'm not going to go through a ton here. But one thing you'll notice for every object is you always have the ability to update the position.
You can copy that position, that this position rotation scale, and actually apply that to any object.
So I can. You know, paste that position. It will take the position of whatever object. I not copied the position from, and now apply it. So if I go to that button as an example oops on this step.
And so, if I turn on the visibility for that button, I can now paste the position of that, and it will be on top of that other objects.
So a pretty powerful mechanic here to be aware of. for for changing the position and some other attributes there.
Groups. are we don't use very often anymore. And actually can cause quite a lot of of issues. but it's a way to add objects together and basically move them all or rotate them all together as well as some other specific use cases.
But would not recommend using them too often. lines are created automatically with those annotation lines.
But you can create a manual line where you basically select 2 objects, and it will draw a line between the 2, not using a texture.
And you can adjust attributes there there's also 360 images, which, if you have a an image, it will load it as a 360 with you looking out or looking out you don't have the ability yet
I believe to to be on the outside, and see the app But you if you're in the middle of it you will be able to see the inside of the the view, and that's often.
Yeah. So if you're going into those types of are you building those kind of environments that is where you do that.
So with that I know i've covered kinda a lot of ground here to make sure we cover sort of everything that's left.
Actions
I think we've covered everything Oh, sorry one last day which is actions. Alright on the button, you you have the ability to do a direct action like go to a link, but for anything that you wanted to use.
It's more custom, or you actually can do quite a lot if I go here, let me actually add a map
And so one action that we see often use is in actions. If I click create new i'm gonna add a sub action here that's executing sequentially.
I could have them all execute at the same time. But what I want to do is just have an object rotate in this instance. I want map one to rotate and I want it to rotate believe it's one degree.
Yeah. So one degree on the this is X Y, or this is the with heights depth, access for rotation.
And so this is basically saying, Go one degree and take 1 s to go one degree. So it should take 360 s to go all the way around.
Is essentially how that works, and so that's used quite often. But to actually get that action to run that is done within step details.
Step Details
So step details allows you to attach actions to a step.
And you'll notice actually, that there was actually a narration action, 0 already added, because when I clicked on create story and added narration, the way that actually is implemented is as an action to place that audio which is stored
within audio. so. you'll have all of your audio files here of everything you've narrated or added yourself.
So that is where you go to do that since there's a lot more things you can do that are when we're complicated.
And you know, before we used next in back buttons. It was all Everything in flu is actually accomplished through custom, actions, and buttons, as the main mechanic.
But it became very parents that people wanted steps and to tell stories. So. that is why it is the way it is so. Let me pause.
There. I know I covered sort of squeeze a lot in there. So what questions do you guys have? And what would you like me to elaborate on recognizing time? Hey, Michael?
I have a quick question about Vr mode. So you mentioned the sum of these features or elements works better in Vr, but not in a are vice versa.
I guess I could create multiple versions and then create a specific version for Pr. But if I want to start a meeting and the people are joining using different kinds of devices, how do you handle that situation?
There's no detection of what being or even selection of what device they are joining from.
Great question, I would say, for the most part, you know, 95 or 95% of of everything.
We have works across platforms really well. it i'd say most everything you build works really great, and and we actually have gone through the the trouble of of changing some defaults.
So like in Vr you want things bigger and you're moving around those. So it actually scales the world up by threex by default. And really there's only just those few interactions that are left.
Namely, the interaction for for overlay text. Basically, if we're gonna have people in vr er just make sure to have *d text, which will work both on flat screen as well as on in ar and
vr Some of the other things that's we've done to accommodate is with actually within.
Is it still there? No, that minds have to go back? Used to be something where you only Show in Xr.
But I don't use that anymore. so yeah I Guess to to address your question for the most part things work.
It's really just the interactions and that's drag access select
That's a little difference if You're hosting the meeting with people in multiple devices.
Jason, do you have something else? Yeah, actually on a text? There is a show in Xr only, and The reason for that.
Oh, there is the reason for that. is that There is an overlay text which Michael didn't show you in the story.
Creator. So on flat screens it's we had a lot of just show some overlay text, You can just it's already visible.
You can just click in it and right and so. But this isn't over, we call it overlay test because it only shows up on a flat screen.
Well, if you wanted this to show up also in xr then you would create it as and text elements it in threed space. But then, if you click showing Xr only it makes it disappear.
When you're on a flat screen similar thing with buttons you If you want the button to show as a 2 d button, it will no longer, even though the button his data source button is looks like it's in
the scene right now, and that's good because in 3 D. in Xr. You want it to be in the scene because you don't have it as a flat screen overlay.
Then it disappears on flat screen and it's only visible in Xr. So we've done a few things to overcome the fact that it's a make it a little bit Make some of these interactions Text and buttons look better on a flat screen.
That, of course, don't work in xr and so we'd give you some options to do that. Yeah, thank you for the pointing out the overlay text here, which Yeah, is there another way to sort of add narration.
Without using your voice. and works well on flat screen but to Jason's point doesn't show up won't show up if you're in Vr.
But you can sort of circumvent that by having text that will only show up in Vr. And that way you can position it to be in the right spot i'm gonna mention one other thing Michael just hit control plus and control minus on your browser.
So you can see what happens when what that does so you can make by changing the size of the rest of the interface.
Based on the size of your computer screen. it's really handy to kind of tune that and I use it all the time
All right? What other questions do people have minor question based question with just a number of the original instructional videos that are available in the house section of the website refer to some data files that aren't part of the training data
set like one more. The I think population growth was used in a number of videos.
Yeah, I was looking for the data file and it isn't there, and I know that Bill used the I think he may have used the very book file in his demo.
2 classes about. So if you can possibly track down some of the more currently use data files in the base set instructional videos, I find myself going into those as a secondary resource, and it'd be really helpful for me
to to find. Yeah, thank you for pointing that out and we're we'll work on that. I'm not saying if there might there's a chance that's It's We also have this little from library section, which will be more built out eventually. But we have these 2 data sets life expectancy and 10,000
cities. So that is just in this from library section, and is used quite often in our training.
And ideally, we don't have the school drive that that will all be here, so that all the training data sets will be there.
But population correct? Okay. Yeah. we'll take a note on that, and and try to follow up thank you for that .
Perfect that's great I have a quick question that came up when I was doing the the higher account.
And I found you can adjust the position in X. Y. Z.
But I found it might be useful to do rotation I didn't know. The only way to do rotation right now is is really with your mouse, and sometimes that can get if there was a way to just spin Maybe I can do that to the
animation one of the yeah it's interesting to Bring that up.
So what Jimmy's describing is the way you move in in flow is like click and drag like i'm moving my camera in space.
And actually this is most pronounced in Ar and Vr. Where you essentially need to move yourself. but we do have it's not in the editor.
We're experimenting with the ability to to rotate an object itself like actually grab in this case the swarm and rotate it, or grab a map and rotate it, and we do have some other demos where where we've
done that it's. it's a little right has pros and cons but it's definitely something we've experimented with.
Yeah, it's kind of a horrible hack right at the moment, Michael, it hit your queue key on your keyboard, and then then mouse over the object.
And now you can actually rotate the object instead of rotating the world. So yeah, I I i'm not what I said deep.
It is that kind of an interaction. it's just one of the it's an interim step that we've made in order to help provide this functionality, but we know that it's not cool right done yet that's all it's
high. Okay, I learn something new every day. Yeah, get to select the object.
You get to select it. I once you hit queue you're in that mode and then you roll over any object, and it'll give you the the sphere to drag it got it cool.
So yeah, I can receive that yeah it's It's not Yeah. And It's, and you can basically what we need to do.
Headset functionalities
What we're what we're doing is in headsets we're focusing again on you know using 2 controllers and full menus and things around that, and with multiple controllers.
Now you've got you know more capability to grab a certain thing and rotate it. So we built the functionality. We just want to tie it to a good way to be inxr and then provide a good Ui on flat screen for it.
So the functionality is easy that Ui is taking us a little longer to figure out exactly the right way to do it.
And also just so people are aware. there is a little bug right now in the You record your audio.
It will garble it so. just for a little. Yeah, though, that is a more recent one. just in case you encounter that.
So the training, when I just recorded has a little carpet. The voice sounds a little odd on it alright cool Well, i'll be sending out a certification details. Basically, we'll have sign-ups for next week if you'd like to present your capstone during
the class in front of other people you are welcome to do so and we'll have the normal class hours. And then we'll also have sign-ups. if you want to do it more privately or individually.
So that way we can cover everybody and there'll be more details there. But Thank you guys for staying over. I know this is a little longer of a demo here, but hopefully was was interesting.
And yeah, you learned what something along the way. Thank you very much, hey?
No Comments