>> Hi everyone, and welcome back to
a another special episode of Learn with Dr. G. That's me.
Today, we're going to be using machine
learning to create datasets,
and we're going to create a web app to help
Tune Squad players win at their basketball game. Stay tuned.
[MUSIC]
If you missed the last couple episodes of Learn with Dr. G,
I introduced you to a new learning path on Microsoft Learn,
inspired by the film,
Space Jam: A New Legacy.
You can check out this learning path
at aka.ms/ExploreSportsWithCode.
You can check out the intro to this learning path,
and the first module deep dive,
by heading to aka.ms/LearnWithDrG/Basketball/Videos.
A quick recap.
NBA champion and global icon, LeBron James,
goes on in epic adventure with timeless Tune Bugs Bunny,
in the animated live action event,
Space Jam: A New Legacy,
from Director Malcolm D. Lee,
and an innovative filmmaking crew
including Ryan Coolidge, and Maverick Carter.
Today, we're going to dive right into
the second module of this learning path inspired by the film.
Now, I've already set up my local environment,
so I'm going to jump right into the code.
But at any point if you want more explanation or details,
you can head over to aka.ms/ExploreCodeWithSports,
to get this Learn module,
and get those details.
In the last video and in the last module,
we actually created playerdatafinal.csv.
If you didn't do that module, and don't want to,
or can't find your data, don't worry,
you can download this from the module itself.
When we created that CSV file,
we didn't actually create a variable for it.
So I'm going to go ahead and read that back
in as a new variable now.
What we determined in the last module,
is that players 31 through 46 are Tune Squad players.
We're going to extract
only the Tune Squad players into a DataFrame called ts_df.
We can see here that we're starting with player ID 31,
which is tune_squad1, and going
through player ID 46, which is tune_squad16.
What this DataFrame contains,
is for each of our Tune Squad players,
a series of statistics,
that is often used to predict PER,
or player efficiency rating,
which is basically one way to rate basketball players.
What we want to do in this module is create a web app,
where a coach can look at
the current PER for each of their players,
and determine which player might need to head out onto the court,
because they're ready, their PER score is really high,
or which player, who might be on the court, needs to come over for
a water break because their PER score is starting to go low.
Now, just using things like tune_squad1,
tune_squad2 isn't that interesting,
so I did download the tunesquad.csv file,
which you can also download from the module,
which has all of the player names for the Tune Squad players,
that are going to be a part of our team.
We can read those players in,
and then we can combine those two DataFrames together.
Since now we have the actual Tune Squad players' names,
we can go ahead and get rid of that Tune Squad column,
because all of the players in
our DataFrame are Tune Squad players.
Next, we're going to use machine learning model to use
only the statistics that are used in the PER algorithm,
to building model that can predict PER for our players.
What we're going to do is grab the last few columns,
not including the PER column,
that negative one, and create a list of those column names.
Next to each of those column names,
we're going to add a second column,
that is the standard deviation for that particular column.
We can see here that column 1,
it represents the name of the column,
and column 2 represents the standard deviation for that column.
We're going to use standard deviation as a way to predict
PER across one game versus an entire season or career.
Next, we're going to split our data into input data,
that X variable, which is again,
all of those columns that are used to determine PER,
and our Y variable,
which will contain only the PER values.
Using scikit-learn, we will create a linear regression model,
and we will fit our input and output data to that model.
Here comes the fun part.
Now, we're going to actually
create our own dataset using that model.
We want to use this model to create a dataset that'll give
us the PER value for each player throughout a game.
Before we do that though,
let's make sure that what this model is predicting for
PER is accurate dependent on the player.
We're going to run this model 10 times,
hence the loop that is iterating 10 times.
We're going to create a DataFrame
that basically contains a row for each player.
Then we're going to generate stats for that player,
so all of those stats that we're going to use to predict PER,
we're going to generate stats for
that player using the standard deviation.
For each stat or each column next to that player,
we're going to create a list that
takes the standard deviation for that stat,
so that's this one here,
multiplies it by a random number,
and add that to that particular player's stat.
After we've created that entire DataFrame that contains
each player and the random number for each of their stats,
we're going to use that DataFrame to predict
PER using our linear regression model.
Then we're just going to print out each of those predictions.
Again, we ran this 10 times,
and what we got was that on iteration 1,
the player with the highest PER was Foghorn Leghorn,
and the player with the lowest PER was Bugs Bunny.
Yours might be different because we are using random numbers.
We can take a quick look here to see if these values makes sense.
For example, I see Lola Bunny appearing
on the high PER multiple times.
That makes sense because we know Lola Bunny is one
of the best players on the Tune Squad.
Generally speaking, these values look to make sense to me.
So far we have a couple of things already.
We have a way of predicting PER given statistics,
that's our linear regression model,
and we have a way to create
simulated statistics using the standard deviation.
Ideally, we would be using real-time game data to bring
those statistics in and therefore predict
PER and give the coach real-time data.
But unfortunately, we don't have that data right now.
I don't have it. The Tune Squad
actually playing a game right this second.
What we're going to do is just create
simulated data for the beginning of the game,
between quarters 1 and 2,
between quarters 2 and 3,
and then between quarters 3 and 4.
At the top of each quarter,
the coach can decide which players they want to
put on the court and which player should take some rest.
Though this next bit of code looks complicated,
but I encourage you to go through it,
read through the comments,
modify it, read through the module.
Because it really is just exactly what
we've already done in this video.
At minute 0, we have each player,
and then there are statistics that are
simulated statistics and then at the very end, their PER.
We do that at minute 0, at minute 12, etc, 24,
and 36, because it's a 48-minute game.
It's time to build our web app.
From the module, you will be taken to
this GitHub repository template generator.
Basically, there is a GitHub repository
that is marked as a template,
and allows us to generate
our own repository based on that template.
I'm going to name mine, Space Jam A New Legacy Web App.
I'm going to make it public and I want
to include all branches.
That's because the main branch has
the ability for me to fill in the code as I'm learning.
But the complete code branch has
the completed code just in case I get stuck,
I can see it right there.
Once my repository has been generated,
we can see that complete code branch there.
I'm not going to create a pull request
because I really just want to build this myself,
and what I'm going to do is clone this repository.
I'm going to click on "Code", copy that clone URL,
and head back over to Visual Studio Code.
I'm going to open up the Command Palette
and I'm going to find Git Clone.
I'm going to paste my URL,
and I'm going to find a place to store my code,
in this case my desktop.
Once that is done cloning,
I'm going to open this in a new window,
and I'll be met with this notification
here about starting a code tour.
Now there's two ways that you can do this,
well, pretty much there's any way that you want.
But one way that we recommend is using the code tour.
If I click "Start Code Tour" here,
then I will be taken to this message that lets me know
what module and what unit this code tour is following.
But before we start our code tour,
I want to make sure that my app can deploy.
I want to make sure that everything is working okay.
In order to do that, I do need to make sure
my Azure Static Web Apps extension is working. All right.
I have my Azure extension open with my static web apps,
and my Pay-As-You-Go subscription.
From here, I can create
a new static web app by clicking on this "Plus" button.
That's fine for my name.
I'm going to say custom because it's just Vanilla JavaScript.
That's fine. Same location.
Build, that's fine.
West US 2, that's closest to me,
so that's fine, and we're going to be creating our web app here.
Now that this web app is created,
we can head over to the GitHub Actions,
which is what's going to run every single time we push
code to our main branch on GitHub.
This action will run and deploy our web app to the Cloud,
making it publicly available.
You do have to make sure this action has
completed running before you test any changes.
But we can go ahead and get ready for that.
What we can do is open this up,
right-click on "Production" and say, "Browse Site".
Right now, we can see that it's still
that basic Azure Static Web Apps site.
But when this action completes running,
we should be able to see
our app ready for us to make it functional.
Now that it's done running,
we can go check it out,
just refresh the page,
and we have our app.
Now, it's not functional yet.
We need to actually write the code,
but we can see that it's deployed and
publicly available on the web.
If you want to check out my version of the publicly available app,
you can head over to aka.ms/LearnWithDrG/Basketball/WebApp.
All right. But let's get started actually writing this code.
I'm not going to walk you through each step here because
both the code tour and
the learn module do a great job of explaining each step.
We can read through the comments,
but I do want to quickly run through building
this and you can see it in fast motion,
and then we'll see our final product.
Now that I've gotten to this point,
I can actually test it locally,
which I'm going to do.
I'm just going to right-click on my
"Index.html" file and click "Copy Path".
Back in my browser, I'm going to paste that path.
I should be able to see the same app.
But this time, when I upload the game stats,
I should get all of my characters appearing on here as buttons.
This is working pretty well.
As I continue to code,
I may open this up and double-check that everything is working.
Let's go ahead and check again.
Choose "My Gain Stats", and now I've got my PER cards or
player cards over here on the right side. All right.
I think that it's all written,
so let's go ahead and test it out. All right.
Looking at these PER cards,
I think I want to choose Porky,
Sylvester, Bugs, Lola, and maybe Daffy.
Our current PER is 30.68.
I can start the game,
and our 12 minutes slash second,
because testing over 12 minutes would take too long,
12-second timer is on the clock,
and it is done in 2, 1,
and our Q1 stats are in
and we can see that our Q1 stats have been saved.
Our stats for Q2 have been
updated based on the updated PER scores,
and I think I probably want to stick with the same players,
although it does look like
Porky has gone down and Sylvester has gone down,
and Foghorn Leghorn has gone up.
Actually, I'm going to have Sylvester go
onto the bench and get some water and some rest,
and we're going to have Foghorn Leghorn come on in.
Q2 stats are in,
and we're doing pretty good so far.
Oh, our current PER has gone down quite a bit,
so we can adjust again.
It looks like Gossamer's really got
some good PER scores right now,
and it looks like Porky is getting pretty tired,
so let's let Porky get onto the bench
and bring in our other players.
That's a pretty good PER of 31.18.
I'll go ahead and start Q3.
We're about to start our final quarter.
Our PER is still pretty good at 29.22,
and it looks like all of
our players are starting to get a little tired.
I'm just going to keep our current line-up
for now because I think these are
the players with the highest PER scores. All right.
Our average PER for all of
our players across all four quarters was 30.5,
which is a pretty darn good PER score for our game.
Pretty excited about it.
The last thing we need to do is push our changes back up
to GitHub so that our app redeploys life.
I'm going to go ahead and click on
this "Source Control" icon here,
and I'm going to create a Git
commit message that describes what we've accomplished.
I'm going to commit those changes.
Then I'm going to push those changes to my repository.
Once those have pushed,
I can see that my GitHub action has already kicked off,
and when it's completed,
I'll be able to go refresh my other page,
which is my live web app.
Now that that's complete,
we can go ahead and try out our web app.
This is our live one that is hosted with Azure static apps.
We can refresh our page,
choose our gainstats.csv file,
and basically do the same thing again,
make sure that everything works.
If we try to add more than five players, it shouldn't.
If we try to start our game with
fewer than five players, it shouldn't,
and we should be able to start our game
and see it working just like we did before.
That's all, folks.
Don't forget to check out Space Jam,
a New Legacy for more inspiration.
You can find out more at Facebook.com/SpaceJamMovie,
and stay tuned for future episodes
of Learn with Dr. G. Don't forget to share
your learning successes with me on
Twitter @drguthals or #LearnWithDrG,
and we'll see you next time. Bye, everyone.
[MUSIC]