MICHAEL: Hello, my name is Michael. And welcome to Data Visualization in D3. Let's get started. So what is the D3? D3 stands for data-driven
documents, and it's essentially a JavaScript library-- a
collection of JavaScript functions, that's going to make it easy
to visualize and interact with data in web pages. So there are a few prominent examples
of media companies that use D3. One is The New York Times. Let me pull up a quick example of that. So this is a New York
Times D3 visualization of Obama's 2013 budget proposal. So you can see it is interactive. You can see how people
spend different ways. They have different arrangements of
the data in different sorts of charts. And it all moves pretty seamlessly,
and D3 allows us to do that. The other prominent example,
which I had included, but then took out because I
didn't really want to look at it, was the 538 projections for
the presidential election and for the Senate races. But that was also built in D3 along
with a few other JavaScript libraries. So what can we expect to achieve
during the next 40 minutes or so of this seminar? So we're going to build a visualization. We're going to look at
shots in the NBA, and we're going to build some sort
of visualization that's going to help us analyze that. But the goal of this lecture is not so
much to provide a few functions in D3 or look at a few components and just
give a basic knowledge of those. Rather, we want to provide
some sort of literacy in D3. And by this I mean that, in D3
there is a lot of creativity. We have several different ways that
we can analyze and express data to express different things. So we have to be creative, and we have
to be very versatile in how we use it. And the way that
versatility is built up is by looking at examples of
what other people have done and being able to read that code
and understand how it translates to the visual you see on the screen. After a certain amount
of time doing this, you're going to be
able to start thinking about the visuals you
want to make and the code that you're going to have to write
to make those visuals in parallel. And that's really the
goal of this lecture, is to get you started on that
path. , Well let's take a step back for a moment and review a little
basic HTML and JavaScript. So remember that HTML sort of follows
this domain object model, which is something of a tree structure. So here we have some very simple HTML
and next to it we have the DOM tree. So this is just a document
with the HTML tag. Within that HTML, there's
a head and a body. The head contains the title, and
within the title and the body, there is some text. And it's going to all be
represented as a tree. And any of the JavaScript libraries
that we use to interact with HTML are going to be about
grabbing notes from this tree and doing something with
them in some manner. And JavaScript, remember, can interact
with and change these DOM elements, so change the nodes of this tree on
the client side of the operation. So let's take a look at that quickly. So here is my Flask application,
which I have put together just so we can look at these D3 examples. And you can see it's very simple. All it does is when we go to the
site, it serves up the file we want. And this is just reinforcing
the fact that JavaScript is all being done on the client side. The server really does nothing here. And here's the HTML I have. So I can actually even take
out these scripts for now. We'll use them later. And so we just have a basic page. It's titled hello, world. And we have three paragraphs--
hello, world, hi, world, hey, world-- with three different IDs. We reload the page. That's what we have. So this is that page where
we went to javascript.html. And we have a console,
a JavaScript console. So we can type a little
bit of JavaScript directly. So if we do
document.getElementbyId("greeting") and I make sure to close my quotes, then
you can see we get that paragraph with the ID greeting. And we can edit that paragraph so we
can change the text to say hi, world. So in this manner, JavaScript
allows us to edit the text. And you can imagine that if
instead of selecting the greeting, we selected the whole body and
rather than selecting text content, we did affected the whole
HTML, we could actually add different tags to our body. We could expand our HTML
in a lot of different ways. And JavaScript allows us to do that. But it's kind of slow. We have to type a lot of code. We have to go through things one by one. So just doing it in pure JavaScript
to make these sorts of visualizations is not really feasible. So another thing that you guys can
briefly introduce to another library is jQuery. In jQuery, you can see
from its description is a JavaScript library that handles
document traversal and manipulation, event handling animation, and Ajax. And it's a very broad library. It's actually much broader than D3. Often jQuery is going to be
used in parallel with D3. So it's going to cover some
things that it's good at, and D3 is going to cover it's
much narrower focus, which is really visualizations. And I think in that area, it's going
to be a lot more effective than jQuery. So let's talk about D3, and
let's get into what D3 is. So the main interface in
D3 for traversing documents and really for doing anything
is called a selection, which is essentially a group
of HTML elements, a group of those nodes from our DOM tree. And selections are created using
this d3.select or d3.selectAll. So remember, in jQuery
we have this dollar sign which starts all of our sort of
jQuery functions, our jQuery calls. In D3, it's all started
with just lowercase d3. And we can select in a very similar
manner that we do in jQuery. So if we do d3.select
with a tag name like body, that's going to be the
same as doing dollar body in jQuery to select all of the
body tags or to select the one body tag. And select all is going to select, in
this case, all of the block classes. So remember in CSS, we have
that dot represents a class. So the d3.selectAll("block") selects all
the nodes which have the class block. And this is, again, the same
syntax that we would see in jQuery. We can also select on
ID using a hashtag. And this could be done
the same way in jQuery. It's also the same as we do in pure
HTML when we do document.getElementById. And we'll come back to
this filter in a moment. But let's look at this in action. So now I'm going to add
back in this script. And this script is going
to include the D3 library. So you can see it's hosted on de.js.org
and we're getting this JavaScript file which contains the source for D3. Now if we reload this,
we can do d3.selectAll, and if we select all
the paragraphs-- so all of the nodes with the tag paragraph,
we're going to get this sort of object back. And it's sort of a weird look
at an object, a selection, but if we look inside
this group's element, you can see it has this node list,
which is each of the paragraphs. So the question is how do we
interact with these selections? And there's a lot of different ways. So once we make a selection, so once
we do de.selectAll or d3.select, there are several functions which can
be used to manipulate that selection and to manipulate the nodes
within that selection. So a couple of examples of these are
.attr, which stands for attribute. So that's going to be changing
attributes of the HTML documents, of the HTML nodes. .style, which is going to
change the CSS for those nodes. And .append, which is actually going
to add HTML elements between the tags of those nodes. So let's do one example, one
which I didn't actually show here, which is .text, which changes
the text inside the node. So if we do d3.selectAll("p"),
and then we do .text, this will change the text of the nodes. So if we changed them all to yo, world. You can see we've selected
all the paragraphs, and we've changed the text
inside them to yo, world. So you can see that D3 allows us to act
on all the nodes at the same time, all of the nodes in our selection. We could have also selected just one
of them using d3.select on the ID. So if we just did
d3.select("#greeting"), then this is going to select
the node with the ID greeting. And if we do .text("hello,world") here,
then you can see it changes that one node back to hello, world. So why would we use select
rather than select all? There's no really specific reason why. I mean it's going to be better
style in some ways, because it's going to make it clear that
we're selecting only one element rather than selecting many. If we had done
d3.selectAll("#greeting"), of course, we're only going to
get one element back, because elements have
to have unique IDs. OK, so this is all well and good, right? But the question is
why would we ever want to change all the attributes of a
bunch of nodes to the same thing. And maybe there's a couple
instances where we would do that, but usually what would be useful
is if we could change nodes in different ways, but in one,
sort of a short period of code. And for that we're going
to have to have some reason to treat the nodes differently. And that comes back to what D3 is
really for, and D3 is for data. And how do we associate the nodes
we want to change with the data that we have. And that's done with
this idiom basically, which is going to be
d3.select.d3.selectA ll(...).data(...).enter(). So there's a bunch of functions
that we string together here. And let's explain what each
of those do in an example. So here I have a simple JS script, which
has that idiom that we talked about. And let's just explain
what each of the line does. So we first do d3.select("body"). So this is selecting
that first body tag. And now we're going to select all
the paragraphs inside the body. So you can see we can
string together selections, where we call a select
on something and that's going to select whatever
we've decided to select. Here, it's the body tag. And then if we string together a
select all or a select on that, it's going to call select
All on all the nodes below that element in the DOM tree. So here it would select all
three of these paragraphs because they're within the body tag. But suppose I comment those out. Then the selection is going to be empty. So it's a little weird that we've
done that, but let's go a bit further. Next we're going to specify some data. So .data is a function which
is going to take in an array. And that array should represent
the data that we want to visualize. Here it's just an array of greetings--
hello, hi, yo, hey, and so on. And .enter, the next function, binds
the data we've input to our selection. So every element in our
array is going to be bound to one node in our selection. But wait a second,
our selection's empty. There's nothing to bind to. In that case, if we just
add a .append below this, it's going to try to fill out our
selection so that it can bind each data point to one element of the selection. So here by doing ,append("p"), it's
going to append one paragraph per element of our array. So in this case we have
seven elements of our array, so it's going to append
seven paragraphs. So we have one last thing which we're
doing here, which is this .text. So once it's appended all
of these paragraphs, right, we now have a selection of seven
paragraphs and we're going to call .text on those paragraphs. Now remember, here we could have
put something like .text hi world or whatnot. So we could have just
typed hi world and then we would have ended up and
deleted this function here. And if we did that, then we'd
end up with seven paragraphs that say, hi, world. So let's look at that real quickly. So if we uncomment out
this script here, so we have some script which is
executed within the body. And that script is this example. And then go over and run it,
we can see that we end up with seven paragraphs called hi, world. But we can actually use the
data to make these distinct. So if we go back and put
back in this function. So it's a nameless function,
but it takes one argument d. And d is going to be the data
associated with that node. So remember, each of these
elements of the array are associated with one
node in our selection. So it's a simple function. It takes in the data d, and
it returns d plus comma world. So we're going to end up with
hello, world, hi, world, yo, world, and hey, world. And let's see if we do that, and
that's indeed what we end up with. So we can see how we've bound
data to each of these nodes. And then using that, we've been able to
treat the node differently, but still with only sort of one
writing this function once. This is beginning to
show the power of D3- not it's a pretty simple
dataset, just a list of strings. We're going to be working with a little
bit more complicated dataset today, but I think it's a fun one, which is
all the shots taken by the New York Knicks in the 2013-2014 season. So let's take a quick look
at what that looks like. And this is a little hard to see. But basically we have games,
all the game in the 2013 season specified by game ID. The period in which they
occurred, so the quarter, the score at that time, the remaining
time, the team, which is always New York Knicks, the player who took
the shot, whether the shot was made or missed, the x and
y-coordinates of the shot, the distance it was taken from, and
who, if anybody, got the assist. So we have a bunch of data here. The main data we're going
to be working with today is just these four columns,
which are the player who took the shot, the result,
and where the shot came from. And we're going try to
visualize that in some sense. So the question is how do we
actually read in data like this? So in this case all the data
is stored in a CSV format, and D3 provides some excellent
interfaces for reading in CSV data. And that's going to be done
with this function d3.csv. The first argument to
d3.csv is just going to be the file name, as to be expected. And the second argument
is a nameless function, which takes one argument data. And what's going to be passed to this
function, what's going to be executed is the data which is
contained in filename.csv. And by that I mean it's going to
be an array of JavaScript objects, where each JavaScript object has
the keys that are the column names. So these are going to
be the keys, and values, which are the values within the row. So these are going to be the values. So let's take a look
at that real quickly. So as you guys can see, I'm not
quite as confident in my ability to type code live as David. So I've typed a lot of
this code beforehand. And we'll go through and
comment it out line by line. But for the start, all we really have
here is we read in the shots.csv file. And we're going to log
what the data looks like. And we should also look at what
the actual HTML looks like here. So at shots.html, we can
ignore this SVG for now. That's not going to be important yet. And we can ignore this selector for now. But we're just running
the scripts shots.js. So if we go to shots.html,
take a look at that. Here's what our data looks like. And as you can see, it's what we said. It's an array where each
element of the array is a JavaScript object, which are
those keys are the column names and the values are the
values within the rows. OK. So the question is, how are we
actually going to visualize this? And there are maybe some limitations
with just using pure HTML elements. Like we're probably
not just going to want to put a bunch of paragraphs saying,
Carmelo Anthony made this shot here, or a div that has maybe, we fill in
blue, you know, if someone made a shot. Green, if someone made a
shot, red if someone didn't. We want to have a little bit more
freedom to draw things than that. And that's going to be allowed by this--
I really shouldn't say beyond the DOM because it still is the DOM, but
it's beyond the basic HTML elements. We're going to be dealing with
this image format called SVG. And SVG stands for
scalable vector graphics. And in SVGs, we're going to be able
to draw lines, shapes, and text. So what do I mean by
SVG follows the DOM? So let's take a look here. We have this basic HTML
file called svg.html. And you can see it looks, it is HTML. We open up an SVG with the
attributes width 600 and height 200. Within the SVG I have three tags,
each called circle, each a circle tag. And I've specified the center--
x the center, y, and the radius. So that's going to be
the x and y-coordinates of the center of the circle
and the radius of the circle. And for the last one also specified
that it should be a fill of blue. So it's going to be colored blue. So if I go to svg.html, you
can see I get this image here, which is these three
circles that I've specified. So we can see that SVGs follow the
same DOM tree that we work with HTML. So we're going to be able
to interact with them using D3 in pretty much the
same way we interact with HTML. And that's going to allow us to
create a lot of these drawings. And this is the manner in which The New
York Times created a drawing like this, by appending circles to an SVG,
and doing a lot of other stuff, but that's the starting point. So a couple important tips for
using SVGs in these visualizations. So it's going to be tempting at first
to just append a bunch of circles and specify their center x and center
y since that's what we've just seen. But this can be a little
bit annoying down the road. So take for example, if we wanted
to draw a smiley face, for instance, on an SVG. Then we might have one circle for
the head, two circles for the eyes, and an arc for the mouth. And no matter where we put
the smiley face on the SVG, the relative positions
of all of those elements are going to each other
are going to be the same. However, if we want to move
that smiley face around, then we need to change the absolute
location of each of those elements independently, right? So they each need to specify--
if we move it 500 down, 500 left, then we need to move each
element 500 down, 500 to the left. And this can get a little
bit annoying if for each one we're specifying a center. So to deal with that, we can use
this g tag, and g stands for group. And the idea is we can
specify a g tag and put all the elements that we want to group
together inside of these two tags. The g tag has this attribute transform. And transform is going to be
some transformation which we apply to all the elements of the group. So this first one we have a translation,
100 down and 50 to the left. So if we have the smiley
face within this group, then it would move all of the
elements 100 down and 50 the left. And this is clearly a lot easier
than moving them individually. We can apply other sorts
of transformations. So in the second one, you
have a rotation by 20 degrees and then a translation 100 to the right. One thing to keep in
mind, 100 to the right. One thing to keep in mind here
is that the transformations are going to occur right to left. So the rotation here is
applied before the translation. You can imagine using a
rotation if you wanted some sort of circular layout of your data. So if you wanted to draw a
bunch of circles or rectangles or text in a circle around
some center, then you might use the rotation
transform for a group. So let's see this in action. And let's get started putting
together the shots visualization. So back in shots.html, let's go
back to the SVG which we have here. So I have an SVG with the ID
canvas, a height of 600 pixels and a width of 1,200 pixels. And over in shots.js,
we've read in our data. So let's start putting a
little bit of-- let's start doing some work with this data. So first I'm going to select the SVG. And let's ignore that I've
set it equal to shots for now. We can even delete that for
now and just select the SVG and start working with that. And then I'm going to use the
same idiom which we had before, where we select all the groups. And we're going to bind the data,
so each of these shots to one group. So remember it's going to append one
group per shot in our dataset, per row in our dataset. I'm going to give each
of these groups a class. This is a very good practice in D3
when we append these general objects, with each general objects
like groups or circles. You're just going to use groups
and possibly a lot of contexts. And you're going to be
able to want to select all the groups in a certain context. And the way the best way to do that
is to say, well, if we want to say, draw all the shots and we
want to draw all the rebounds, then we might have one, which
is this class shot and one is the class rebound. And then we can just select
all the ones with class shot rather than having to
select all the groups and then do some filtering in
order to get only the shots. So this makes it a little
bit easier in the long run. And then we're going
to have our transform. So here I've done a little work already. But sort of the first
thing that makes sense is to do just the x and y-coordinates. So we're going to translate
it the x-coordinates to the left and the y-coordinates down. So we have some group here. Now what you can see here
is that at the end of this we have a selection, which is all
the groups, one group per data point. So if I go back and I put
in what I had before, where I say shots equals the
selection, what I now have is shots is a selection
of all the groups, it's going to be selection where each node
in the selection represents one shot. So this makes a lot of sense now. And to each group I'm going to
append a circle of radius 5. So for each shot, we're
going to have one circle. And let's take a look
at what we end up with. OK, so now that I've reloaded the
page, it's a little bit cramped right. So it turns out that our x and
y-coordinates are perhaps not perfectly spaced for a visualization like this. So let's expand those out a little bit. So let's multiply the x-coordinate
by 10 and the y-coordinate by 10. And we can see that now it
spaces it out a bit nicer. Still though, we can't see
the lower half of the court because our SVG is not big enough. And typically, when we're
looking at basketball courts, we want them to turned to the side here. So we can do that as well by
flipping the y and x-coordinates. And now when we run it, it's
going to look about how we expect. And yeah, it looks pretty much like
what we might expect from a shot chart, where we have some clustering
around the three point line and a lot of shots near the basket. OK, so let's start doing some work with
this data in a more interesting way. So what data do we have? We have whether the
shot was made or missed. So how about we make
the two circles green if it was a make and
red if it was a miss. So remember we have this
attribute fill for the circles. So we can edit that attribute. And we're going to have a
function here, which is again going to be a nameless function
that's going to take that data bound to that node as the input. And it's going to output
the value we want for fill. So if we uncomment each of these
lines, we have this function. And it says, if d.result equals made. So remember, the node,
the data represents is a JavaScript object, which has
the keys, which are the rows, which are the column names in our CSV file. So here we have a column name called
result, which is either made or missed. So if we do it with d.result, it equals
made, then we're going to turn green. And otherwise, we're going to turn red. So we're going to have a
green circle if it's a make, and a red circle if it's a miss. If we look at this again, then
that's what we end up with. And we can begin to see some more things
so we can see that out in this area, people are making a lot of shots. So these sort of end of
the half, half court shots are not very effective, especially
since this is the Knicks and not the Warriors. So we've began to look
at our data and really be able to pull maybe not the
most interesting thing out, but beginning to pull
something out from this data. The question is, how can we add more
and can we make this visualization interactive? So the main interface for adding
visualizations is this .on function, which again is called on selections. And the first argument to .on is going
to be a string representing an event. And this string can be click. It could be move if you move
the mouse over the selection. It can be key down if you press a key. We're going to use mouse
over and mouse out. So mouse over is going
to be an event that triggers when you move the
mouse over a node in selection. And mouse out is going to be
an event that triggers when you move the mouse away from the selection. The second argument for
on is the function that's called when that event is triggered. And again, the function is
going to take a single argument. And that argument is going to be the
data associated with the node which triggered the event. So let's look at that. So if we do .on mouseover, we are
going to have a few lines here, which we can explain. So we have first this
idiom de.selectthis. So d3.selectthis-- this
represents the actual node. So remember the argument
here is not the node itself, but the data
associated with the node. But often, when an event's
triggered on the node, we want to actually
change just that node. And the way to get just that node,
is to call this de.selectthis. And it's going to return a selection
which contains just that node which triggered the event. I'm going to call the dot raise, to
raise that note above the other ones. And let's take that off for now and
see what happens if we don't do that. But that's going to essentially move
that HTML element to the end of the SVG so it's placed above everything else. But let's see what happens
if we don't have that first. To that node, we're going
to append some text. We're going to give it a
class called player name. And again, good practice
whenever we append something to give it some sort of class. We probably should have
given these circles a class if we want to draw other circles. We're actually going to
not draw the circles, so I'm not going to bother with it now. But it is a good practice to
have that class attribute. And we're going to add
this text to this text SVG tag, which is going to be
the player name, so d.player, so we're using that argument. So now, if we run this, and we
move our mouse over some nodes, we can see that we indeed end
up with the player's name. And we have a little bit
of a problem, because when we move the mouse off the node, it
doesn't delete the player's name. So now let's go back, and we
add this mouseout function. So here we have on mouseout we're
going to trigger another function. This function is just going to select
all the text which has the class player name, and it's going to remove that. So here we wouldn't even need text. We can just do All everything
with the class player name. And we could actually even do
everything with just the tag text. However, probably the best practice
is be as specific as possible, because we may want to add
in later other sorts of text onto our visualization that
we don't want to delete every time we move off a node. So now that we've added this, let's
go back and reload our visualization, and see what happens as we move around. And now, we can indeed see that once
we move off a node, the text goes away. Maybe we can make our
nodes a little larger if we want it to be a
little easier get over them. One of the things that I
love about this dataset is that we can see J.R. Smith likes
to take a lot of shots from way out. That's an interesting point. But one thing we can see is
that once we get into here, the text is going to be added
behind a bunch of other nodes. And the reason this is
occurring is because we're adding it to the group, which
has already been placed. So if that group was placed
before another group, even when we add the text, it's
going to be behind all the circles in the group's place after it. That's why we had this .raise here, so
this selection is going to be that one group. And .raise is going to raise that group,
so it's the last group in the SVG, so it's going to be on top. And now if we look at it
again with that .raise, we can see that now the names come
up above all of the other circles. So often we're not going to have
data in necessarily the best form for the visualizations we want to make. In this case, we have rows of data. And we basically want one row for shot. So this works out pretty well. But often we are going to want to
restructure data in some manner. And there are a bunch of functions
that D3 provides in order to do that. We're going to work with
d3.nest a little bit to do some stuff with the shots data. But I'm going to talk a little bit about
d3.stratify and d3.hierarchy first, which deal with hierarchical data. So the classic example for
hierarchical data is a family tree. So suppose we have some
data, which is again represented as a table in
some sort of CSV or whatnot, where we have the name of a person
and then the name of their parent. So this could clearly be
represented with a tree structure. And a lot of D3
visualizations are going to be trees or something that represents sort
of a tree structure or a hierarchy. So we can use stratify in order
to convert this sort of CSV format into something which is easier
to work with when making trees. Where we actually want
to end up with something like this, where we have the JavaScript
object with three keys-- the ID, so the person's name, the parent
ID, so who their parent is, and their children, which is
a list of all of the nodes which have the parent of Eve. And this is going to be
sort of recursive, right? So each of these children is
going to have the same format. So it'll have their ID,
their parent ID, and then their children, which is again going to
be another array of a similar format. So if we write something like
strat equals de.stratify, so creating some stratifier. In ID and parent ID, we're going
to specify a function which is going to act on the data in that row. And it's going to return
the ID we want to use and the parent ID we want to use. So here the ID is going to
be the name of the person. And here the parent ID is
going to be the parent. So you can see that d3.stratify was sort
of designed with family trees in mind. And then if we call strat on
whatever our data is, the data we write in maybe with
d3.csv, then we'll end up with a JavaScript object
that looks something like this. And there's going to be a
lot of visualizations in D3 that are built with formats
something like this. So I just wanted to
touch on that briefly. But now let's return to
what we're going to actually work with, with just this d3.nest. And this is used to group together data. And in our case, we're going to
group together data by player. So we're going to take all the
shots taken by certain players. D3.nest has three methods
which we're going to use. The first is .entries, and the argument
to entries is just going to be the data we want to group. So in this case, we're going
to do d3.nest, entries(data). The second method we're
going to use is this key. So key is going to specify
what we want to group on. So here we're going to have a function. The function is going to
take in a row of our data. And it's going to return what
the key should be for that route. So in this case, it's going
to turn the player name. So let's take a look at that. So if we do players d3.nest,
the key is going to be a player. We're going to come back to rollup, and
the entry is just going to be our data. And let's log what that looks
like once we do this grouping. So we reload. We can see that we have an array with 17
objects where the keys are the players' names, and the values are each of
the shots taken by that player. So if we open up one
of these, we can see that this is a shot indeed taken
by Carmelo Anthony assisted by Tyson Chandler. OK. So we now have this object, which
has the shots grouped by player. The last method, which we're going
to use from d3.nest is this .rollup. So .rollup allows us, once
we've done this grouping, to do some aggregation on the rows
that have been grouped together. So rollup takes a function, which rather
than acting on the rows individually, is going to act on the
whole array of rows. So in our case, we're going to
do the simplest thing possible, which is we're just going to
return the length of that array. So the length of the array
representing the number of shots taken by the player. So here we do .rollup. Here I do V, maybe V stands
for vector or whatnot. We can change it to
A to stand for array. So it's just going to be
this function A, which takes in the array of
shots for that player and returns the length of that array. So now if we run this again. And log what we get, we
can indeed see that we get this object where we have
each object has two keys-- key-- Carmelo Anthony, value-- number of
shots taken by Carmela Anthony, 1,643. So nest has allowed us to sort of pull
some other things out from our data and group it in some manner
that we can then use. So let's use this a little bit. So we haven't actually added
it toward visualization. We've done some sort
of computations here. But let's actually add it to our
visualization and do something with it. So back in the
shots.html, you saw that I had this selector with the ID selector. And we're going to want to be able
to just look at the shots taken by a specific player. So now we can go back and start
thinking about using D3 with the HTML rather than in the SVG context. So I'm just going to
select the selector. I'm going to select-- I'm
going to use this idiom again. .data, .selectAll,
.data, .enter, .append. So I'm going to add one option for
each element of this player's array that I've just created. So one option per player where the text
of that option is going to be the key, so the player name and a colon
and then the number of shots taken by the player. And the value-- so this
attribute value is just going to be the key of that player. So if I do that, and I
look at what I end up with, you can see now I have a selector
where I have the player names and the shots taken. And I can go through and
click on that selector. And you can see the
selector isn't so pretty, but you can imagine we could
also combine this with Bootstrap, and we could have a very
nice looking selector. So we can start to use a lot of
these different CSS and JS libraries together to make a more
beautiful application. So the selector doesn't
do anything right now, but we can combine some
of the things we've learned in terms of
interaction and selections in order to make it only show
the shots for that player. So we're going to, rather
than using on click here, we're going to use on change. So that when they-- rather than just
when they click on the same thing, we don't want it to
change anything, so only when they change the value selector. We're going to select all--
well, let's leave that for now. We're going to get the
value of the selector. So what's interesting about these
.attribute and here we're using .property, and .style, is that they
can be used as accessors as well as setters, so getters
as well as setters. So if we don't provide this
second argument here to set it, then it's going to
return the current value. So here we're just getting the
current value of the selector. So whatever we set here is the value. And once we get the value, we're
going to select all the shots. We're going to apply this
filter function which is going to restrict our selection. So .filter, which I mentioned
way back in terms of selections, and said I would come back
to, well, this is the time. So once I've created a
selection I may not want all of the nodes in that selection. And I may want to be able to pick out
the nodes in a more specific sense than just class, ID, and tag. And I can do that by using
this .filter function. So the argument to filter is just
going to be a function, which takes in the data bound to that
node, and if it returns true, then we keep the node in
selection, And if returns false, we don't keep the node. So here my function takes the data, and
it returns d.player not equal to value. So it returns true if
the player for that row is not equal to the
player I've selected. So it's going to select all the
shots not taken by the player. And it's going to set
their opacity to 0.1. And so it's going to
make them transparent. Then let's see that in action. So now if I reload and click,
you can see that it only shows me the shots for Beno Udrih. Problem is, if I select
another player, then they're all going to be transparent. Because I'm only making more nodes
transparent, I'm never resetting them. So in order to change that, I go
back to the start of my function. I select all the shots. And I change their opacity to 1 before
I go and change the opacity of the shots not taken by that player. So if I do that, and reload,
and now I select Raymond Felton. And see he's spread it out,
spreads out his shots pretty well. If I go and look at Tyson Chandler,
a little bit tighter to the hoop. Metta World Peace, maybe
not taking that many shots. Amare Stoudemire, another guy who
plays tight to the hoop, and of course, Carmelo Anthony, all over the floor. So again, we can begin to pull
more things out of our data. Now the one thing which I don't
like about this is it starts out with Carmelo Anthony, right? But it's not just Carmelo
Anthony's shots here. Like nothing gets faded
until we change the selector. So to remedy that--
I'm just going to add-- remember players is just an array--
so I can just add one JavaScript object at the start of
players, one associative array at the start of players. I'm going to have my key be all, and I'm
going to have my value be this d3.sum. And we're not going to go into
too much detail in d3.sum. That's something that can
be looked at, and it's not too hard to understand given
the rest of this lecture. But it's just going to sum up the
values of the elements and players. So it's going to be the
total number of shots taken. And I'm only going to fade shots
if the value is not equal to all. So now we have this selector, where we
can select through different players. And if we go back to all,
then all the shots are shown. So now this works exactly
as we would want it to. And we have all the lines
of code uncommented, so we're done with what I had planned. So we've created this visualization. And of course, there are
a lot of ways that I'm sure you are beginning to think
about, how we can iterate on this, how we can improve on this, even
based on just the few functions that we've seen. We can think about looking at
how assists play into this. We can look at maybe coloring
the notes differently based on shot distance
or shot difficulty and whether they made or missed. And those are some great things
to think about going forward. However, as I said, really
the way to work with D3 is to look at other examples to begin
to formulate your own ideas about what visualizations you
want to create and what different kinds of code, how D3
is being used in versatile ways to create those visualizations. So I'm providing a couple of
resources here that you can look at. So we have d3js.org, which are
going to have a wide gallery of sort of complete D3 applications
as well as the code for them and a ton of great documentation. There's also this site
Blocks by this guy Mike Bostock, which has a lot of simpler
examples which sort of illustrate single aspects of D3. So here he has this
circle dragging example, which just demonstrates basically
a good way to implement circles that you can drag around. So this is a pretty simple example. It's not really a full visualization. But if you're looking
for a more specific thing you want to implement in D3,
then this blocks is a good place to look if someone has already done it. And the last thing I'm
linking is a library with 538 put together called D3-pre. As you saw, at some
points our application was a little laggy in terms of loading. It took a little while for it to render. D3-pre allows us to pre-render
a lot of our visualizations. So if we want to have a lot of
stuff going on in a visualization, we can use this D3-pre so
it renders more quickly when we want to actually show it to users. So that should complete what
I wanted to talk about D3. I hope that you guys are
inspired to look at some examples and go forward, and feel that you
were literate with the language. Thank you.
