[音乐播放] 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是一个令人难以置信的强大 图书馆和得非常好运行。 这是一些强大的东西。 数据可视化是一个 令人难以置信的强大的工具 输送到人的深 ，获取他们的核心见解 并帮助他们了解，在 这种深刻和直观的方式， 数据如何工作以及如何 数据改变了我们的生活。