>> [音乐播放]
>> DAVID CHOUINARD：我是大卫 乔伊纳德，这是维生素D3。
欢迎。
我们今天要学习D3​​。
D3是一个JavaScript框架 为建设高品质
交互式可视化的网页。
东西像什么我们 看在我后面，
我们要学习，使这些 的东西，那种它的基础知识。
但它会很酷。
让我们开始吧 让漂亮的照片。
我们已经得到了更多的演示 可用的前景。
我们开始做吧。
>> 第一幕，DOM manipulation--我们要去 马上开始做很酷的事情。
首先，在左侧，我们有代码。
在右边，我们有 我们的代码的结果。
让我们通过它。
>> 让我们做一个圆。
你觉得如何？
svg.append circle-- 我们刚刚作出了一个圆圈。
你不相信我，对吗？
它不存在。
>> 所以，我们做了正确的这里， SVG是可缩放矢量图形。
这是我们告诉浏览器的方式 使在浏览器中的矢量图形。
我们只是做了现在 添加了一圈浏览。
>> 承诺是圆 需要一点基本属性
之前，我们其实可以看到它。
我们需要告诉它的x位置， 其y位置，它的半径。
我们没有告诉任何的是， 所以我们没有看到它现在。
但是，让我们告诉它的东西。
>> 所以，首先，你得 给我们的圈子名称。
所以，让我们把它叫做圆。
我们圈内有个名字吧。
让我们给它一些属性。
如何cx将中心X，所以 该中心的x位置。
比方说，200 200像素。
>> 让我们给它200像素A Y为好。
和R为约40个像素，一个半径。
现在，让我们来看看。
我不会拼写。
>> 你去那里。
我们有一个圆圈位置200 像素，200像素，40个像素的半径。
很酷吧？
我们有一个圆。
是啊。
>> 因此，没有必要跟着。
所有这些例子中，所有的 我做今天的代码
将在年底提供在线 在交互式示例的形式
与检查站 每一个行为，等等。
>> 让我们做更多的东西。
这个黑圈实在是太丑了。
我很抱歉的错误 信息就在那里。
在那里，我们走了。
>> 让我们给它的颜色。
怎么样？
我喜欢蓝钢。
好了，我们的圈子变了颜色。
那很棒。
让我们把它半透明 too--半透明。
>> 因此，这些都是属性 我们定义的圈子。
我们做的第一件事是 我们把一个圆的页面上。
然后我们定义 一堆属性。
其中的一些是必需的， 像CX，CY和半径。
等是可选的。
>> 有很多更多的属性。
有很多人。
例如，我们可以有一个 行程为好，红色的行程。
但是，让我们删除。
我们又回到了一圈，一个蓝色圆圈。
>> 因此，让更多的圈。
怎么样？
让我们另一个圆。
这是令人兴奋的，对不对？
>> 所以说，我只是复制粘贴 我们已经。
让我们把它叫做CIRCLE2。
让我们做精确 同样的事情，并给它
属性，定为300的x位置。
耶，我们有两个圆了。
>> ，当然，我们可以 更新这些值。
我可以把它放在400，而现在它的动作。
并且由于它烦人，让我们 删除它，所以circle2.remove。
现在它不见了。
>> 所以，我们在做什么，并 只是非常，very--这
非常类似于您 可能会做的jQuery，例如。
我们只是操纵 DOM中，它被称为。
你可能已经听说过这个词。
我们正在创造的东西，设置 属性上的东西，删除的东西。
>> 现在，这里的地方开始变得有趣。
所以在后面的代码中，我们仍然可以 参考这里原来的圈子。
因此，让我们重新设置其属性为CX。
比方说，它的x坐标为400。
而且我要转型 这一点，所以很明显。
在那里，我们走了。
>> 所以我们增加了一个圆圈。
我们设置一些属性。
我们增加了一个圈，删除它。
然后我们修改 原来的圈子。
>> 但这里那里得到 很多更有趣。
我们不仅可以设置属性 作为刚刚值，我们可以说，
哎，圈子，去定位200。
我们也可以将它们作为功能。
>> 所以给人，而不是在这里400， 我们可以做一些计算
在什么我们飞 希望该属性是。
因此，这是你如何表达了。
我们说，400来代替，让我 给你一个函数。
而在这里，这个功能里面， 我们可以做任何疯狂的计算。
>> 我们可以花时间和 看一些其他的东西
动态决定 我们想要什么样的价值圈。
怎么样，我们只是给 它随机x位置？
不过就是这样。
>> 那么，什么是说的是，对于 每x，运行此功能。
我们正在做的事情是计算 有些事情，一个随机时间宽度
并返回了。
所以，我们每次运行时，我们得到了一个 圆去随机的地方。
这是一种很酷的。
我觉得我可以看看 在此一小。
我们开始去 这里一些有趣的事情。
让我们把这个数据现在驱动。
这里没有数据。
让我们来改变这种状况。
>> 第二幕，数据驱动Documents-- 因此，让我们回到这里。
让我们刚刚摆脱CIRCLE2的， 因为我们只是添加和删除
它。
所以，我们并不真正需要它。
我们需要在这里有很多更聪明。
比方说，我们有 某种一些数据。
一个moment--让我们说， 我们有这种形式的数据。
我们有一个数组，只是 一串数字。
我们有7个号码在这里， 无论这些represent--量
在人们的银行账户，怎么 很多他们的体重，上帝知道。
>> 这些数字，我们 要使用我们的圈子
代表这些数字在某种程度上。
我们希望我们的配合 圈子里这些数字。
所以，我们做什么。
比方说，我们希望有一个 圈每一个数字。
我们可以做旧 我们doing--的事情
圈追加和CIRCLE2和circle3的。
但这种失控的，而 有很多重复的逻辑。
>> 因此，让我们更聪明这一点。
相反，使用var圈 svg.append，我们只是使用，
我们将使用 这里这个小方块。
我不想去深入 成什么这些部位做。
它是一种先进的话题。
我希望我可以。
>> 但关键是要recognize--和 你会看到很多时候在D3的代码。
文本基本的此块 创建尽可能多的圈
因为有数据元素 在这阵就在这里。
因此，这造成很多 圈的有元素。
这将创造我们七界。
它做了非常，非常关键的一点。
因此，让我们运行。
让我们删除我们的其他圈子。
就让我们评论这个 部分分离出来，并再次运行此。
>> 在那里，我们走了。
所以在这里我们的圈子是 很多暗，因为我们
有七界一 在另一个的顶部。
我们刚刚创建的七界一 每一个用于每个数据元素。
但有发生的重要事情 在这个片段就在这里。
>> 这是该数据被绑定。
所以每一个人 这些数据元素之后，
10，45，105，是装订 到一个特定的圆。
因此，这些不仅创造 一帮圈
但绑这两个东西放在一起。
>> 并在以后的，因为我们产生 那些圈子与此D3的功能，
如果我给你一个圈，你可以 给我与它相关的数据。
因此，我们可以问D3。
嘿，D3，我有这个圈子。
那是什么圈子有数据吗？
与D3会告诉我们10或45或105。
>> 这些事情都会。
这是一个非常，非常基本的概念。
让我们看一下。
>> 所以这样，我们会问D3--等 这是无关紧要的这一点，
只是相信我就可以了。
这就是我们如何要求D3。
嘿，D3，给我的第一 圈，你可以找到。
给我的第一圈，你可以找到。
然后我们可以问D3，什么是 对这些数据，这样，10。
>> 所以，我们只问D3，找我 第一圈，你可以找到。
什么是它的数据？
10，这确实是我们的 第一数据元素。
我们可以问，哎，D3， 找到我们我们的第三圈。
105。
为什么这很重要？
>> 所以在这里，我提 我们可以使用的功能。
我提到这是 一个非常强大的东西。
这样不仅可以我们的函数做的事情 像做一些计算，例如，
返回一个随机数，它可以 还做基于所述的数据事物。
这是数据驱动的文件的意思。
这就是D3代表。
>> 所以这个X postition--代替 只是说，所有的圈子，
得到x位置200，我们 可以给它一个函数。
在这里，我们可以做一些计算。
和D在这里矗立在地方的数据。
所以每次我们 一个圆圈，基本上，
D3将创建这些七界。
然后每
>> 圆圈，它会去，哎， circle1添加什么是你的x位置。
此前，我们 总是回答200。
但现在，每次D3问 我们什么是你的x位置，
这将给予us--我们 这个圈子，所以我们的数据。
这将给予我们的数据说， 你怎么想的论述是，
基于该数据。
>> 让我们只是返回的实际数据。
因此，如果我们运行这个，这给 我们的数据驱动的文件。
这些圈子是基于 有关position--
它们的碱作为所述数据的函数。
>> 所以对于第一圈， D3把一个圆。
然后D3要求我们，做什么 你想博览会是。
我们只是说，无论数据。
使博览会10。
>> 然后问，你怎么想的 博览会是第二圈。
我们回答，45。
我们当然，可以 做一些计算在这里。
我发现，那些圈子 有一种压扁了。
>> 所以，乘以3吧，乘以3的数据。
我们的圈子刚刚被扩大了。
我们的价值翻了三倍。
>> 圈真的是在边缘上， 所以我们也许种补偿吧。
比方说，20。
干得好。
>> 这是一个数据可视化。
这是一个非常基本的，但是这 给了我们一些洞察我们的数据。
它告诉我们，比如说我们 有元素的小集群。
我们有一个大的异常这里。
这给了我们一些信息 约的分布。
>> 如果我们，例如，改变 数据150在这里和刷新，
我们的可视化被改变。
这个文件是数据驱动。
>> 所以，当然，所有这些元素， 所有这些属性在这里，
我们可以用一个函数，而不是 只是这些数字，不只是
x和y的位置。
所以我们可以用一个函数的颜色。
因此，我们将这样做。
我们给它一个函数。
>> 让我们说，我们可以有 条件语句中我们的函数。
此功能可 几百行代码的。
它可以做非常复杂的事情。
>> 所以，让我们把一个if语句在这里。
比方说，如果我们的数据较少 比50，这是一些门槛
我们感兴趣 在由于某种原因。
让我们把它的绿色。
否则，让我们做它的红色。
怎么样？
尼斯。
>> 因此，我们的数据可视化开始 传达更有趣的信息
许多渠道。
所以，现在我们知道了一点 约的分布。
而我们知道，有某种 切断50，我们感兴趣的问题。
我们知道，有两个数据点 低于这个门槛，其中大部分
上面。
>> 所以作为最后一个步骤，此数据在这里， 这是非常罕见的看到这个像。
因此，让我们只是把它移动到一个变量 因为这是更清洁，这样。
然后我们在这里使用的变量。
这是完全一样的东西。
这只是一个有点清洁。
>> 接下来，第三幕，Scales-- 因此一个问题吧
在这里，如果我们改变 在这200 value--数据
如果我们将其更改为400 什么和刷新，
那么这个值只是去屏幕外。
所以，我们的逻辑就在这里 我们如何做3次
20，宣扬出去，然后 抵消了一点确实是笨重。
>> 什么是这些数字意味着什么呢？
他们只是硬编码在那里。
而且他们非常依赖于数据。
我们希望有一个数据驱动的文档。
我们希望有一个非常灵活的文件， 即给定的数据，去适应它，
并代表它。
>> 我们主要需要的是，我们 这个范围的数字10。
45，105。
我们想映射出到 的宽度，在这里的整个宽度。
因此，我们有范围 数字去从0到100。
我们有这个校园我去 从20到700，在这种情况下。
>> 那种我们想要映射上。
我们希望以这和 那么抵消它一点点。
事实证明，D3拥有这些。
这就是所谓的规模。
因此，让我们使用它。
>> 这works--我要去的方式 键入此起来，然后解释它。
这是一个尺度。
它会做的是，它会映射出 值从1到200上，以20至600。
我们可以检查。
我们可以看到这一点。
>> 所以，如果我给它1--一个瞬间。
给我一秒钟。
我一定是打错了。
你去那里。
对不起有关。
>> 那么，什么规模都行 是，这将需要一个值
然后将其转换， 展开了，所以
填补了全方位你问的。
因此，在这种情况下，如果我们给它， 它会映射出到20。
如果我们给它200，它的 要在地图上，为600。
而介于两者之间， 如果我们得到100，这是
将是某处 在20和600之间。
>> 当然，现在这是什么 我们需要删除这些硬编码
事情我们都在那里。
所以，我们想要做的是 采取我们的数据
鉴于，个别数据 元素，并把它传递第一规模。
所以规模将扩大它。
>> Well--哦，我们有一点点的错误在这里。
我们丢失的数据。
你去那里。
而且扩大了出来。
>> 这给了我们同样的 结果我们以前，
但有代替那些 硬编码的限制。
如果尺寸我们 帆布的变化，例如，
如果我们希望有这种过度 400像素，它squishes出来，
我们可以把它over-- 我们可以展开它，或者我们
可以减少这种留有余量，以 东西少或超过20。
这些数字，这些硬编码 数字现在是有意义的我们。
>> 我们可以做更多的事情 有趣的事情也是如此。
所以具有代替线性 规模，我们可能要记录一个规模。
那会给我们一个数刻度。
>> 所以，现在我们的规模，而不是 只是扩大了这个范围，
它做更复杂的事情。
代替具有该范围内的硬盘 编码的，而是具有600，
我们可能希望只使用宽度， 所以从20到宽度减去40，
2倍的另一侧缘。
这使得很多更有意义 有人谁可能看代码。
>> 有趣的是，秤取 非常非常复杂的为好。
他们做了很多有趣的事情。
所以秤不一定 操作只需用数字。
让我们做一个色阶。
>> 因此，我们可能范围be-- 我们的域名是1〜200。
这就是输入的东西。
但是，我们可能需要从地图 绿色到红色，例如。
而现在，如果我们把它传递1， 我们将得到绿色。
如果我们给它200，我们会得到红色。
如果我们通过它介于两者之间， 这将是一些组合，
某处梯度 之间的绿色和红色。
>> 并有代替 这种笨重的逻辑
我们在这里与 有条件的就在那里，
我们可以有一个something-- 那些之间的线性度。
所以我们会使用规模，我们只是 创建，我们称之为颜色。
我们想给它D，它 是我们的数据元素。
还有，我们走了。
我们有一个色阶。
>> 因此，这是映射。
所以，最左边是完全绿色。
最右边的是完全的红色。
之间的一切 为d的函数。
我们有一个有趣的 可视化在这里。
但是，我们的数据是种无聊。
让我们来看看有什么我们可以做的，如果 我们有更多有趣的数据。
>> 第四幕，正与 数据 - 的第一件事
我们想要做的，使我们的 可视化更有趣
是将数据在其他地方。
这是非常笨拙的有 数据硬编码这里。
一般，我们会问 别人的数据。
我们将可能要求政府， 人口普查局，什么是你的数据
然后绘制的或要求 一些对某些数据的第三方实体
然后建立一个 可视化上。
>> 所以，第一件事我们想要做的 就是那个移动到别的地方。
所以，我要创建一个 文件这里叫做data.json。
JSON是数据格式。
你不必知道太多有关。
而且我们要复制 数据很少，我们必须在那里，
它粘贴在那里逐字，去 回到我们的可视化代码
在这里，并使用此功能就在这里。
你不必知道的细节。
但是，这会做的是， 它会发现文件时，
取水的时候，并返回给我们。
所以，这是什么做的是，它会 并获得data.json文件。
然后所有的代码是 缩进inside--本质，
所有的代码我们那里 - 会 只有当我们得到的数据备份运行。
然后它会运行 与我们有数据的代码。
太好了，我们有一个 可视化查询
对一些地方的代码 否则，这通常是
在此它查询从一些数据 别的地方，这通常是
如何可视化工作。
>> 但我想回去的数据。
因此，在D3-- D3根本数据 消费数据的事情的清单。
D3预计，该数据只是一个列表 物联网，物联网的阵列。
不要紧，什么这些东西 是，只要它是其中的​​一个阵列。
>> 所以在这里，例如，我们可以对 当然也浮点值。
我们可能有负面影响。
D3并不关心，只要 因为它是一个事物的列表。
>> 有趣的东西，我们 可能有，我们也可以
有这样的字符串列表。
因此，这些都是深红头条 我前几天回升。
也许你可以找到一些有趣的 事情有关这些一个头条新闻。
>> 如此反复，这是事情的清单。
D3并不关心。
这恰好是一个字符串。
我们已经改变了我们的数据。
>> 让我们回到我们的可视化。
现在，我们的可视化预期 的输入是数字。
因此，我们将不得不 做出一些改变。
因此，例如，首先，也许 我们希望把这些圈子沿
由标题的长度，所述 在标题字符的数目。
>> 因此，我们将每一次做is--我们 函数被调用的，
我们会发现它的长度和 然后传递到规模。
颜色，我会回来 该钢蓝色。
还有，我们走了。
我们有一个可视化 深红色的头条新闻。
>> 我们的规模是有点过。
让我们假设时间最长 标题是100个字符长，
因此跨度了一下。
我们有一个可视化。
如此看来，最头条 相当接近，
在字符行的条款。
但是，一个人也没有真正脱颖而出。
>> 我们可以建立一些工具 探索更多。
但是，当我在这方面的工作，我 好奇，是否在这组数据，
头条用冒号 在他们会更长。
我假设他们会。
>> 因此，让我们了解一下。
让我们使用的颜色 通道像我们以前那样，
编码一些关于是否 有一个冒号或没有。
因此，我们将使用一个条件了。
你不必知道 这一细节，
但这是我们如何检查 串为特定的字符
在JavaScript中，再次，不相关的。
>> 但是，如果我们没有找到 结肠，我们将返回绿色。
如果我们这样做，我们将返回红色。
如此反复，头条新闻 有一个冒号会变成红色。
这是这是指：好的。
>> 如此看来，我 假设碰撞。
有只有两个。
我们只有6个数据点 只有俩人冒号。
但似乎有点多 在其下端，实际上。
头条用冒号似乎 到通常更短，
至少在我们的数据set--有趣。
>> 让我们返回到 钢蓝色，然后看看
我们可以利用甚至使 更有趣的数据。
于是，我再次提到， 在D3的数据是事情的清单。
我们已经看到了很多类型的号码。
我们已经看到的字符串。
但事情也可以是对象。
>> 它们可以是复杂的事情 包含了很多东西。
如果说的更清楚， 在大多数情况下，我们
要建立每一个数据点作为 不仅仅是一个值更复杂。
如果你想象 关于学生数据库，
有可能是一个学生 名，学生证，
和很多相关的东西 与一个特定的记录，
不只是一个字符串或数字。
因此，让我们看一下。
>> 这是一种这样的数据集。
这是一个数据集有关地震。
所以，这里的一切我们的列表或阵列上 东西包含了很多东西本身。
所以，每一个数据点都具有 幅度和一个坐标。
和自己的坐标 包含两件事情。
>> 所以每天是现在很多更 复杂，有很多更有趣
并包含更多 有趣的信息。
让我们来看看，我们可以打造出这一点。
再次返回这里，再次，用 我们直方图圈的可视化
我们已经建立了，让我们看看我们是否能够建立一个 震级分布可视化
在我们的数据集。
>> 所以在这里，这是同一个概念。
但现在，D包含更多的东西。
D包含许多数据元素。
所以我们得到D背面。
D3给我们ð。
我们通过查找幅度响应 d和再递过来的规模。
>> 然后，我们需要改变 我们的规模，当然。
所以幅度根本就没有 去远远超过10。
其实，从来没有 一个10级的地震。
但是，这是一种我们上的 为此，我们在上面的光谱。
>> 让我们来刷新。
不错，我们有一个可视化。
有趣的是note--等 有两个数据点
几乎正好在每个顶 其他，在幅度方面。
你看这通过我们使用的透明度。
>> 我们现在有地理数据。
我们有纬度和经度。
也许我们可以做的东西 很多与更有趣。
让我们找一些更 有趣的方式来可视化
这更复杂 数据，我们有机会获得。
>> 第五幕，Mapping--根本， 我们要在地图上把这些。
我的意思是，这是这是怎么回事。
我们想了解的信息进行编码 这些地震读数的位置，
以及其规模， 因为我们有现在。
我们知道如何消费 更复杂的数据。
>> 我们要做的第一件事就是 创建地图，一个背景图。
我会去通过 这非常快。
这是棘手的代码。
这是另一个那些 食谱，你真的不
要充分了解供您使用。
但是，这是代码。
这段代码在这里创建了一个地图。
>> 我们不会去详细。
但表面上，它的作用是， 它查询该us.json文件，
就像一个数据文件 一个我们以前。
这是比较复杂的，当然。
但在这种情况下，一切， 每一个数据点是这样的状态，
并具有列表 纬度和经度
定义的多边形， 这种形式，这种状态。
>> 那么，什么D3会做类似 什么我们以前那样。
这将要求和 结合，为一个元件。
这里面的一个函数， 将映射元素出来，
根据该纬度和经度。
你可以阅读更多关于这一点。
我推荐它。
>> 有在链接 这段代码的最终发布。
和代码注释。
在有关于该链接用于进一步。
我建议你​​查一下。
但我们关心的是 该投影功能。
我想通过这一点。
>> 首先，让我告诉 你说，是的，我们有一个地图。
地图是冷的。
因此，让我们看看这个 生产函数。
>> 投影是非常 像规模，再扩展。
那么，什么生产 该投影功能
确实是，我们可以通过它的经度 和latitudes--在这种情况下，
这里，这些值是在 LAT-多头的建设
我们坐在右 now--投影。
和投影将转换 到这一点的x和y的像素值。
>> 那么，什么投影做 非常类似于我们的规模。
它以我们的纬度和 经度表示整个地球
和收缩和尺寸的 下来，我们希望广场，
我们已经给了它。
在这种情况下，我们 通过这些值。
而且它给我们，好，那 在屏幕上指640像素。
这整个屏幕为700像素 宽，这样就使得我们这里，
和154像素下来，我会 估计是几乎在这里。
>> 所以服用这些纬度多头，其中 代表东西就整个地球
和压扁和移动周围 给我们x和y的像素值，
这是第一件事，就是 在这个映射代码完成。
的，然后休息 代码消费数据
然后映射那些纬度多头 到的东西在屏幕上。
>> 但是，我们要利用这个投影 功能，因为事实证明
我们有纬度多头多头为好。
回头看看我们的数据，我们有 纬度和经度坐标
每一个观察。
因此，让我们使用投影。
>> 所以，看我们的阐述， 我们希望我们的exposition--
我们有一个纬度和经度。
但我们要的像素值。
而事实证明，我们有完全相同 我们want--投影。
很像我们 使用规模就在这里，
我们现在要使用投影 并把它传递坐标。
所以，第一件事 我们doing--所以我们
得到D，它是一个单独的数据 单个地震元素
阅读。
我们要做的第一件事 是获取坐标。
好吧，我们有坐标。
>> 我们要做的第二件事是 传递到投影。
投影转换这些坐标 入的像素值，x和y。
再过去的事情，我们 想要做的是刚刚拿到X，
这此情况下是第一个。
它是第一个的两件事 这是由投射返回。
>> 我们将y的做同样的。
而是，我们将返回 第二元件，在y。
准备好刷新。
哦，多余的字符 这里 - 不错，我们有
一个数据驱动的文件，是 隐瞒对象的这个JSON文件，
拍图，并且改变 关于属性的数据
突出它在地图上。
这真的很有趣。
这是很酷的。
>> 让我们把它上升了一个档次。
我的意思是，我们有两件 信息与每一个数据点。
我的意思是，三名。
我们有坐标， 其是x和y。
而我们的规模。
>> 我们需要以某种方式程度编码。
我们有很多渠道。
我们可以使用的颜色。
我们可以使用半径。
我们可以使用不透明。
我们可以在代码中使用了很多东西。
这些属性和许多 更多未列出的有，
因为他们是可选的，我们可以 使用这种数据进行编码，行程
和我提到的所有这些事情。
>> 让我们做半径。
我觉得半径是最直观的。
所以，再一次，我们将取代硬编码 40并进行一些计算。
我们将再次使用我们最喜欢的规模。
而且我们过去ð。
但不是D，因为我们想要的幅度 的D-。 d为仅仅是数据点。
我们将通过规模扩展。
>> 让我们再试一次。
哦，这是行不通的。
为什么它不工作？
>> 所以要记住什么规模呢。
让我们来看看规模了。
比例尺地图从1到10上 到22〜600，更多或更少。
600是巨大的。
这就是为什么我们得到这个。
>> 因此，我们要改变我们的规模 为更合理。
比方说，我们要0到60。
60大，但10地震 是令人难以置信的罕见。
事实上，他们从来没有发生过。
>> 所以，这是什么会做的是，它会采取 我们的大小是从1到10
并将其映射到扩展出来。
并在地图上为0到60。
让我们来刷新。
>> 不错，我们有一个可视化。
这是伟大的。
这是实际的数据。
你会发现，在我的小玩具 举例来说，最大的地震
是正确的我们之上。
但仅此而已。
我们有个约会驱动的可视化 消耗的数据
并给了我们真正的 有趣的信息。
是啊，让我们添加一些 互动吧。
我提到这是 D3的强大力量。
>> 所以在这里，对于每一个元素，我们 描述了一堆属性。
但是，我们也可以描述我们想要的 发生与互动元素。
例如，我们可以描述 会发生什么，当我们鼠标滑过。
和非常相似的是， 那将需要的功能，
非常相似的 属性我们以前，
我们做一些事来了哪里 元素，当我们将鼠标悬停在它。
>> 所以第一件事情，我们需要 做的是选择元素，
找到它基本上，在浏览器中。
然后，我们可以设置 一个属性给它。
所以我在做什么在这里，当我们徘徊 过什么东西，我们会得到这个元素
然后将其不透明度回 1，完全不透明。
让我们来看看是什么样子。
>> 看来我们有一个 在这里多余的分号。
因此，如果我们在这里徘徊，它就会爆满。
但现在，当然，它 撑满了，因为我们
要描述发生了什么 当我们删除光标。
因此，让我们做到这些的 鼠标移出，而不是将鼠标放置。
>> 我们将其重置为 我们有什么before-- 0.5。
而现在，我们每次 悬停，我们得到一个完整的圆。
它帮助我们看到我们 我们选择本质。
>> 现在让我们做这真是太好了。
让我们连接这个真实的数据。
因此，让我们问能 有关他们的数据USGS。
因此，美国地质调查局 有关于地震的数据。
他们有一个公共的API，能够 被消耗JSON格式。
因此，让我们做到这一点。
>> 所以这是一个有点代码 连接到USGS API。
还有的就可以了位处理的。
这是不相关的，但它简化 到像一个简单的数据格式
我们以前有。
所以我摆脱我们的电话来 我们假data.json的文件。
而是，我打电话 美国地质勘探局是必须的。
>> 让我们来刷新，美观大方。
这是实际的，现实生活中的数据 从本周的地震。
这真的很有趣。
这并不令人惊讶 对我们来说，但有
很多在地震 西海岸加利福尼亚州。
但我认为这是非常有趣 有这么多地震
在阿拉斯加，显然， 这里在中西部地区。
我的意思是，有趣，我们是很好的。
这就是结论。
>> 但从根本上说，这 是D3帮助我们做的。
它可以帮助我们获取数据，绑定 它在DOM元素，
并将这些元素改变 作为数据的功能，
具有这些属性，所有的 元素的许多属性，
一切是非常有用的渠道 传达信息。
>> D3是一个令人难以置信的强大 图书馆和得非常好运行。
这是一些强大的东西。
数据可视化是一个 令人难以置信的强大的工具
输送到人的深 ，获取他们的核心见解
并帮助他们了解，在 这种深刻和直观的方式，
数据如何工作以及如何 数据改变了我们的生活。