Certified Flow Designer Training Videos and Transcripts

• Intro to Flow: Core Components - Certified Flow Designer Training 1 Transcript
• Working with Maps - Certified Flow Designer Training 2
• Hierarchies and other unique spatial visualization - Certified Flow Designer Training Session 3 transcript
• Legends and other details to build a Flow - Certified Flow Designer Training 4 Transcript

Intro to Flow: Core Components - Certified Flow Designer Training 1 Transcript

Intro to Flow: Core Components

to record here real quick. Alright. So for today, And this was my attempt bill of of somewhat of the same thing is to show basically an issue to flow by starting to build some of the core components.

And so this was an older visualization and put together to actually try to identify all the different types of areas of flow.
Narrative Side of Flow

And basically there's 3 different areas there's the data visualization side. There is the narrative side or the story elements that you're adding on top.
Experience Side of Flow

And then there's the actual experience of How do you share it. How do you have a host, a meeting with it? And all these different interaction mediums, and that within those there are a lot of different details, and that will go through these right. The swarms, the connections, all the different types of objects that you can put into these flows that end up making

it up. and this in it of itself is a hierarchy and we'll go through how we're gonna build those. This is a radio hierarchy which anyways We'll get into it at some point here together, and is a kind of a powerful component of what you can do in 3 dimensions, but in terms.

Of facilitating this one thing that we are going to reference quite often is our demo media folder

And so let me make sure. Get that up here

So i'm gonna share this into the chat window this will also be on the recording as well.

So So here in the chat window is a link to our just our Google drive.
Demo Media and Assets Folder

And this is a Demo Median assets folder. This is actually a great documents to save to reference.

It has other information in it, including dot textures and other things that haven't quite made it into the editor.

Yet, but our good reference materials as you start to build flows, and we'll keep adding more to this, including different backgrounds.

You can start to put in like that So we'll be in the training data sets area.
Presidential Interruptions

And specifically, we're going to look at the Presidential interruptions. And I have this Google sheet open already, and we will go through this flow.

So let me first just go walk you through the flow and talk you. Why we start with this one to start learning this will check us off on a few different boxes here of of our total game.

So let's go back into 2020 and look at the Presidential election, and specifically the debates.

And during these debates someone took the time to actually time stamp out all of the times.

One person, interrupted the other. and how long that interruption took so kind of a fun. Data set nothing too serious. But what I like about is that you can extend this application to most time series data i'm in frequency. It's When did it occur?

And how often did it occur? And then, when within each of those occurrences, how long it lasts, so what you're obtaining is sort of this multi-dimensional information and what's powerful about flow is not

just the 3 dens, right? We sort of focus there, And you can see that in the ar videos. And all these elements. But how do you tell a dynamic story, one that grows over time and helps you understand this information to a deeper degree?

And I think this is one of the easiest ones to understand in terms of how you build a dynamic flow that starts to to grow.
Count of Interruptions

So. So the first thing we do is just, count. What are the total number of interruptions that were happened during the time?

And so there was 19 interruptions for Joe Biden and Trump interrupted 47 times, and that's then, when we look over time, When did they occur?

So at what point during the day, or during the the actual debates did they occur?

You can see it's relatively specific and then we can add in another dimension, which is the duration. How long did each interruption Ha! or how long was each interruption?

And here we can see quite a large difference between Donald Trump and Joe Biden, and then, lastly, to actually stack those on top of each other, to add them up and to look at the total amount of time that was taken and so you know

this series of steps I think, is is highly repeatable in terms of showing frequency, duration, and then total sum.

And so that, mechanism is something to learn. But what this introduces you to is the idea of steps.

The idea of filters, the idea of all these different storytelling components that will help you understand how to use the flow editor better.

So I would encourage you to follow along with me here to build along with me in tandem or afterwards. What I'm gonna ask is that's as sort of a homework for next week.

You either take this data set and rebuild something like this, a data set that is similar in nature that includes time, series and frequency events.
Baby Data

And I can point you guys to other types of data that use that, including actually our baby data where we kept track of our babies for 7 weeks of life.

In some sense it's quite similar where it's events out long each of those events took, and what day or what day of the the 7 week cycle is for that.

So before I jump into the actual building, of this let me first pause, and just see if there's any general questions or other housekeeping before we start to jive in

Just a did, Martin? just a question. What do you recommend that we watch and then do it, or we do.

We try to do it at the same time. if you have 2 screens, I do at the same time. If you're just single screening it probably probably just watch.

Follow along and yeah, so that'd be my recommendation. But sort of depending on your level of of I don't know what's good yeah no problem.

So anyway, we'll we'll start to dive in and Sorry about on the on the Google drive there's 2 there's a Csv file and I I guess it's Xl file.

Is there any difference between those 2 sheets? Great question? So they are the exact same. So one is a Csv file, and the other is a Google sheet, and our system allowed us for both.

And actually let me let's actually start to dive in because this is a great way to start so the the data itself. here.
Diving into the Excel/CSV data

What you'll see is that there's column called is interruption. This is actually part of a larger data sets where everything was tracked.

Not just the interruptions. And then what we have here is the start, time and the end. Time in seconds. The total time, which is the difference between the starts and the end, times the amount of time in terms of seconds.

Who it was. the total time, which is a running sum of each person.

So this is Joe Biden, and this is the total sum of that time. And then this is the minute at which the interruption occurs.

You also notice that there's exadecimal value here. Now, if you're not familiar with these text codes, these are actually color codes. One thing with the little hashtag in fronts plus 6

hexadecimal characters is a color code. And so one thing you can do inside of data sets is actually be very specific with your colors.

So if you have in this case for Republican versus Democrat, there are sort of more clear color choices, and you can define those inside of the editor which you can also define this within the data set.

And so in this instance we are defining it inside of the data set to be quite explicit about what color we want.
Defining Color within the Dataset

Each dot to be and so that gets you sort of infinite flexibility in terms of defining different color schemes.

Things like that. cool. So let me pause there any questions on the data sets or

Yeah, what we're showing here

My understanding is, you can have 1 point per row Yes, that's right, and what's kinda cool about this one, and we might do it.

We have a little time here is this is actually really going for point, for value or point per yeah point for value as well.

We are, typically point for row. Every row of a data set is a single dot, which is the case for for this, where each dot is a single interruption.

The duration of which is shown here. However, we could actually change this such that

Each minute is a dot. And so for that first one it's actually 6 dots not one dot, And so we can explore that.

I think that's kind of a interesting way to to start to to use flow as well.

That's yeah, we'll search dive into but yeah, great, great clarification. Any other questions.

So let's sort of start from scratch so here in the flow Editor:

When you're on the homepage you click on excuse me
Creating a new Flow

You click on, create new and so in create new you'll create a new flow, and this is where you will load your own data sets.
Loading in new data

Now, if you're having any troubles loading your own data set, it could be access, or if you're there's a few people that had not activated their accounts yet.

So if you're running to know those things do let us know and we'll help get you by. So when you enter the the flow editor over here on the right is your basically the all of the details of what you'll be editing in terms of the object you have selected.
Object Timeline

And down here is the object timeline i'm gonna keep it on, simple Ui.
Simple UI/Advanced UI

So when you first start You'll be in the simple ui as you get more comfortable, you might switch and use the advanced mode which is under this advanced Ui.

And so right away that first storm is selected and we're going to link it up to some data. Now we do have 2 data sources that are easy to play with and in practice with

Or you can load in your own data sets. This is where you load in a Csv. File where you choose the file here, and we could choose that same file.

That is, in that drive folder. Or we can actually use Google spreadsheet, which is what we will use in this case.

And so I will go back over to this documents copy. the url and paste that url into this documents, and it will pull in the first sheets.

So it won't pull in the other sheets but just the first sheets. Of this documents into the into flow and if I click on edit re upload.

I will be able to view that data. and there's actually other things you can do in terms of aggregation and grouping that we'll get into a future date.

But for now this is just going to be single line data. So we have our data, and and as jimmy you pointed out each dot here is a row of that data set.
Creating a New Step

So Let's! actually start to to create and orient this So first thing i'll do is i'm gonna actually create a new step.

Which is the same as adding a a key frame in an animation, or a a slide into a deck.

But it's the next point of our our story and so I'm. Starting with this random view, but now actually starting to organize this.

So the first thing we looked at was the overall count and so to get to counts, we're going to use categorized columns, and we're going to categorize it based on shoe so it's

either Joe Biden or it was Donald Trump!

And so that we will see they see these based on that. And just one moment. so i'm gonna save and refresh

So what you'll notice here is that after I made these changes stuff. Looks like it updated here, and that could be for a variety of reasons.

But so yeah, you'll see attempted transition to not exist in perspective. Perspective one. So this is where you'll see error messages, and you sort of see this all this all together.

Is what we can do is if I go into the advanced ui This will allow me to actually see the different perspectives and it looks like there's a perspective one that was created, but I didn't have any values in it, and that's why it was throwing things off for us.

And so here, what i'll do is change this to categorize columns. I want to categorize this, based on who, in terms of either Joe Biden or Donald Trump.

And so this is that first view. So first thing we'll do is start to change that color, and we know that the color was something we referenced inside of the data set itself.

So we can use this last one, which is called by hex values in column.

Now just to to quickly elaborate on the different color options you have fixed where one color is for the whole swarm.
Swarms

And when you think of swarm, think of collection of dots. The dots exist somewhere, like you're moving those dots around, putting them in places based on their attributes that is going to swarm this. basically.

And so the other things you can do gradient scale so here we'll radiate the let's see how many minutes it took.

So a short amount of time here in green. a long time is purple.

May not the best use here, but the last one color scheme. This is allows you to define a color scheme.

In this case we can have, one based on the column. Who which is Joe Biden, or trump and then the color scheme itself?

You don't actually see colors here. but these are actually all different combinations of colors.

That you can select from, and to define further categories of color schemes.
Custom Color Schemes

You go into the environment tab in front of here, you can create a call custom, color scheme.

So this is actually quite helpful, especially when it comes to custom projects to be able to create a color scheme that is, for that customer and apply it to multiple swarms or to have it sort of across across different steps And so as

I just built this one. If I go in and change this scheme, I will now see this new one I created called Asd, which is that color scheme in the environment.

Tab and yeah, so that's how we set the colors. So i'm gonna change it to by hex values and column because we have it defined in this color column.

So by selecting color. It is now referencing that's cell in the data sets which is the hex of desktop value for color.

So now we have it hardcoded in for the counts. Now, one thing you'll notice in the other one is that there was actually a number on top.

Now we don't have the ability to Add in a label that counts it for you automatically.

We do have the ability to add in labels. which allow you to add more entities here.

But yeah, for this case we won't be able to put the total count on top. In a future lesson we might be able to go through instance where we show you how you could do that, where you add in aggregation, and actually show that counts as part of a hierarchy.
Adding text to a label

But for now what the easiest thing to do is to just add text to label it itself.

And so 5 across a 5, 1015 so 19 interruptions for Biden.

I'm just gonna type 19, and actually start to place this in the location, and you'll notice that these little arrows come up whenever you have an object selected.

And this allows you to very easily move the object in the space. See one thing I would very much encourage is anytime.

You move something there's often the temptation to think it's in the right spot. so like this where it looks like it's in the right spot when I turn to the side.

I see that it's actually a little off so here's a better example where it looks like it's right. But then, when you actually move it's not and so rotating around the scene by clicking and dragging it's really a good way to make sure you're in the right spot i'm gonna change the size of this from 5
Distribution of Dots

to 3 to match this a little more clearly i'm gonna leave Trump blank, for now, just to sort of skip through to move on, and the next step was to take this distribution of dots, which is Michael i'm sorry to interrupt But before you get off the issue

with the total as a label. Could you define a second sheet in the Google spreadsheet as a second data source and put subtotals or other data related to the first set of data?

But sort of a different table and access the 2 different data sources. In this same construction environment. So you can create a second Google Sh: We should freeze this.

The correct way. in the process, creating a new sheets here and putting whatever information you have, it will be treated as a separate data set that is not connected to the right.

It won't be connected to this but you can import as many data sets as you like, and it's essentially what you're doing is creating another swarm here.

I have another swarm, which is another collection of dots that is tied through a data set. So there's a one to one relationship between the data set and a swarm.

But you can have as many swarms as you like So you can have other data sets that are referenced to to other sheets that you'd select from to pull in now.

Yeah, So does that answer your I think that answers your question directly? Yes, that's great, thank you yep sure and then the other way to answer this.

Is that that within this sheet itself? there are things we could do to actually create some aggregations.

So here what we see is the total time sum increasing over time here.

But what we would really like to do is actually it's just aggregating just minute column over time.

And so that is something we could actually do by aggregating, and we could probably aggregate, based on who.

And so with this aggregation where I created a staff shot and we'll cover this in more detail, because I don't really want to dive in too deep here.

But this is where we would essentially add up the minutes, so we will aggregate. So we will sum up the total number of minutes for each candidates.

So we have 701 min here for Biden, and 2,116 for Donald Trump.

And you can also see the total count. So this is how we got to the the counts.

I could actually take this dummy variable and make this the the count. So now we have the counts of the number of interruptions and the total number of minutes, and this was created without doing You're touching anything else, but rather is creating a snapshot of the data, and we'll

go through the snapshots at a future date. But essentially this second swarm could be that same data set.

But it's Now, as snapshots so we're referencing the snapshot data as opposed to the the raw data.

And so from this we can start to do yeah, well do more things to to show that information.

This for now. But that's what we yes, easy question.

Because, yeah, is it? Is there any way to how to save stuff? Because it just killed my my my progress so for future, and yes, so by defaults.
Settings

It. Auto saves, I think, every 30 s. And that is set within settings. Within settings there is auto safe checkbox, which is by default checked.

You can uncheck that if you don't want to use that. And then just control S, or going in to click, save will suffice.

There are. there is version control now. which allows you to go through different versions similar to like Google sheets where you can.

Reference previous steps to go back to and to restore from And so there are a lot more options there. and one thing I would very much encourage is that if you have a flow you're working on You get to a step where you want to do something more experimental, or you know

go off in a new way. that you're not sure about one thing you do is the save, as Button will save a new version of this, that you can save a new file type. name.

And so sometimes you you can do that, but sort of up to you in terms of how people want to create versions.

With version control or new flows entirely. but you save that flow name here.

Say interruptions. so of course alright, so moving forward here.
Scatterplot

What we'll do next is actually take this categorized column, and start to lay it out along a scatter plot.

So on the X-axis what we're going to do is put the different times. So I believe it's for some end time simply if we put start time on the width axis what we'll start to see.

Here is the distribution of when these interruptions occurred. And actually, instead of that, maybe I can do just minutes.

Yeah. So minute is when these occurred, and so

So each dot here is is when it happened along the the event itself.

I'm gonna hide this 19 I can click on it and click on this i icon to hide it. The other thing I can do is click the i icon here to show or hide visibility or double click on it

for the on the object timeline to to hide it. So many options to to hide it. on the swarm itself.

The one thing to to add in is who so now. we see biden on one side and trump on the other, and I'll go ahead and make this just a little more narrow.

Sorry not that one but the depth axis i'll make a point. 2 meters, and this is all in meters so it's one meter wide by point, 2 meters in depth.

So now we have this labels so we can see when these interruptions occurred, and let me go ahead and add in another step where we're adding in that additional dimension. And I think this is actually one of the core sort

of design principles that we see often used is to build things that incrementally add in dimensions that's here on this height axis.

I want to put in the total amount of oops, not minutes.

Total time that was spent interrupting in this case it's in seconds.

I'm gonna make this go a little higher so it's going from 0 to 100.

And what you'll notice is these dots are raised up But what we want is actually a line to connect them since we're basically using this as more of a a bar graph.
Connections

In some sense where we are raising each one, and so to add, in that bar elements we create something called connections.

And so in this instance, I want to connect the dot back down to the axis.

So I click on connect dots to access or map, you know.

Notice these other options, which we'll get to as Well, in row order. That's exactly what you imagine in the exact order that the dots show up.

It will connect the dots. so here. You're noticing how it connects between Biden and Trump back and forth, because it doesn't know what order to go in.

Or sorry it it just goes in the order that it's showing up. The other is when the column values match so it in this case I could. If this were more of a bar graph or more of a line graph, I can select 2 as the thing to match.

And so now we see this line chart over time which is also sort of not accurate of what we're trying to show here, but just gives you a sense for what is happening there by row number and column is a little more

detailed, and has more to do with connecting based on a identifier in a column.

Little more specific use case and same with Id and column, which is for edge connections.

But 2 axes or map is the main one we're gonna use here, and is used quite often you'll notice that it's dropping along the height axis.

And that you can. You do have other options here. You can do the inverted where it's going from the top, the bottom as opposed to the bottom axis.

You can also drop along the different dimensions here for width or depth. So if you like, you can actually create a 3 dimensional view, just with these lines.

In a scatter plot, but we're gonna leave these as more of this bar view for now we're gonna make them just a little thicker, maybe, as 9 in terms of thickness

And Yeah. So now we see these bars. So now we can see the total duration.
Set Camera

In each of those interruptions. one other thing i'll do. Here is set camera, which it allows you to set the camera position for each step.

So each step has a camera position series of object definitions and you're basically moving between these steps and that on each of these moves the camera is moving, and there's a certain animation duration.

Now that animation, duration between is actually defined within step. Details. So this contains all of the different steps and the amount of time between steps, as well as some other attributes.

Here, such as actions, which allows you to do some more. More on a per step basis. So just to cap this off as sort of a final step.

Let's actually add these together and show them as a stacked bar chart. And so for this what i'll do is create a new step.

And now, instead of on the with access being minutes

I just want the total time, not total time. Michael can you move here. Some move your video over just a little bit like So this is total time, sum which, if I put the with access back on what you'll see is

basically it's the running some overtime of the amount of interruption. And this was calculated in the document itself. so that we could show it. But in that snapshot that we created.

That's essentially what we were doing is is creating a some aggregate view as well.

And so what this will look like if I collapse. This axis is, it should look like just a a single bar.

And this is the total amount of time that was spent between the 2. So we've now sort of covered sort of all the span of what was in the original documents.

There's obviously a lot of formatting here, that has also been added in terms of labels.

Legends, and and some other things there which we will get into as we get more into formatting and and delivery of contents.

But just in terms of understanding the content here. hopefully, this helps. You understand this idea of steps you're building steps to build a presentation?

And that within each step you're defining the characteristics that relate back to the the data set itself.
Duplicating a Swarm

And just for fun here i'm gonna do one last thing, which is i'm gonna go back to to this step in particular.

And i'm going to duplicate this swarm. so duplicating this swarm will create another swarm.

That's the exact same characteristics, but just because we brought it up earlier. I think I want to do point per value. So now each dot is not a row, but instead of value, that's going to be based on the total time. is actually the the what we want to to look at.
Additional Dimensions

So each I guess each second. Now is it's gonna be a value. Maybe there's a few too many, that will show up but what this should look like is let me go ahead and turn off height axis, and it should look the same, and the one thing i'll do instead here is in additional

dimensions i'm going to add in what are called columns. We're actually in that column I do stacks And so this is just stacking the dots on top of one another.

And so the reason I show this right next to this one maybe is that these basically are showing the same thing just 2 different ways.

And you'll notice that that. sort of throughout. the flow editor is that there is always multiple ways to to do things, and each has its pros and cons So Michael may maybe make the dots a little bit bigger

or getting a little closer. So you can really see that one is a lot, a dot with a line, and the other is a bunch of dots. Yeah, Can you see the difference there? And so, So yeah, this is basically the same thing.

One is point per row. It was a connection, and then this is point for value with the dot stacking, and both are equivalents the one nice thing about this these stacks is that you can do more combinations

just by changing, you know, something like the depth axis. So if I remove who now what will happen is actually the blue and the red will stack on top of each other when they're on the same time, they're not at the same time, because they couldn't interrupt each other exactly moments.

So that doesn't quite work there but anyways just shows you how many different options are available.

And that's even within each of these steps we'll define other characteristics.
Defining Interactions

Such as interactions. And this is used way more in in objects to to bring in more interactions, especially for live meetings, where you're actually selecting the columns of what you'd like to show up when you click on

it dots looks like something might have happened here. with the flow itself, which will will figure out.

But this is essentially this interaction capability. Just one question on that. you. you introduced a a new swarm in order to put reduce the second second visualization.

Would it not have been possible to do that with the same data? And just reproduce the the minute access and do it in a different format like like make a whole new chart like, you know, with the same data set and reproduce a different setting of the of the visualization i'm not sure i'm

cool following. But let me try to repeat back as it I think, what Why did we end up setting up a A.

Why did we need a new swarm to create this? The second visualization, instead of just making a new visualization, got it?

Those properties got it so so the maybe the if I define it this way.

So a flow is a series of steps so in this case there's 5 steps, 1, 2, 3 4 5, and in each step we can have as many swarms or collection of dots as we like in this case We have 2

swarms, and the reason we did 2 swarms is that each swarm definition can only be point per row or point per value.

You can't switch it between steps it's sort of a characteristic of the swarm itself.

So that's part of its and the other aspects here.

Sorry. let's look is that's sorry i'll sort of lost my tree at that.

But yeah, that basically each swarm is actually referencing the same data set. So there's only one data set still and we can do check that by clicking on the hamburger and clicking on data source. And we'll notice there's just one data source here and that one data source is feeding multiple

swarms, so that we could have many swarms in the same in the same scene or same. Step. that references so So hopefully that answers to your question in terms of structure.

So I think, think of swarm as like a chart. I guess in some sense each swarm is its own chart, with all the connections and labels attached to it.

And that each step can have as many swarms as you like I I'd like to add something to that Michael go back to the swarm view. So one of the things in order to build a system like this is this concept of

perspectives, and we hide the perspectives they're automatically generated in simple mode. But in advance mode there's these perspectives and you'll see that each time he changes a step it will swim, which to a different perspective right now it's on perspective, for and etc.

So everything. but from that perspective area downward is affected by the perspective.

It means that if they can be changed per step, and the things above it which are

The like. a connection is the same when you define a connection it's the same across all of the steps.

It's not affected by perspectives. the point perot is the same across, and actually the source.

And snapshot. You have to apply that to a swarm, and you can't change that per step.

So does that make a little bit more clear? that there I know it can be a little complicated? I've got this swarm and there's got certain attributes on the swarm, and then i've got a bunch of other attributes on the perspective within the swarm and multiple perspectives.

We try to hide that complexity but if you at least understand that That's what's going on underneath the covers.

Then you'll be able to figure out what to change how to change what aspects of the swarmware. Yeah, I I started to get my header on it especially since it's all operating on the same data set.

You really just you're you're offering a different this each a different instance of sharding. if it you know of the it's it makes sense of it.

Yeah, so great. So yeah. So as homework for for everyone, I would encourage everyone to try to find data that like this, if you like, you can just use this one in that sample media folder, you know one.

That is actually not too far off from this is actually one that we built for

My, but my toddler's first 7 weeks of life, and showing the the frequency of of all of the diaper changes basically of of her life at least for 7 days.

And so this is in many ways a very similar structure that is used where this is frequency.

How often did they occur the duration of each of these, and then stacking them on top of one another to show the total

And then actually in this one, because it was time based to be able to show the day of the week when these occurred, and that that simple data set, you know, reached so many.

So this idea of building an incremental set where you're adding these dimensions is actually quite powerful.

So it encourage you to Yeah. Find your own data in this realm, and we are happy to help you find it or use this.

But this way you all get practice. with building steps in animating between those steps with a fairly simple slow type.

So Bill Jason, Alexa, anything you guys would like to add before we open it up and close it down.
No limits to steps

Yeah, I I I think you probably already said it, Michael. But I just like to rearrange that there's no limit within each step or each scene.

If you will. So the number of swarms, number of text, object, number of images, number of maps, all these you can have unlimited numbers within a particular scene.

You know you you reach practical limits. eventually but it's not a theoretical limit, and there it's been a long time since I've built the flow where

I I don't have many of these objects on at least one of the steps for several of the steps of the flow.

Yeah, and you know, I think in many ways what we're start with is is something simple.

But, you know, just to to quickly show here over my shoulder. This was it's a live flow which can send you the link to but it's a national cancer institute's projects, and that file here on the bottom is actually a 8 GB image of cell data and

all of this is interactive it's multi-user And you know this was a huge undertaking which will, we're happy to go through more with people to show all sort of the capabilities.

And care, and and what you can do here. but I think it's cool to see how one system can be used for this really intensive analysis and and exploratory use case in addition to what we just built which is a

very directed story. You know that we built in a few minutes here that you can send and present to someone.

And what we are hopeful with this group is that we sort of see a span of people. Those that are interested in building out some larger engagement type.

Things, but that these types of more directed visualizations, especially in more of this branding sales and marketing use case that we're have friends that are interested in that we can line you up to help deliver on these more directed

flows and start to make money doing so so we're excited to to keep building it out with you and

And yeah, so any other questions before we close things off for today.

Hopefully, this was interesting to you, and we look forward to the next sessions. Here. we'll kind of cover the same thing tomorrow. so don't need to come tomorrow for people here today.

But next week we'll be new through I have a request.

So we're actually putting a new template user interface onto the front end of this.

We've found that building up these flows from primitives is very powerful, but it also is a fairly different difficult first time user experience.

Early user experience. And so if anyone would like to spend an hour or more with me to help us review the designs on that, and look at some of the first prototypes as they come off the off the assembly

line. i'd really appreciate some little bit of user testing from anybody. If they have a little bit of time that they'd like to work with me on my email is Oh, thanks, Mickey.

My email is Jason at Flow Gl. So, in addition to that, you can contact me about anything in everything that you would like to discuss, I highly encourage everyone to pester Jason as much as possible.

He is the key to getting your request into the editor. So or us just let us know. But no, in all seriousness, I think the getting you guys actually involved in templates might be something we we do very shortly here. because, as we just start to define more of these templates they can

be both simple, but also quite complex. to allow people to build off tokens. One thing we imagine is that people might be able to build templates for organization, since that is something that they could sell with color.

Schemes and and other things like that So anyways this was less than one. So hopefully, not too scary and approachable.

We'll send an email summary as well as we record this session. so we'll we'll upload it so you can have something to reference.

But would really encourage you to dig in dive in or here we have discord, You email. We respond to pretty much everything besides smoke signals so that's about it.

I just wanted to say every one off. One thing also. this is a large product product product it's a great product.

It's got a lot of moving parts and there's no such thing as a silly question. So if, as you get into this you find you know there's a way of doing this.

It's just not obvious to me. please send us send me send us an email. I spend all day, every day working with users so I I don't mind getting I don't mind getting emails on whatever the topic is.

So we'll we'll afford to hear from you and help me out as quickly as we can

All right. Very good. Alright, I think that's it and Sorry I saw one question here, Jimmy, did you get your stuff off right out.

Looks like, Okay. Very good. Alright: Well, thank you. .

Thanks, everybody. Thanks. everybody. see you guys next week and don't be strangers.

Working with Maps - Certified Flow Designer Training 2

Intro

How feel free to share your screen. So Oh, and sorry i'm gonna start recording fits Alright great! i'll go ahead and take it away i'll just share my desktop.

I guess. you guys can see this. Yes, alright.

So you guys can see. Well, okay, so So you you just see some random dots on here right right now.

Green some purple you probably don't see their little dots there that that's So this is basically I I got this data from our cool learning management system seesaw and basically I I

grabbed a month worth of data at the beginning of school last semester. Not this year.

This year things got really weird and like. Last week we had like 2 day one. The first day was online learning, and then Tuesday, Wednesday we were you know, on campus everyone.

And then Thursday student was sent home because there's some covid cases with we did online and Friday.

Everyone, even including teachers, can't tumble school because the road was blocked anyway. So it's crazy, and but things were Oh, somewhat normal. you know as normalized can go in January.

So I did this whole January from January, the third of January, the 20 eighth and a month of worth of data.

So these dots are represent you know items that people posted on onto the system as purple, and then commons are green.

So as you can see on the on the corner here. it's so there's about 6,000 commons on January the 20 sixth, and then there are some little dots here as likes you know if you post something even like

it. and there's really tiny ones that you know parents That's visit, you know 900. Some of those this you know doesn't really make much you can't make sense out of this right you just want to run them

but was the power of flow. we can see that, you know. I I categorize them into. You know the the different items.

So items, commons, likes, and parent visits, and the dots. The size of dots actually represents the number. So basically, at the beginning, you know, maybe January third, when it first started out, there were only 90 items posted to that day.

But when you get to towards the end, like January 20 eighth, there were like 5,000 items.

Posted so same same thing over here in terms of common as I can see, the the parent visits and likes are some was steady.

I would say, you know, throughout the time, so at the beginning they're probably about 200, and then at the end it gets to 900.

Okay, So it's it's more you know later on but So if we break this down again. what I what I did was you know, instead of having so many dots, each time representing a a post or a like I just categorized them into just how about you know for

each day. I only have one dot, and representing that all 5,000 total, 252 commons on January fifteenth.

This is one dot. So basically I would have in total about a 120 less than 100, and 20 because it's like not entire month.

It's January third or january 20 eighth, so about 25 dots per item. There are 4 different items, so there are about a 100 dots here.

Representing different items and So if we now look at this this is cleaner

And so basically in the beginning, so each role is 7 days of the week. So 1, 2, 3, about 3 weeks and 5 days are what you know.

This data is showing. So on the first first day of the first week, January third, we had 90 items, and then on the second week, I think, is the boat that the best.

And so, starting out Monday, we have 500 Tuesday of 1,500. Thursday. Wednesday is 2,600 and Thursday, you know.

So on so far, so it's it's growing and then you know, and it gets pretty steady once the school gets rolling.

You know the the everyday. it's about to 6,000 items posted but in terms of parent visit, I think, is that is about a 1,000. Once parents started engaging it's about the same every day.

It's about this many yeah lastly you know since this is a timeline.

I did basically a scatter plot of you know So showing that you can see the the growth trend.

Basically the the the first week was pretty quiet, and then starting the second week on January the tenth, Monday, January tenth, at things starting to go crazy and going up.

And and then it gets to a bit of a plateau in terms of the school getting into a groove into a flow, and and things are are steady. So that's the different ways to visualize this simple data.

Set first. I gotta say Your Chinese parents are the envy of the world to have that many visits coming to your school.

That's a stopping and amazing and wonderful thanks that was a great flow.

And I love, specifically the last 2 steps where you go. From this time series data where you're actually using each road to represent a week.

And you can sort of visitably see the l or the size of the dots change. Then you're basically doing the same thing.

But instead of using the size of the doctor using the actual offset, or the Y offset, or the the height components as the dimension, and I think being able to show one value in multiple ways like this

really builds a strong mental model. So I love the transition and sort of these experiments in how you're representing to your point like a pretty simple data set.

But seeing it through different lenses, I think, Yeah, as a lot of value, What is that? Definitely some ideas I have as well. But yeah, other comments or or thoughts on this and anyone else that would like to.

Take a minute. 2% You can probably do maybe one more different multiple variations on one data set to get out looking at it from different angles.

It's really neat good work, Thanks a point I Agree? It really brings the mental model to life.

Okay, okay. Anyone else that would like to present or share a bit of any number they did

Alright final call 3, 2, one feel free to go ahead. I can throw on something. Let me see.

Okay, So it's based on noah storm tracking data.

Oh, perfect. They maintain for a global all the storms that that they follow over the and it goes back to 18 something.

So I took out of that. I extracted everything that reached the Category 5 and was in the North Atlantic, and you end up with about just under 40 storms.

Total and they have data. So they have the they have readings every 3 h, and they can show you.

Then, basically, you know, when the form the storm was first observed, till when it was last observed, and this is based on the size of these dots in the random chart is based on the duration of the storm.

So you can see. Allen was quite a short storm In answer was a long growing on that side.

But then you can also look at how many hours it actually spent at Category 5 rating. and then the picture looks slightly different, and you can see Irma was perhaps the longest of the category.

5 duration storms, whereas you can find again some of the other ones may have just reached that as a blip and gone out back into category.

3 2 one. it goes negative categories and it's actually quite a good data set, and there's a lot more.

I could have done with it. And I have a couple from bold attempts at making more content, and I I would like to keep working on it as things go.

It even has some mapping data, because I think there's coordinates. You can follow where these things were over. time so i'm interested in today's presentation.

Also thank you guys that's a really powerful data set in you know, just off the the bat.

One of the first things you strike me is these kind of charts where it's a *d scatter plot which looks great when you're in headset, but at least on flat screen to see the

dimensionality. One thing we sometimes do is just have one line that connects down to the grid on the base, or even to the size that helps.

You sort of see the distance. we found that that's quite helpful to to see that position to give it make a little more concrete.

But yeah, it's a really powerful data set and we can definitely keep iterating more on it.

But thanks for sharing, and I know I think we got cut off last time, yesterday, when you were trying to present this. And so we were all like left in suspense. and Then I think you had some connections. This is so i'm so glad you were able to come up today here today.

Yeah.

Yeah, a a super neat data set and gee if There's information in there.

It could be tied into maps. That would really be neat, agreed Alright.

Cool. So just organization i'm gonna show just a few part of the possible maps here.

And i'm gonna share it sort of just over my shoulder here to to start and sorry 1 s

I would say, keep going back. Okay, that's fine alright i'm gonna take a very screen control here. and i'll share it this way.
Highlighting Flows with Maps

So. just a few flows to to highlight in terms of sort of are the possible. And one thing I try to highlight is that with maps because we have this third dimension more typically when you look at a map, and things see things plotted, you'll see things like this where it's a circle or a

dot indicating the the spread of something or where something's happening. but that with this their dimension, if we look at that third dimension as time that we can actually use that time dimension, to show how something changes over time so now it's not only

tied to a specific location on the map. but that the distance away is related to the time it happened, and so you can start to create these visualizations.
Covid-19 Cases on a Per Capita Basis with Maps

We internally call this the actually we have a different one where it's more vertical. But it looks like a rain cloud basically, over the United States.

And it is in this case everywhere where they're on a per capita basis.

There was an outbreak of Covid, and hiding any dot where it was less than a severe threshold.

And so you can really see how an aggregate in the winter of 2,021, we see this large spike, but that then also, geospatially, you can start to see more.

And so I point to this nice like a, you know, the revolutionary. But I think that's, it points towards what is possible in the platform where you utilize this third dimension, and then not to go into too much more detail.

But just a few visualizations that also utilize maps, but in sort of nontraditional ways is a hierarchy view.
Parents in the Labour Force Map

So here in this case it's the total number of children under 6 years old is the height axis and actually gonna take it back a step.

And We'll just have it show just this one so here. You can see the total for the overall united, States. and then you can also see each specific region, and then each region break down to the State, and then each State goes down to the county. and so it's 4 level of data and it's

built as sort of this, like tent whole hierarchy. And so this is another visualization that utilizes that third dimension in sort of a powerful way that can be extrapolated out to lots of different types of maps or other types of aggregations of information and then
Movement of humans from/to California

just the last one to quickly show is this was one where we're showing the movements of people in this case the movement of people from California or anyone that moved out of the State of California.

And where did they end up? And so the color of, or is, or the color that they are showing is where they are coming from.

And then these are the dots of where they are going to. And so the idea of showing the flow of people or the flow of something supplies other things related to maps, I think, is another sort of intuitive powerful component.

You'll notice that the the dots will stack inside of each county. That's they're being put back into anyways I don't wanna i'm not gonna go into building those in this session, but I just wanted to sort of put something out there to say there's more that

you can do this, not just putting a dot automatically, but you can show both animation. You can use the height access, you can start to do things that leverage sort of the third dimension in a more powerful way, and then similar to even the example that how showed and and Jimmy the idea of taking a dot and moving it

through multiple steps, and that each step allows you to understand it a little bit deeper. Different perspective, I think, is all part of that storytelling process.

So that is it for me. I will be on and if you have any access issues or other things do text me or or put into the chat. I can go to a breakout room, etc. with you and otherwise

i'm gonna pass it over to you Bill take us through the the meet of today. And before that any questions or or other commentary
Fundamentals of Maps

Okay, what we're gonna do today is take you through what I call the fundamentals of maps. I I teach a lot of courses here and maps is we always include a significant portion of of a session on maps

because maps are ubiquitous and and flows that are that are developed. I would say out of every 10 or 20 flows that we get involved with developing or whatever or we see being developed.

Our customers probably good 75% of those have at least one map on them. So it's a very common use case and flow is very good at at visualizations by using maps.

So I just clicked, clicked the the create new flow button. So what I've got here is what you get when you create a new flow.

I'm i'm on I want to define what's going to go on with swarm one on step one.
Adding a Map to a Step

And what i'm gonna do here, is i'm gonna put a map on this step straight away.

So to do that i'm clicking the plus map icon here and then Slow is asking me.

Okay. told me you're going to do a map what kind of map? Are you gonna do? We have about 12 or 14 standard maps?

We have maps of Europe and Europe, including Russia and the Uk and France and India.

We did a big project for the un, having to do with Bangladesh. So we have a couple of bangladesh maps in here, too, for purposes of today.

I'm going to use the world map and I can there are several different ways. We can express a world map here's an equal rectangular view.

I'm not gonna do that one though i'm just gonna take the spherical representation of the world in in this session.

We also have the capability, where, if none of our standard maps sold the bill for you.
Uploading your own map

It's quite easy actually to upload your own maps All you need to do is find a suitable file that has app information in it.

Create a top of Json file and then upload that. and then you can have a custom map that behaves just like any other map in the system, and we have about a 5 but page easy reading kind of document on our help center that
Help Center: Maps

takes you through exactly how to do that. So if you if you go into our help center and just put maps in the search bar, you'll probably get about 20 or 25 pointers to different things.

Some of them are videos, Some of them are short articles and there are a couple kind of user guides like the one for doing your own custom map.

Okay, so i've got involved by the way as i'm going through this. Interrupt me at any point So okay i've got this map of the world.
Putting Data on the Map

What am I gonna do with it? Well, i'm gonna put some data on it? So what i'm gonna do here is i'm gonna define what i'm going to be using for my swarm of data.

Now, luckily, in our library we have a a data set that is comprised of information about the 10,000 largest cities in the world.

So I'm gonna select that. So this is going to be my data set.

Okay, and just like we've seen before when this when this form of data is brought into flow, put into a random chart of dimensions, one meter by one meter by one meter, and by the way, the the world here it

has a diameter of one meter So you can see that these these dots kind of crisply in case the map of the world.

Okay, So what's the next thing i'm gonna do for this? Well, what I wanna do is I wanna put these dots onto this map.

So it turns out we have a. We have a couple types of charts that have to do with mats.
Mapping by Coordinates

One is Matt from coordinates and this means a in my data set. I've got latitude. Learn to 2 coordinates that are going to place these data records onto the map.
Mapping to Regions

We have another one that's map to regions which means i've got a country name or whatever that can place information onto the map.

So this particular data set i'll show i'll show it to you here, right here. This particular data set. First of all it's got 10,000 records and the records that consist of city Actually, we got a couple of representations of city.

We got latitude and longitude so we can place it onto the map. We got the country we got population, we got continent and a few other fields.

So pretty simple data set, you know, maybe 10 columns by 10,000 a rows in this data set.

So I do have my latitude and longitude in in this data set. So i'm going to say map from coordinates so Flow is going to ask me.

Okay, which map? Well, i've only got one so a very big map one number one. The latitude column Row makes an educational guess as to which columns in the data set could contain latitude information, and it turns out that the column called latitude does contain it.

Similarly for longitude, it's a longitude column that contains that. So immediately when I click on this instantly. These 10,000 dots are now put onto the surface of the earth.

Each one of these dots, by the way, is a size. 5 5 is an arbitrary size it's kind of a smallish size dot.
Increasing the size of dots

If I wanted to increase the size of these dots, I can increase them to whatever I want. But right now i'm gonna leave them at 5 Okay, Okay, so let me put some interactions onto these dots.

I really recommend that this is done very early in the game so what i'm gonna do.

I'm just gonna put some query ability into these dots so I can see what is what's behind these these particular dots.

So to do this i'm gonna say on select pop up i'm gonna create an overlay popup, which means the popup is gonna appear here in the upper left hand part of my screen, and the comp when I say select

columns. These are all those columns I showed you in the Csv file. So on the pop up i'm gonna put the city the country.

I'll put the population out of the continent keep it kind of simple, and to make it easy to read so to understand which information is which in the pop up i'm going to put a little label within the pop up city country

i'm gonna abbreviate population just pop and continent. I guess i'll spill that one out Okay, so you're gonna go on the upper left.

Okay, when this dialogue here there's a lot of additional formatting and precision setting that we can do on this one here, since some of these numbers popular can be like 37 million people you know

that's 8 digits. Let me let me constrain it So I'm gonna be rounding the display to the nearest 1,000. just gonna make it the the information a little bit more instantly.

Readable by express the population and thousands rather than units so i'm gonna click. Okay, here, i'm just gonna click on some dot here so random dot.

This is Yan Yang China. 61,000 people and That's continent is Asia. So this is how the pop-ups are gonna work So i'll be able to query what's behind any one of these dots.

Okay, i've got clickability query ability on here. Now, Now, what I wanna do is I want to generate some separation of these dots from the service of the earth in a way where the largest cities are the furthest reaching out into space
Additional Dimensions

from the surface of the earth. so i'm pretty well trained in flow. So I know what I need what I need to do here is I need to click on additional dimensions to get this kind of functionality, and i'm looking for a height offset.

I'm gonna say height offset and I want the height offset to be a function of a column of population.

Good, so I don't know if you can see it very well; but some of these dots are starting to get some separation off the surface of the earth right now now from my taste, and this in this presentation I want the

separation to be more than what you're seeing here so instead of a maximum offset of point one meters.

I'm gonna change that to point 5 meters okay, So now you can see some of these cities are getting some pretty good separation away from the earth.

Slow, also provides me of some high level information. here. The smallest city in my population of 10,000 cities is 40,000 people.

The largest is 37, 9, 7, 7 0 0. 0. So 30, almost 38 million people is the largest city in this particular data set.

So let's see maybe this one i'm gonna make a guess I haven't spun the world all the way around. But i'm making I guess that this is my largest one right here.

It's way out in space here. Okay, tokyo Japan This is the one that's almost 38 million people in the metro area in in this particular data.

Set, and it's in asia Okay, so i've got This done, this is better than where I was before. but it's still not very good, and that I can't really tell where these dots are on the map So once again

being reasonably welcome trained Well, trained in flow i'm gonna say, Hey, new connections at this is the way I connect dots either to each other or to surfaces of maps. or other structures. so i'm gonna say I

want to connect, connect the dots to an access or a map. Okay, and since I only have one map the club knew exactly what to do. So now, what we've got here is we got each one of these dots is nicely connected to the map took about 3 clicks to do.

That. And now, if I query on this dot again, this is my Tokyo Japan. I take a look at the map here, sure enough. that is Tokyo.

This is put in the right spot on the map, let's just take a look at another really large city here, and see which one it is

Okay, So this is Jakarta Indonesia, 34, and a half 1 million people in the Metro area.

Okay, So all this seems to be working. So now for I guess, for for reasons of presentation.

I wanna I wanna make the largest cities, have larger dots, so I want the dots to be proportional to the population of the cities.

In my data set. Okay, now, notice down here in this object's timeline. I've got my discolored cell here is connections I'm. looking at the definition of connections.

One. That's the last thing I did over here on the right hand side of the of the page. So over the screen. So what I need to do here is I need to click on the accompanying swarm of that, because I know that dot size is a swarm attribute.
Dot Sizes

So i've i've refocused on my swarm. So now I've got my definition of swarm over here and on the options I have for dot sizes.

Well, I can use the fixed dot size as 5 which i'm doing right now. I can scale the values according to some column. or I could even set the dot size directly from the Csv.

File the particular one I'm going to use here is I'm going to scale the values according to column population. Okay?

Oh, so I do that. And now, instantly my dot size is our proportion of the population of the cities took about 4 clicks to do that.

So and now i've got the larger dots here a little bit easier to click on. So here's my tokyo again okay in addition to that size a very common use case is to make dot color and attribute of these maps.
Colors on a Map

So i'm gonna do to keep things simple here on this particular map. When I look at my colors, options here, I can set a gradient scale.

I could use this color scheme if I wanted to. I could even put the hex values of the color in a column in the data set.

What i'm gonna do here in this example, i'm gonna use a gradient scale once again i'm gonna colorize by population.

So you know about 3 or 4 clicks there and i've got I've got my dots colored according to population.

So Tokyo is a very different color than these. All these other small cities along the surface of the map flow by default makes the low end of the scale correspond to a neon green Our standard neon green dot and it makes the

upper end of the scale correspond to purple so I'm. Not exactly sure why that was the default but it's it's flexible.

I can set this. So instead of having my largest dots being purple, I'm gonna make these dots the brightest red I can find in my color.

Palette. So I did that just by clicking on this, and then using using my mouse to click out of very, or to find a very red color.

So here's Tokyo It is pure pure red Jakarta is not quite as pure red, but close and then here's another large city.

Here. let's see which one it is this is deli 29 million.

So i'm showing you to lose a little bit of the red and I've got this is an orange tinge dot. So you know what i'm saying here, is a regular progression from green to red.

There's nothing sacred about always using our neon green Dot. So a lot of times I I like to use kind of an aqua colored dot, so I just chose aqua here instead of green.

And now i've got this this this representation so going from Aqua to red instead of neon green to purple.

I have gotten a little bit more definition of differences in colors for these dots. So. In any case, you know, all these, all these dots are a particular color as established on this.

Using this gradient scale, so that's all i'm gonna do for the cities part of this map.

But another important aspect of maps is to use what we call core plus i'm not sure if you know the name the meaning of that word.
Choroplath

I did not know before I started at flow. but a choroplath is a capability for colorizing regions on the map, such as countries and this particular map, according to some metric that's in your in the

Csv file that corresponds to countries So what I'm gonna do here is i'm gonna click on map. I know that core plotting is a map attribute So I'm clicking on that, and i'm coming down here, and I know for to establish a choreograph i'm gonna have to define a source data

file. So i'm gonna come over here i'm gonna click this hamburger icon. i'm gonna come into data sources.

And you see here, i've got my 10,000 cities data set. that's the only data set I put into this flow.

So far i'm gonna create a new data set here that's gonna have country information, including country population.

So I can colorize the countries according to the population of the countries. Okay, So i've created my due data. set here. now flow is asking you to go out and find it.

So i'm coming out here i'm gonna choose the file on my hard drive. Okay, let me just type in. I I know the folder that this is in

Okay, and I know the folk, this particular file that I have has the word country in it.

So okay, So here, Okay, here it is right here, country world population, one. This is the data set that I knew of on my art drive that contains the information I want to use to drive the colors of the countries in this map.

So I click on it I hope in it it's being read in the flow. It's got 237 rows one for each country of the world, and the data set consists of couple different spellings for a country value.

This is the value of the population it's also got a ranking I ranked in this data set. I have all the countries of the world ranked in there.

According to their population. So China is the most populous country. I also have a in a column of convenience which is called Population and Melans.

It's just this it's just this this number here divided by a 1 million.

So population millions. And I think that is, yeah, yeah, I have a few other.

I have a few other fields in here Oh, you know what i'm mention this one here right now, cause we're gonna we're gonna use it a little bit later, a little bit later.

I'm going to i'm gonna generate a colorization of world countries, according.

So I put the the 10 largest countries i'm gonna make them red. I'm gonna make the next 10 rang and the next 20 I think are gonna be blue or something.

So you know what i'm doing here is i'm just setting this up. So i'm gonna be able to conveniently coverage. countries in groups and blocks of size rather than uniform, rather than doing a gradient from the smallest to the largest, and i'll show you why

that's going to be the case. in a couple of seconds So that's my data set.

Okay, So i'm coming back here i'm gonna click on the map again. Here get focused back on defining the core path Now I know what my data set is.

It's gonna drive the core left and its country world population one Csv. Good. Now, when you have a map, then there are regions of the map that that indicate boundaries in this case of countries.

So the region column that I have that matches with what's in internal to this map is the country name i'm gonna say the value here and i'm gonna be using the population in millions column and

I'm gonna range the color from yellow which represents 1 million to bright red, deep red, which represents 1 3, 9, 8 million.

So this is 1 point: 3 billion people. Okay, Now it turns out the facts of life in the world.

These days are China and India are by far the 2 largest countries in the world.

So basically, they grab all the red. Okay, since this is a linear gradient from one to the the size of China.

You know India and China are the only 2 countries here that really turn out to look red, using our default gradient here for Carlos.

If I look at the United States, which is the third largest country in the world, I do see it's a it's a deeper color than a lot of the other countries, it's kind of an orangeish color and

brazil's another large country, so you know these countries are arranging from yellow to red.

But the way the data lines up in the world is only really 2 countries that turn out to be read.

So in any case, i've got all this into my choreograph now

And perhaps this would be suitable for what i'm i'm using it for so it'd be like 7 or 8 clicks to do that.

Okay, i'm not satisfied with this though because i'd like to have a larger number of countries have a rich color just for my presentation purposes.

Whatever those are. So, instead of scaling the choroplith from one to 1, 3, 9, 8, and going from yellow to red on that scale, how about?
Scaling by population

If, instead of using the column a column of population and millions, I use this populations.

Section column that I showed you earlier so in this particular using this particular column.

I'm. only ranging from a value of one to a value of 5 and 5 represented the 10 most largest countries in the world.

4 represented the next 10 largest. and whatever so now i've got a much richer variation of color, because I've contrived my data set to.

So when I do a linear a choropl thing here I I get something.

It's just more interesting to me so in this particular case i've mentioned. The 10 largest countries of the world are are are value of 5 or red right here in this swath of longitude.

You can see 6 of the 10 largest countries of the world right straight away. We've got Russia, China, India, pakistan Bangladesh, Indonesia.

Those are 6 of the 10 largest countries in the world. We've been the globe we've seen Nigeria, as one of the largest countries in the world.

Brazil, United States, and I did not realize, though I did this this this training course, that Mexico is actually the tenth largest country in the world.

The next 10 largest are these kind of rose colors, and the next 10, I think, are these kind of oranges, colors, and and so on.

So, anyway. that is a you know here what i've done is I've I I've modified my data very easily, and it just took me a few minutes to do it but in exchange for that I got a much

richer polarization of these countries of the map.
Controlling the color of each country

Final thing I want to show you is it's possible to control the precise color of every country.

Every region in this map. So in in order to do this instead of actually, you know, let me save this i'm gonna I'm gonna I'm gonna this is gonna be my stack.

I'm gonna make a copy of this next of this step and do my modification on the following step: Just so I have both steps to to refer to.

So now i'm on step 2 i'm looking at map, one on step, 2, and instead of scaling the value here, I'm gonna say the value the the the value of the color is in a column in the data set and

the particular column. Well, it's not going to be population section it's gonna be a a column that I call section color.

So here what i'm actually doing here is i'm getting the color for this, for this torque left reading into in the Csv file, and let me show you what that looks like here real quick.

I'm just gonna look at the data set again, this is the data set. Oh, i'm sorry that was a that was a rookie error. I'm not. I don't want to look at the data set for the cities.

I wanna look at the data set for my country. here it is it's this this column here has hex values for the the colors I wanna do for every country.

Now it turns out here I kind of I kind of set these. So the 10 largest countries were this dark red and the next one we're a particular orange that I wanted, so you know.

But if I had one or 2 I could make every country have a different color. If I wanted to, just by putting a different x code here in this column, and my data set, I'd have to come up with 237 different colors to do that But you know.

You. You could do that if for some reason you wanted to do it. So in this case what i'm going to do here is I'm just gonna live with what I've got here. here.

I've got the 10 largest or red the next 10 largest, or this kind of bright orange. The next and largest, I think, are maybe the blues, or whatever.

So in this way i'm able to precisely control the coloring of the regions of my of of my map.

So that's all i'm gonna do on this I still have a couple of other things that I want to show you.

But let me pause here to see. if you have any questions on this and Michael i'm gonna admit Julian looks like he's in the waiting room So I just noticed that just now So any questions.

On what i've done so far from match or corpus.

Okay, Okay, these are the basics of using any of the maps in the system. They all basically work the same way you can call. you can colorize all of them.

And you just have to you wanna make sure that in your d need a source that you've got the

You've got columns that allow you to do these kinds of things. Sorry, bill. 1 one question before you move up the the map the globe that is in the flow system already has knowledge about borders and the names of the countries you don't have to match that to some existing data set that you guys use like does that know that's India does that

know that's Saudi. arabia yeah this information is contained in the map, and if you ever want to find what the region names are in the map, there's a there's a button here called get available regions.

So if you look at the Csv. is if you look at the particular Csv.

File. This contains your your, your, your map. You can get the regions of it by clicking on this.

Get get available regions button. So what I did here is I downloaded to my, to my hard drive.

The the regions of the map i'll just add to that that the our like world map has a whole bunch of aliases.

Basically each time the World Bank or U n dp send us a data set and the they send us spreadsheets that don't exactly match what's in our data.

Set. We update this map to take advantage of those new names.

But in general it is nice for you to like especially if you create your own custom maps, or somebody's credit custom app for you.

It's nice to see exactly what matches because you we do need exact matches between the region name and the data in your data set.
Finding missing elements using Flow

Can can anybody tell me how you can easily using flow, find all the missing the missing names or the mismatch names in your data set? instantly?

Great question, Bill. Okay, the way you do it is you do exactly what i've done here don't worry too much about the exact names of the countries and go through this car ple thing step and any place where there's a

mismatch it's going to be a gray color. Yeah, So actually, I use that technique to debug some files that we've gotten from different agencies within the un and the like.

And almost every time I get a a map is one or 2 mismatches and some country usually not one of the major countries, but some country will show up as being gray.

So then I you know I see what the spelling is it looks like it's a common spelling that we're going to encounter again.

I send in to our engineering group. and all and alias for that country, and we put it into the maps.

So gradually over time, we're accumulating quite a few variations on how different countries or Okay, So maps are a lot of fun, very colorful, really useful. and a very common use case in flow okay i'm gonna

close this flow here. By the by the way, you know, let me actually let me come back into this. Well, because it can i'll show you a couple of other things I can do with.

There is a question for John Porter as well about Okay. Converting Csvs into Json so I'll.

Just quick answer that which is that the if you could scroll up your chat window? There is a link that Michael put in for custom maps which tells you exactly how to work through that.

Since essentially, there's some really nice online tools to take to find, first of all, there's lots of shape files in the world.

And this document just tells you how to find some of those. Second, it tells you how to convert those shape files to top of Json with an easy online tool, including optimizing it because some shape files are hundreds of megabytes large.

And this is a web project product We don't want people to have to hunt download a 100 MB file to get down to every last little corner of the shoreline of a country, and then options how to export that and

then upload it into our system. Okay? Oh, thanks, Jason. Okay.
Best practices on naming a Flow

One other thing. I would just want to show you what to do. A best practice that we always recommend is name your flow with a reasonable name, instead of having a name new flow with a date string after it, name it with a more meaningful name.

So here's a certified flow designer map training version, 1.0 B. Because I did the same kind of presentation yesterday, and that was version.
Sharing a Flow

1 point A for the people who came to the Tuesday session. So give a meeting phone name. Another thing is sharing.

Sharing is quite important in flow. We support different ways of sharing this isn't a course on sharing right now.

But what i'm gonna do here. is i'm gonna share this flow privately, and i'm gonna share it with an organization near and dear to my heart are flow qa organization.

I'm gonna share this flow with it. so Now, people like Michael Jason and some other people in the in the company here can X can access this flow, and they can.

They can make copies of it and do with it whatever they want. So just wanted to get in a plug here for sharing no good.
Filters on Flows

Okay, and i'm gonna put a filter on my flows. I've got hundreds of flows from all around the world that people ask me to take a look at.

So I got one of the most interesting jobs in the world. I think I get to witness this creativity. that's going on all all around the world with flow.

Let's see what I want to do is I want to take you through custom maps, and i'm going to also take you through custom maps and edit mode here.

Custom, math turn out to be really easy to do. but by far the hardest part is defined.

The the the file out on the Internet that has the map of interest to you. But there are good sites that have those kinds of maps, and we have, as I mentioned before, in our help center we have directions, and how to do that.
Custom Maps

So here are a couple of custom maps. 6 or 8 months ago I had occasion, on consecutive days to do training session for people in Kansas and people in North Carolina.

So I thought it was just good form for those training sessions for me to make some custom maps to those 2 States.

So I went out to the Stanford site, and I found a files that had Mac attributes for the State of Kansas by county and for North Carolina by county, and I went I followed the process.

In our the in the manual that we we published in our help Center, and to do the Kansas map. Oh, I was.

I was forging new territory here. It probably took me 35 min to do this custom map, but there was a steep learning curve in that I kind of perfected the steps I needed to do, and when I did the North

Carolina counties map. It took me like 15 min, so steep learning curve

But custom maps are quite easy to do to in order to check out. To make sure I had all of the counties names spelled right here.

I put in kind of a crazy choroploth. Here, let me show you what the let me show you with the data set is for this, for this map.

Here. it's one of the world's simplest data sets. I've got the county name within the State of Kansas.

I got a value from one to there's a 100 1,005 counties in the state of Kansas, and I just did a random number generation here, and I I put numbers ranging from one to 5.

And something I call dot value. I just wanted to check out everything about this map. worked. Okay, So very simple data set a 101 record for each county.

And then I set up my choreograph on this, just like I did when I was talking with you.

Turns out the region. name in my custom file is called Name 10.

Colon Greeley I think that's really an example so it's name. 10 was the region that corresponds to the county names in this map.

So I establish that as the region for my custom map. And then I I I set up the the the the the data file.

I I did put in my mike in this in this data file. I have. I had the county the county this what I cost the the value column Here it went from one to 105.

Where the lowest county name alphabetically was one, and the highest county name alphabetically was one of 5.

I did that, and the primary reason I did it you know it's kind of crazy to alphabetize. but I wanted to find, if any, if anything, showed up as being gray in there.

Is that what I mean? That would mean the name I have in my data file did not match the name in the in the mind.

So it turns out, these are all nicely colorized, this one that reach the richest red one, maybe, is this one. Yeah.

So this is really near the bottom of the alphabet. Wilson it's a 100 third county in alphabetical order, and if I can find the very brightest yellow one, maybe this one here. Oh, this is the fourth, the fourth one Barbara.

County. So there's some county in here that begins with a letter A, and it will have the brightest yellow. I did the same thing for the North Carolina map.

So you know, really easy to do. and once you have your custom map, set up, these maps behave exactly the same as any other maps in the in the in the float system.

So it's just a few words about custom maps and then. every once in a while you might come across a situation where where you just can't quite find a map that does exactly what it is you want it to do and Maybe you

might want. Maybe you might need to go out and just get a take a picture of a Mac.

This is something we did for a company in the Dc. area. They they this is my human body sorry about that. Got the wrong one.

Yeah. So this is something we did for a company in the in the Dc.

Area. So what we did is we took a picture of a map.

We took it we made a We took a image in an image. Basically took a oh of the map, put it onto onto a step.

And what we did is on. with. looking at this map we were able to find the latitude and longitude of 1, 2, 3, the core port corners of the map.

Then what we did is we knew, so these become these become the boundaries of the latitude and longitude for this particular image.

And then what we did is we we knew the latitude and longitude of the various buildings that we're trying to display on the map.

So This, then just became a linear triangulation let's say, or i'm not sure what the right word is but a linear hunting in on what the locations of these particular properties were So this is property 13 had 8

170 square feet. We put just some simple kind of clickability on here.

This is this takes a little care. Yeah, you have to make sure. you know the latitude longitude of the 4 cars of the map.

But once you have that becomes very easy to place if you know that it didn't launch it to structures that you wanna show on the map becomes very easy thing to do.

So that is a that's a that's that's an example of using a picture of a map and using it constructively for holding scattered plots.

So now, just to send it. Put a teaser here. If you can do that with a map, you should be able to do it with just bad anything.

So what we've done here is we took a picture of a human body turns out. This was a drawing drawn by Leonardo in the fifteenth century, and this was for a medical kind of application.

What we wanted to do here. if we wanted to do this, some incidences of pain pain, points on the picture of a human body.

So we did. We took leonardo's drawing and we put some scatter plot information on it.

This is a clustered swarm that shows each incidence of pain clustered around the point or happens.

This is more, this more classical scatterplot where we're counting the number of incidences of pain in the neck, and then the left hip, and on the right hip and the wrist, and and the like, so it's

kind of that was a pretty interesting flow, using exactly the same technique that we used on

The map of the Washington Dc. area so you're still using latitude and longitude to create those points.

No, we didn't use that to logitech to but we did use x and y, and like this is the 0 point for X and Y. and this is the 200 point, and this is the 0 and the 200 point and what we did is we

defined each point on the body to have an xy coordinate. but it's pretty much the same. So exactly the same concept. Yeah.

So if you I I guess it would have been fun, maybe first, instead of using X and Y to use latitude in London.

Then we could put that on this, but we figured that might cause a bit more confusion than we were up to at that time.

So, anyway, you know. there's lots of techniques that images and and Matt can be can be used in doing visualizations in flow.

So let's see. Let me pause here. any other questions on this kind of technique or anything else. We've talked about. Can you show what the csv file Looks like that.

Overlaps the coordinates the line X with the image. Yeah, this one here? Yes. yeah. Okay, let me go up to this warm here.

So you're asking a question. you want to find the Xy you want to see the Csv. File for the swarm that corresponds to this step.

So I focused on the swarm for this step and now what I'm gonna do here. I'm gonna show you the csv so the Csv file is body, part location left foot left hand left tip, etc.

8 locations. I think this is the number of occurrences of pain at that location, and what we did is we?

We did a little bit of measurement and an approximation, and we came up with Xy coordinates for these various places.

So the left foot has a actually let me take this one. The left hand has a large x-coordinate and kind of a medium. My coordinate let's see if that makes sense.

So the left hand should be left hand should be way off to the right and kind of in the middle of the picture.

Yeah, So so really simple and i'll just put that up again for you in case you wanted to take a mental picture of it

And once again what we did here is we made this point here. We just defined this point here to be the 0 0, and this would be 200, 200, or maybe it turned out to be 2, 1,200, due to the dimensions of the sketch. and then we just you know We kind of

approximate it, and with one or 2 iterations we're able to get these points directly where we wanted them

Okay, Anything else. Okay? Well, great. hello. Thanks for thanks for listening.

I will stop sharing here and by the way this flow that these these flows that we create during these sessions will be made. you.

You'll give the link to these slows you'll be able to reverse engineer anything that that you saw me do here today?

All right, that you go. Yeah. Thanks for going through all of that. I think maps is a very exciting area for lots of experimentation.

And one of the easier ways to think of threed spatial visualization is just show.

People map First, it's the easiest thing for anyone to understand like where's the value of threed? And where can you derive value and it's a pretty easy shoe in?

And I think going from there to then, some other visualizations often lends itself really well. So homework will be the same as last week, which is basically to take this topic.

We just went through and to find a similar data set we'll send out a data set that is geo spatial or geospatial data contained within for you guys to practice on. But you can also pull from a variety of

sources to create your own data story that uses a map to show some, some mastery of that, and that will be available for any help or assistance with that in the chat window.

You'll also make sure to reference there's the demo media folder which i'll encourage everyone to reference.

That has some other sample data, but other top o Json files. If you want to play around with some of the custom maps and some of the functionality there.

Otherwise, thank you guys so much for your attendance today. You're really exciting to see the energy here any other questions

And similar to the last time we will have the beginning of the session open to anyone that wants to present. So, Jimmy. Thanks so much for presenting and then, That's how I lost track of who percent.

Oh, how thank you. How per presenting as well today. So Yeah. Thank you guys. And any other questions wrap things up. Yeah, I just wanted to say, you know, this is a big product.

It's got a lot of options and some of the things you're doing with this product are probably pretty new to you.

If you get to a point where you figure out there must be an easy way of doing what I want to do. But you can't quite figure it out and send us an email We're i'm very happy to help you out if you're if you're hung up at some point so is there is there any more kind of

fine detail guidance for what you want us to present next week besides something containing a map or or not.

Yep: yeah, thanks, Henry so I don't as of right now. But we can we'll send it in an email It is pretty broad here in terms of the the homework assignments.

We're not you know we're not educators and we're, not he's being grades It's more to prepare you for the capstone project and so we're working further on the details for the capstone

Of what we're expecting I can show you a little bit of what we've been working on. But we have now, between Bill and I one Excel sheet that contains basically every function in the whole and all of flow.

And we're basically using that as sort of a rubber to make sure one that we cover everything and that's 2. It's a way for us to Assess people's capabilities within the different functional areas of the

app so I can be more. We can be more specific in the actual ask here. And so in our summer email that we'll set out tomorrow. we'll be try to be more specific. But over that gives a little bit of guidance that you know this homeworks are are meant to be yeah, i'll

I'll just ask the question about when the capstone needs to be ready by We have a date on that we know specific dates. it's gonna be starting scheduling the week after our last

session. So we have 4 sessions here and Then we'll start scheduling for the week after, and we'll probably be hosting them during these regular times on Tuesday, and Thursday were people that want

to present in front of others. and then for anyone that wants to present privately, and not in in sort of a session like this.

That we can do those separately. and just schedule them separately. So that's the the the game. plan there it's entries on, and she's we're deep in the work of outlining all of those details. right now.

But thank you guys all for your patients and flexibilities. We've been building up this certification program

Cool, all right. Well, until next week feel free to reach out.

Hierarchies and other unique spatial visualization - Certified Flow Designer Training Session 3 transcript

Shared Flows

wow all right so I didn't get a chance to do as many

um analyzes as I wanted to but I didn't have a pretty good start on uh looking at the Airbnb Destiny density of

California's population centers so this is mostly going to look at the San Francisco area LA and then San Diego

down here um I've colored the each of these dots represents an actual Airbnb BNB location

and I've colored them by price so to get a better look at the price and

each area we can go ahead and go into the next slide and we can see that majority of them are down pretty low but

there are quite a bit that are pretty high up here so if you look at this one as an example um we can see this is in Beverly Hills

and it's 25 000 a night for that location so um that's quite a bit but um

but yeah if I just kind of Click around here you can kind of see that you know there's a bunch of different options and varying prices

um I can go up here to San Francisco huh um but yeah and then the great use of the

interaction and the uh um on selects uh overlay texts that

looks really really good yep and the next slide I wanted to look at

um that price versus the number of reviews and then the actual room type here so naturally we can see that

obviously the lower prices have a higher number of users there's maybe some more people that go there but it's kind of

interesting to see the as the price increases and we can see like where those different areas are at with

different room types so yeah fascinating um wow this is a great data set and

great visual um there's two comments I have um one is that for this visual on the

depth Axis or sorry the width axis for Price uh you do have the option for log log scale so for data like this it might

help reveal a bit more of what's going on sort of at the lower end uh

but I think that's amazing and then on the Second Step um if you want to jump over to that one

yeah um the one thing I noticed was the

the dots seemingly above the map a bit I'm not sure if that was intentional but I just wanted to make sure

um you as well as other people were aware of the button or where that setting is but you'll notice that by default it actually is like hovering

over just a little bit and if you click on the edit button which is that little pencil icon that will take you into edit

mode um is that little offset from map um it's right inside of charts uh yeah

right there so by default that's it's at 0.01 and if you set that to zero then

the dots will basically be on the the map itself okay and so so anyway it's

just like it's less about uh critiquing you and more for everyone else's edification

um in case they've encountered somewhat of the same uh four Maps yeah I didn't notice that and I wasn't sure how to fix

it so I appreciate that thank you yeah of course and then one last sort of uh and this is my personal uh design take

is that for the connections themselves here if you select the um connections

that um whenever you have a lot of density um like this

um one bar will sometimes obfuscate others and so you can change the opacity of the color here

um I do something more like 60 or 70 um I mean there's sort of anything's available but the uh it's in the colors

section um and that opacity will essentially allow you to see through a bit of the

this the uh the connections and so it just makes it a little easier to sort of

navigate and see and but that's just a personal design preference since um

takes um really awesome presentation cool thank you yeah that's great did you

get the map off our of our help center yep so the the map of California came

from your uh your U.S states

Google Drive yep great yeah very nice

thank you right anyone else like to present

oh girl all right go ahead how so I um this is uh really quick because uh I

after last time uh the presentation uh Bill did uh I think that was a really

good way to learn how to create a present uh visualize uh uh Geographic

data so I just replicated it in front of my students to give them an example of

this and uh so I expended a little bit um you know just to for the homework uh

let me see how do I share my screen I want to share screen uh Google Chrome

um share sent

okay um so this is uh uh basically what oh

can you see this yes okay so so this is uh what bill

created uh during the last last weeks uh basically 10 000 cities and uh it was

uh the photograph I think for the color of the map and uh I went a step further

uh was this to kind of aggregate um the population of cities into each

for each country so obviously China would have the largest population city population uh so each country would have

their own uh one dot per country like you know like this so and then I went

one more step to look at it based on um you know

um different continents so it's the casino of Asia as the most population Oceana

New Zealand Australia has the um least population of city in cities

that's it okay and these are the continents that the 10 000 cities

um exist on yes so there's ten thousand dots on that graphic

uh uh yo I I created a snapshot so this

is population by I aggregated uh okay yeah

so that was uh yeah my next question is if you did aggregation in the tool or outside and it sounds like you used the

tool to create a snapshot which is great because we're actually going to cover that a bit today um in the snapshot so that's uh really

cool that you you did that um it was quite easy to do it just uh you drag a a column up to the on the

title bar and it just does it for you yeah yeah absolutely um

yeah I'll I'll show something in just a moment here that is related to that um but before we do that any other

commentary for anyone else that would like to present yeah I just wanted to say we love it when people take these

flows that we put out there and extend them and make them uh more comprehensive

or give a Different Twist to it nice going

um I'd like to present mine that's okay yeah go ahead Henry okay uh we'll get it

up this is from a data set that um I'm a

big fan of it's the exoplanet data from NASA um so to start out with the field like

all these dots represent a star that we have found uh planets orbiting around

um you move forward and they all congregate onto the globe and this is all the locations of the observatories

uh that actually were responsible for finding these exoplanets uh then we move

on to the next one and this is all the locations of the exoplanets in the sky

around us so like if you look up at the sky from Earth depending on where you are around the Sun like this is the

globe around our solar system that we have found exoplanets from and then the

next step uh it actually has distance data so uh now all of the dots are

actually arranged via the number of light years they are away

um from our location so um that's that's what I have so far I

have a couple other charts that I'm still working on uh this one's pretty good this is all of the uh single

location stars that we found um or the observatories that have found them uh Kepler which is a Space

Telescope is way ahead of everybody else still uh so that's and uh so that's that

it's it's kind of difficult because the Kepler bar is so large I need to find a way to like get it in screen and still

everybody else and then um and then this one I just started working on the other

night this is all or this is is the um kind of breakdown of the stars and how

many planets they have around them so like the larger circle is the ones we've confirmed one planet and then I believe

it goes all the way up to eight currently we found one start with eight planets around it so uh that is that's

something I'm going to continue working on I was actually working on it before this class started but wow it's a really

fun data set and it's always growing too which is super fun yeah yeah where'd you get that data set

um just search for like NASA exoplanets they have a great page with so much information that's the best part about

government agencies they just put everything out there so wow

that is incredible um yeah that was really really awesome uh both from a Content perspective but

also the visuals the uh the colors at the end I noticed a few red as well there's uh green and red

does that have any meaning that that did I have already forgotten what it was though okay okay um how did I do that

that was oh that's the that was the planet numbers I don't know that's the size the oh the colors were the system

distance that's right um yeah it goes from like 1.3 light years like 8 500 or something like that

and um if I recall correctly the visual where you had the the dis like the

exoplanets a set distance away you actually still use the map function to

set those distances right so I think what's I love this one where it really extends the idea of like what is the the

um a map here where it's a map of the Earth but now we're taking it and using those distance measurements to share

something uh as more of like in space as opposed to a dimension of like

population like household so um I love the different ways Maps can be used here we've seen quite a different quite a few

here but I love that Visual and I don't know what you're thinking for that last one if you're thinking of like a pyramid

look um that might be cool yeah but uh right now I think they're overlapping and and the one little button I'll just hint

towards because you might um encounter it um or it's it's sometimes a little

tricky to find is within additional Dimensions there's a little field called Direction and it basically says in what

way does it disperse vertically horizontal or through the depth Dimension okay so I'll just point you to

that play with that and that might help help on that last step but uh okay yeah

that was awesome that was awesome guys those are amazing presentations from

everybody uh just kind of Blown Away uh with the start of this so you guys are

starting the bar high for me to dive into hierarchies and so um I'm a little nervous but that was

really cool um and if you guys are open to it I would love to start um sharing these with other with more of

a larger population so we can talk separately or I'll probably email separately uh Jessica's uh take on that

but uh to be able to amplify and and showcase some of these I think would be well worth it
Diving into Hierarchies

um so for today we're diving into hierarchies um and specifically the one we are going

to dive into together um actually close this one is related to

creating a balance sheet um and so I point to a balance sheet because it's sort of a very easy way to

think of a hierarchy relationship um but in a way that you don't typically
Balance Sheet on Hierarchy

see a balance sheet shown um and so here we have assets and liabilities and shareholders or

stockholders equity which should always be equal to each other that's why it's a balance sheet that the number of assets

should equal number of assets Plus or liabilities plus shareholders equity and

So within each of these this first view you can see sort of the the big picture in some sense the

um the hey Mike a full span here yes can you go full screen yeah is it um let me I just have you in

your in your uh box sorry okay yeah let me uh I'll present

this way because I know the text is a little um yeah thank you small here but um yeah

and so each of these outer components is uh one of the line items So Good Will

um sort of the the list goes through and this uh company is actually T-Mobile um if I go more to the side here and uh

we'll play around with some of the the ways to to visualize this and rotate it but

um I thought some of the interesting aspects uh to this um one were the the really large values

here on the asset side was Spectrum licenses so 82 billion dollars worth of spectrum

licenses so the license for that area of spectrum that they own is by far their

their largest assets um and where was the other one

I can't remember the other one was or what the other Insight was um I guess long-term debt but that's not too surprising but anyways um what

you'll notice here is one there's somewhat of a snakey design here where we're using

um lines or area charts to connect these data points together the height here is

equivalent to the dollar amount so it's essentially a bar graph on one angle but

it's also a hierarchy showing the relationship back to the the center and so we'll show this through a variety

difference means but you can also show this not just in a circle but also

vertically here and this might be a little easier to to see and understand

um and I can actually rotate this as well um oops

yeah wrote this is 90 degrees and that also sometimes aids with understandability

um so we'll go through basically the the creation of these um and one thing I'm just going to note is that it's a little

more technical but I think we'll uh in the process learn quite a lot around how
Fixing a Flow in an Error State

to actually um and it looks like this might have gone into an error state so

if your flow ever gets into a state where something doesn't look right I recommend refreshing the page

or save and refresh and that is typically an artifact of the preview window this is a preview window of the

presentation um and that then when you go through playback um it's a it runs the script again but

it's anyways sometimes you can get into a state where the preview window is not accurately reflecting what the

presentation view will look like so that does happen on occasion so anyways that's the the visual that

we're going to go through and start to to create and so this can be applied to a balance sheet a cash flow statement an

income statements a hierarchy of information and even to our points of of being able to show all the different

areas of flow so still sort of a work in progress and a little large but these

are something bill and I have been working through these are all the top level areas uh that we are covering the

flow homepage you guys have gotten very familiar with most of our work here together has been within swarms and

different components of swarms will probably very quickly go through quite a lot of these other groups for images

texts and models and sort of things just to check the box but we'll hopefully get

be able to share this out with you guys and we're marking down what we've gone through already what we have yet to go

through that way you can sort of see the the whole Gambit of of what is available
Nuances of Labels

the one thing to note and something I will acknowledge that we are still working through is labels have a lot of

nuance to them you'll notice that the labels here are radial in in pattern

where they radiate outwards um aiding in their ability to be deciphered but there are some issues

like right here that you know is just because of the crowding of information

um in that x-rap might be on so we'll cover some of the edge cases of what we're working through um but uh but how we think this is going

to be unlocked is with templates which are coming out soon where we're not

coming out soon but is something I think you guys will be more heavily involved in where after creating some a flow like

this like a hierarchy that is more detailed that we can save it as a template that then allows anyone to

upload data that has a similar format to reuse basically the perspectives and the

colors and and some of the other characteristics but with the different data sets to help someone get going

because as you'll find out your original you'll see here there's a few components to building one of these that's

important for for us to know as as sort of the core designers here um but we'll note that they will get

easier with templates so with that let me actually start to dive in

um and so for this first let me reference how you can actually get to this data so once again going to our

data Library we will be using a training data set for T-Mobile

so this is within your demo media and assets folder which I'll Place into the

chat window again um on the chat window

here we go and

oh and Mickey I just saw your message sorry um I'm so sorry we skipped over you if we have some time at the end

let's make sure to have you presents um um yeah let me finish this thought but

uh we definitely won't don't want to miss your presentation so apologies for that okay so let me go back here

um yes so I put that into the chat window so this is going to be inside of training data sets

um and we have T-Mobile financial statements and we have it saved as a Google sheet so that everyone can

basically look at this data first as well as we're going to use this to import in to look at a few things so

essentially what we have here is each of these is the line item on a cash flow or on on these reports and that each of

these can be categorized into a larger category and then a subcategory and then the details for for each as well as we

have this information both for the year 2020 as well as 2019. we have the dollar

amount here in millions and then I've actually gone ahead and multiplied it out by a million to show the real value

here since when we have the auto rounding inside of our our system

um it's uh it reads this still is 82 000 um as opposed to 82

um a trillion or billion um so anyways is there any particular way that

you're organizing that in terms of you know top down
Long Dataset vs. Wide

yeah so the most important thing is that this is a long data set rather than

locked and wide and what I mean by that is that you could very much very easily also see this information depicted this

way where you have 2020 as one column and you have 2019 as a separate column and that's totally fine you could

actually do it that way just recognize that 2020 will need to be its own swarm

and 2019 will be its own swarm and if you wanted to combine the two in either

uh hierarchy or to show something over time that it needs to be in its own
Unpivoting

column and so that process is called unpivoting and if we get more into the

data transformation that's a whole whole bag of worms that is a little outside of

the scope for what we're going to be covering um but definitely is is somewhat necessary here but how you actually get

this to this data is kind of cool I think is you can actually get this from the SEC website so if you go in to the

SEC go to filings you can go into Edgar and actually search search for a company

or fun name so we can type in T-Mobile here

and once we open that up we can open up the 10K and we'll see the 10 cues make sure to

click on the 10K and specifically open the filing that was made then then click

on interactive data I know there's a lot of like clicks here so interactive data

and then there's a little button that says view Excel documents I think it's kind of hidden with your system but uh

that's okay because at the end of the day you get a pretty impressive or you get a document that contains

pretty much everything you need um so here we have the the data and we

have all of this on different tabs and basically we can use this balance sheets
Column for Category

uh to take what is current liabilities and what we would do is actually add

over to it so that we have a column for category

so this would be assets and then I'll create another call or one

called subcategory and this is current assets

and so what you're seeing me do is essentially categorize all of these

um and I will not include the totals so we would not include the totals here since we don't want that to be part of

the aggregation but I do the same thing for liabilities

and I'm just going to skip ahead here um the there's also long-term liability

it's not just currents but I'm sort of skipping that categorization since we

already have the data I just wanted you to know where you can get it because you could do this for any balance sheets and

lots of information so now that we have that downloaded

um what we'll do is copy over this URL and on inside of flow we are going to

click on select slash upload the loader type we're going to do Google spreadsheets and paste in this link and
Importing the Data

when we import we will import that data that data in

and we will then very quickly click on edit slash re-upload in the future there

will be a button called Data transformation that will take you basically to the same spot and the thing
Snapshots

we're going to focus in on is snapshots um because this is where we are adding the categorization or the the creation

of the hierarchy by creating groups so there's little row groups here and how sort of mentioned it last earlier but

essentially what you do is you drag and drop up to this little section that says drag here to set row groups and so I

want to drag them in order so I want to have category on top and then I want subcategory beneath that and So within

this you'll see that there's been updates already so we can see assets here and if I click the the carrots I

can see that there's other assets and current assets and I can explore each line item so I've already grouped things
Value Aggregations

together and then I can perform aggregations so I can take the real value and go to

Value aggregation sum so now I'm summing up each of these line items so that at

the next level you're seeing the additional amount and so I'm going to do

that here for Value as well

and I'll skip through sort of the other ones um you know one other one we might do

here maybe just for category no Optical leave it like that actually

um and the most important thing to do is to click this great snapshot button so I have to set it up you want to make

sure to take that snapshot of the information and so the now that is saved in that manner
Sorting a Column (Ascend or Descend)

um the other thing you can do as well as sorts so just by clicking on a column you'll sort it up ascending or

descending and that's does impact the visualization and the order in which the

uh columns appear so from here we've created a snapshot

and so if I close this snapshot is right below data source

because there can only be one snapshot per swarm you can't you can create multiple snapshots but

um you can only have one snapshot per swarm so that snapshot carries through to the different steps and I didn't

cover this in the morning session yesterday and I I realize I should have but I want to just call out sort of how

this is structured by showing it first in a scatter plot and then we'll jump into uh hiring so the first thing to
Hierarchy level

know is that there's some automatically created Fields called hierarchy level

which is basically one two three um based on where it is on this uh in

this data set where we have three levels the the top level the the sub subcategory and then the actual line

item um and so um on the Heights I'm just gonna put

um I guess value sure that'll be fine now the depth axis I will put a hierarchy

group okay so hopefully this will start to make sense

um in just a just a moment here uh if you bear with me so basically there's

three levels of the hierarchy and uh maybe it's just to call out that there's a field called hierarchy level I'm

actually just going to switch back over to to hierarchy because that's actually how you typically create these all right

so this is hierarchy um and it by default starts with a circular layout you can switch that to a

linear layout which I think let's just start with here and then we'll switch to Circular in a moment

um and so this is level one this little dot here on the always left level two is the middle and level three is this third

one and that relates to the data um where if I go to snapshot one this is

level one uh level two and then level three is actually each line item so each each actual line item there so I do not

need to bring in detail up into the grouping um it's not necessary for to

add the actual line item um onto the hierarchy okay so from this uh we might want to
Colors

add some colors um so we could do this in a number of ways one thing we could do is do a color

scheme um based on let's do this based on category okay this is

actually a good example of where you might get confused and let me just clear this up a little bit so

you'll notice that we see the first and the last levels but are missing level

two and we selected category and if I select subcategory we'll see level two but are missing level one because what

we're trying to do is apply a color scheme based on the data that is contained there based in based on the

subcategory here and okay and so

um if you look at the snapshots you'll notice that um for category there is no category

listed at this top level for assets or current assets um

um yeah and and so the way to remedy this is to have these filled in and so

we can do that by going to Value aggregation first um and a little bit of a uh yeah

something to a small detail here it's a easy to miss but

um but yeah is something that's you might encounter and so now essentially we are coloring this based on the first

one it sees as opposed to being actual representative of what subcategories are

really there so it is somewhat forcing it's as opposed to being uh truly

correct so I don't know if that all makes sense to everybody but I sort of want to call it out um as one way to uh to do this
Labels

okay so to help you understand what's there let's add some labels so on this

snapshot or on this swarm we're going to click on new labels and the first thing we'll do is click on hierarchy group and

hierarchy group basically takes all of the hierarchy levels that are not the last node level and adds the name to

them so this is whatever was grouped on so here we have assets on the bottom we have liabilities and general Equity up

on top um and if I want to put labels on the Node

level that I need to create another label object and I can do that by duplicating this or if I go back to the

Swarm I can also click on new labels again and this will create another labels asset and on this label I want to

bring in the item which is the very it will only exist at the node level since

item does not appear at the at the upper levels and so you'll notice that the

text is all running into each other and a bit difficult to read so what we'll want to do is first turn off wrapping

this will make it so the text does not wrap to a new line and then in addition

we might want to reposition this information so we will want it left sent

left of the dot and be on the center of the dots and

um this I believe might be an instance where I just need to save and refresh um so let me go ahead and save control s

and if I refresh um there might be something just going on with the preview window for labels

which I've mentioned have have a little bit of uh stuff going on so yeah you'll

see that the the font or the the labels are now resolved

um and I'll space these out just a little bit by adding some Heights just to call out sort of these little

components that you can start to Intuit these uh account for the

um measurements of the size of the this hierarchy um both in width and Heights and this is

controlling where you're placing the spacing of of this information
Connections

um so the last thing to do here is to add in some connections so what we're going to do is actually add connections

based on I'm sorry we're going to click on connections based on hierarchy level

so it's a little drop down based on hierarchy level and that will create the connections based on those hierarchies

that we assigned now this is sort of uh I think pretty interesting and uh

putting more more typical for 2D view um you know there might be more you'd

want to do for some of these labels some some sort of Tricks here are are to bring it out a little bit so that it

stands in front and you can also add a background so if it is obfuscated that

you can make it a little more clear to to read through by adding in backgrounds

um but the the thing I wanted to really highlight here is I will add another step is that in three dimensions you can

actually use the height so here what we're going to use for Heights is that aggregated

um and actually I'll use just regular value in this instance but now you'll

notice that the dots are offset based on their aggregated real value

and the thing that we've been sort of uh encouraged people to do is to create an

area chart from this so if I click on new area charts an area chart is a

little different than the connections back to the

axis in that it fills in between data points as well I mean somewhat of like a

Sankey kind of way where you're seeing the distribution I'm going to alter the

size of this just a little bit here to make it a little less tall so you can more easily see

things and the one thing you might also want to do from this is rotate it so if I rotate

this minus 45 degrees along the width axis makes it just a

little bit easier to see some of that depth now the reason I'm not going all the way to minus 90 degrees

is that's at least for looking at it straight on the texts sometimes are

overlaying each other so we could have a whole lesson just on labels and and formatting and stuff like that and we

might but I think what we'll mostly find is that by nepotizing these and putting

them into formats that really we know work that should solve for the majority of cases so that's sort of what we're

banking on a bit more and I think you guys are going to be more critical to that as well as some ability to interact

with this we won't uh have you guys do it but we have just briefly show we have a node

editor which allows you to create a very complex interactions where if I click on a DOT

here it will cause other things to occur based on whatever I set up in the node editor that's for a totally different

topic and I'm not going to cover that but just sort of highlighting that that will be a part of hierarchies so you

know last but not least here just to show how we can transform from one visual to another if I change this from

linear to Circular you'll see that the the switch is pretty much automatic and

that's uh yeah I can sort of go from there the one thing I wanted to call out

for radial text or sorry for um for these types of graphs that are

circular is that this works fine when you're at an angle here

um of like you know 90 degrees or something where you can still read everything

um but that you might especially if you get into more of like a 355 or or a full

circle that you want the text to radiate outwards and so to accommodate that what

I'll do here is on um this last line for label two let me

duplicate this and I'll turn off the first one and on the second one I'm going to click this little radio button
Rotations

and I will also click enable rotation and it looks better but it still looks bad the reason it looks bad is because

anytime you use radial these radial buttons that you need to set the

position center Center Center and then you'll be at the right spot and so now these are more easy to read and still

face you as you rotate around the object and there's more we could do like I

mentioned but I will sort of pause there so I know I've covered quite a bit here with hierarchies as well as the root of

hierarchies which is snapshots and snapshots can be used both for that

aggregation buts and I realized this after the fact here I actually

aggregated everything for 2020 and 21. it's uh the reason being is that in that

snapshot one year 2020 and 2019 are both

there and so I actually want to filter this I mean neglected to do that and so I can easily do that here if I go into

here and just type in 2020 or sorry let's click the filters of

equals 2020. and so now this data set is only just 2020. and

um I clicked I was doing that to the raw data State set here as opposed to

snapshot so just a note to be on the right view so to be on Snapshot here and

then I want to filter this only look at year 2020. so now we'll update that snapshot

and that should Ripple through to then update all of these visuals and those

interactions so uh sorry about that but I'm glad you guys get to see sort of

this in action um so let me pause there to see what questions you have and what I can

elaborate on

Michael what other than financial data what else have you found this useful for

yeah so um we also have seen it use um

trying to think here we've seen it used in an m a transaction

whereas basically an org structure like here's one whole business unit as well

as the geographies so it was basically like Finance you know like where does Finance it or like sorry the like an

employee layouts um or um uh interactive org chart yeah interactive org chart

that's yeah a good framing um and that actually reminds me um and this is what I wanted to do quickly with

um um uh the information that have showed because this is kind of an interesting
Maps and Hierarchies

use of both Maps plus hierarchies um so if I just create a flow here

quickly and select from that's 10 000 cities data sets

um so just from that uh sample data sets 10 000 cities that I can create a

snapshot here that looks at um let's do

we'll just do country um for now there's far more that you could do here

um and actually I'll put consonant too so we'll have uh country and consonants uh update that snapshot and so now if I

select that snapshots and add a map and actually place these dots on the map

so if I do this based on coordinates using map one and I'll

select latitude and longitude that will work

um but the one thing I neglected to do here and is sort of the the interesting

way to show this is that we can aggregate this latitude and longitude

um based on averaging so if I average these I inevitably find sort of the uh

the the center the geographic center um for the most further SMH cases um for

each of these and so what you can do is in this snapshot if I change this to a

color scheme based on hierarchy level um and just for this I'll also add in

some additional Dimensions height based on those hierarchy levels um and I'm going to invert it so three

one um so if I do

0.25 to zero this is the height off the map and I can

actually go in still to add in connections and add in based on

hierarchy level and I'll make the transparency of this more like 40. but
Structures aggregating info

you can start to create these structures now which are aggregating information

and it's placing at a distance off the map based on something you're aggregating so the better thing to to

aggregate is something like population or something like that but now you're seeing the middle of each of them so

this is kind of one of those things where it's a combo of the two it's a both a hierarchy but it's also geospatial and I think that has a lot of

Promise as well for being able to show aggregations so still a lot more to

explore I think in aggregations as well as the ability to interact but um we'll be very curious to see if you guys have

other ideas on what you'd like to see that is sort of um somewhat relationship relational data

it's a little different than a graph database that's for sure um could you label that Center Point

that is the source of the hierarchy uh you can great question

um the um the only way to do that is to really add in a value that is a dummy value

um so if I go into this snapshot basically I need a something up on top
Type in a Snapshot

here um and so I know this data set already and that I have something called type

which is balance sheet for every line and so if I put type balance sheet

that will actually now be the the top level and so now I'll see sort of a root node

in the very center now it's not quite accurate because this is adding the two together

which um doesn't really work but um anyways I just wanted to quickly show

you where you could do that so you can you could put labels on the countries

there at the top of those pyramids yes sir right yes yeah so labels here

definitely um yes

yeah that's powerful thanks um and so here I'm selecting country is the label but I actually only want to

label when it's when the column hierarchy level

is greater than or sorry is less than in this case three

because I don't want it to show up on the dot level but I do want it to show up here on the the country level

um and so um the other thing here is this is radial and I want it to basically

uh be further away

and that almost worked okay sorry I'm diving a little too deep into some more

experimental to your stuff but um but yeah I think that's an interesting sort of uh

use of hierarchies that is a little bit more emerging it's a pretty common use

case to label the highest level and maybe the second highest level in these

hierarchies and not label the details just because there's so many of them

all right what other questions do you guys have

okay I know it ran a bit over um so I appreciate you guys sticking on here

um I think the uh that was really awesome this was probably one of my favorite days to see you guys presents

uh those are really awesome um and yeah if you guys want to create some AR videos with those or anything like that

um I would be totally game to to do private sessions for you guys to to help record those or whatever

um I think that's awesome um so really inspiring to see and we're available here to help you homework is

very similar here um where it's basically you know find some hierarchy data well we can point you to this data sets or even you could

reuse the 10 000 cities like we just showed um but you know practicing there and you'll probably run into a few more

things to ask about I'd say um so I appreciate your sort of uh

uh kindness or understanding um while we we

still make some hierarchy updates Hey Mickey hey Michael I had one question do you

think next week we could cover how to potentially animate through data that

has a Time access yeah great Point let me take a note

yeah animation is a pretty important aspect um the really short answer is in today's

platform the way we do that is to create two steps first step and then second step and the first step you just apply

filters to the date and so it ripples in through that time and there's actually other

ways to do it too which we we might cover as well um but that's sort of the simplest way

and that the other thing to just quickly note because I I think is really powerful and use it a lot is

um in-step details you can control the amount of time it takes to go from one

step to another um and so um I'll just

you know just put this into random perhaps and turn off connections so if I

were to to do this as a movement to have dots then I could quickly change the

amount of time this takes you know if I make it like 30 seconds it's going to be way more dramatic and slower moving than

if I were to make it two seconds which is the default so just something to be

aware of and uh yeah know how you can sort of use that and there are some

other details within this just so you're aware there's a little animation Tab and there's some some details here for

ripple duration and item duration um yeah which we might get into uh it's

yeah might get into you but because uh last week in Bill's presentation he showed how the data dots splashed out to

the various regions of the map and I was like snagging so uh even if it doesn't happen

in the class I know it's capable of some really fascinating stuff like that so yeah we can get an idea about how to

inter interact with the timeline that would be a real uh yeah animation is one of my favorite

parts of the product actually for for dramatic presentation so that that will be fun to present that

next week all right uh other questions otherwise

Nikki I do want to give you the floor if you do want to present no I figured what I learned today about hierarchies would

help me with some problems I was having so I'm out okay perfectly content to present next time okay okay sounds good

then we'll do that um cool any other questions or comments

otherwise we will close up for the day I just have one comment that I end up uh closing out most of these sessions with

and that is if you are stuck or if you think there must be an easier way or a better way reach out to us with a

question we've got a lot of it a lot of tips we can that we can provide to you

so there's no such thing as a silly question in this in this in this space so we're happy to help

and to the question of getting getting this flow um this will actually a good way to uh

quickly uh point to one thing um so a few things in the share dialogue

there's a little button called share and you can create a public link so when

I click that button for uh creating a shareable link this you link is like a

public link I could send to anyone and they can get to this flow they can't change the flow but they can make a copy

of it if they want to use it used for their own or to remix basically you can

also share it privately where you can put someone's email or if you ever have a question for any of us you might be

familiar put in Michael at flow or Bill at flow or industry or Json app flow and

then it will be sent directly to us and then for some Enterprise accounts we have organizations and some other ways

to to share um but just sharing the ways you can share but the last thing I wanted to

show was Discovery so this is not used a ton yet but um we're hoping more will is that when

you click on publish for Discovery there is a tab on the Lister called Discovery

so if anyone wants to publish there you can't so you can take any of the flows

that you have created and publish for Discovery and then we can see them too

and uh we'll occasionally bring over some into the featured tab but that

mostly is Monitor or managed by us and the Discover tab is sort of open to everybody so you'll notice there is one

there called bound sheet from training and that is today so you can use that as sort of a a reference points or

um for learning on your own okay

great all right well thank you guys so much for your attention and amazing

presentations uh really exciting to see the progress and look forward to next week thanks everybody

bye-bye everybody thank you thank you thank you thank you bye thank you

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

there's this button to optimize a listing for lighter colored backgrounds. So just something to be aware of. But i'm gonna go back here to sticking with my mountains at dusk for for this guy.

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

click on share and enable a share will link this, Url. Anyone can access once it's public and when you go to it.

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

buttons to the scene, and I was very, I mean, how did some awesome stuff where he actually added buttons, but made those buttons invisible?
Opacity

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.

So your *d button your twod. if you take a button, you say show it is a *d button.

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?