In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.
Practice: Creating Tooltips
Loading...
来自 New York University Tandon School of Engineering 的课程
Information Visualization: Programming with D3.js
个评分
New York University Tandon School of Engineering
个评分
课程 3（共 4 门，Specialization Information Visualization ）
从本节课中
Layouts and interaction
与讲师见面
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
Hello.
In this video, I want to show you how to use or
to create something that we call tooltip.
And tooltips are basically those
information that they show when the user for example over.
So what I want to do is, if the user stop the mouse on top of this bar
I want to show this information, some information about the bar.
So for example right now, I don't know what information is behind those bars.
I can't tell you right now, for example, that what we are showing here
are countries, but still you don't know which countries we are showing here.
So I want to be able to once I stop my mouse over,
I want to see the information about which country are being highlighted?
And to do that, we can use tooltips.
And the tooltip is not restricted only for text, you could do any more complex thing.
You could show another visualization inside the tooltip if you want.
And how are we going to do that?
So one thing that we have to think about is,
which element who showed this information?
How are we going to manipulate the elements to show it?
So what we'll do is that, we're going to create one element and
this is going to be our tooltip.
And it's going to be there all the time, we just don't show it to the user,
it's going to be visible.
And then when the user hover something then we're going to show this tooltip, and
maybe position this tooltip in the position that we want.
So that's the whole idea of what we want to do.
Second thing that is important is, I don't want my tooltip to be draw inside the SVG.
The reason is, if I have something inside the SVG and
just think to move this to the border, it's going to get cut,
because nothing can pass this border if it's inside the SVG.
So we're going to create our tooltip outside the SVG, and
we're going to be manipulating it as the user manipulates our SVG.
So we have here a bar chart and
we created this bar chart using most of the things that we have seen before.
We have this that you created, we have the yScale.
We took we were careful to invert all these scale, so
we could get the right version of the sizes here and then we draw our bar chart.
Now our goal is to add the tooltip.
So to do that, the first thing that I do is to create this tooltip.
So here on the top, what we would do is that, we're going to add the div.
And this div will be our tooltip.
So right now we have it here, we just added the div, and
this div is going to be right now a box with some text inside.
We have here on the top a CSS that is for matching this div, right?
I will have to do two things in addition to for the work.
So the first thing that I want to do is, allow this div to be moved around,
because right now I cannot set the x and
y of the position of the div freely through the page.
If I do that, it going to work only here locally.
It's going to be really tricky.
So in order to move around, I have to detach this div from the flow of the page.
So remember HTML page has a flow and thing are going to be one below other, but
now I want to detach that and say, I want to move this thing around.
In order to do that, I will change CSS property that's
called position and we're going to call position absolute.
So it just means now I can move this thing around.
The first impact that you're going to see is that right now,
it doesn't go all the way to the end.
It restricted itself to the size of the text, but
now you will see that you will be able to move it later.
The other thing that we want to do is that, we don't want to show it.
We only want to show it when the user over the bar, so
to do that we will use display none.
So it just means that now we don't see it.
It's still there, but we don't see it.
And when the use are over it, we'll be able to show it.
So let's see how this work.
So here on the bottom when we created our bar,
we're going to add the new list in there.
And it will list then to mouse enter,
this means every time the mouse enter this element.
And what we would do, we would call a function here, showTooltip.
And we will show the country name.
So I will pass the text that I want to show to this function.
And this function will take care of showing that on Tooltip.
It's just to make easier to reuse this function later.
So now here in my function showTooltip, I'm receiving my text here.
And what I would do is, I will select my Tooltip element.
So it has an ID Tooltip, and I will change the text
to the text that I received as parameter.
And I will also change its style.
And I basically, what we change the property display to block.
So this is mean that now every time the user over one of these bars,
you see that the tooltip shows down.
And it doesn't disappear when I go away, but if I refresh,
you'll see it only appears when I hover.
And as I hover, I can now see the name of the countries.
So we're almost there.
The next step is, I want it to disappear when I move away.
So it's up to me if I want to create or
not a new, Function.
Here I want, so I just going to do mouseleave,
and I'm going to do all the jobs here.
So d3.select tooltip, and
it's going to change itsstyle.
Again, display and we will bring it back to none.
That means that every time the user enter,
we will show every time the user leaves or we will remove the tooltip.
Great, so now we have a tooltip that shows up and goes away.
But it doesn't really look like as a tooltip, because it's on the bottom.
I want these tooltip to be close to my mouse, so
as I move my mouse this tooltip is there.
So how we do that?
We're going to use a separate thing here that is the coordinates.
So when I call my function showTooltip,
I will not only pass the text that I want to show but also the position.
And remember that, when we're dealing with d3,
we can get the position of the mouse by using d3 event.
So we can do d3.event.clientX in order to get the X position.
And we can do d3.event.clientY to get the Y position.
So now when I call the showTooltip function,
I will receive here on the top those two coordinates.
And that's going to be my coords variable here.
So we'll get the x and y position, and
when we're dealing with SVG, we change x and y.
But when we're dealing with HTML elements that's div, so we'll be using HTML.
You will need to change top and left.
So we'll change the style here.
Style.
Top, so top is my ZY axis.
So Y coordinate is the second element of my array here.
So we're going to get the second element, and
since it starts from zero that's why we use one.
And then the left is my X axis.
And we would be using our coordinates zero.
So now when my move my mouse, you'll see that the tooltip follows the mouse.
So if I go here, I see the tooltip close and so one.
You may have a few problems like, sometimes the tooltip is like right on
the bottom of your mouse and you want it to be a little far, and its kind of thing.
So you can adjust that by saying, for
example, that I want the coordinates of the mouse, but I want 30 pixels down.
So now, the tooltip would be not just on top.
You can close there, you can say 10 pixels.
You can change the background as well.
So if you don't want to have this transparent thing in order to make our
tooltip easier to read, you can change the background color,
To white.
So now when see my tooltip, I don't have that overlapping and
more it's easier to read.
And finally, as I move my mouse I want the tooltip to follow the mouse.
So it turns out if I copy this function here that have from mouse enter, and
then do the same thing for mouse move.
What I get now is a tooltip that follows my mouse.
You see that as I move the mouse, the tooltip goes up and down with my mouse.
So those are ways that you can create the tooltip.
Remember, that you want to put inside the tooltip is up to you.
It doesn't have to be a simple text, it can be even a complex visualization.
And it's very helpful in order to provide context or
more detailed information to your user when you create your visualization.
