Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位
证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Practice: Creating Tooltips

Loading...

Information Visualization: Programming with D3.js

纽约大学坦登工程学院

4.7（64 个评分） | 2.9K 名学生已注册

课程 3（共 4 门，信息可视化专项课程）

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.

查看授课大纲

审阅

4.7（64 个评分）

5 stars
50 ratings
4 stars
9 ratings
3 stars
3 ratings
2 stars
1 ratings
1 star
1 ratings

HL

Mar 01, 2019

Excellent course. Excellent content. Some corrections on the example codes are necessary. The instructor is very good.

DD

Nov 12, 2018

Very good intro for people with some mild programming experience.

从本节课中

Layouts and interaction

Listening to Events8:22

Practice: Listening to Events13:20

Updating Data7:17

Practice: Updating Data9:31

Practice: Brushing10:33

Practice: Zoom9:34

Practice: Creating Tooltips9:23

Practice: Creating Linked Views11:18

教学方

Enrico Bertini
Associate Professor
Cristian Felix
PhD. Candidate

脚本

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.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司