这篇文章的内容由Quincy Smith提供，他是Springboard营销团队的一员，该公司是一家在线培训公司，旨在弥合世界各领域的技能差距。他们制作以行业为中心和导师指导的课程，如数据科学训练营和网络安全职业轨道。
https：//d3js.org/
交互式可视化可以为简单而枯燥的数据集添加令人印象深刻的魅力。交互式数据的主要特征在于它本身作为一种应用程序使用。它允许用户选择特定的数据点，以他们选择的方式可视化故事。实现这一目标的最有效方法之一是通过JavaScript，或者更具体地说，是D3.js框架。
D3（数据驱动文档）由Mike Bostock开发，是一个开源JavaScript库，利用SVG，HTML和CSS创建强大的数据可视化表示，使其生动。让我们看一下由D3.js提供支持的有趣且交互式可视化的示例！
科技公司IPO与公司价值
在上面的示例中，将鼠标悬停在特定的数据点上会启动弹出窗口，该弹出窗口表示有关该特定数据的更多信息。图表本身可以进一步动画，创建用户数据的令人兴奋的视图。在这里看到它。
https://archive.nytimes.com/www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
D3.js的主要特点
它使用预先存在的约定： D3.js使用诸如上述SVG，HTML和CSS之类的Web标准。就其本身而言，这一特殊功能可能看起来并不显着。但是，这允许跨平台轻松实现脚本，而无需除浏览器之外的其他技术或插件。它还允许数据可视化与其他脚本和JS框架统一应用，如Angular.js，Ember.js或React.js。换句话说，它可以在您的网站中顺利实施，而不会干扰其余的代码。最好的部分：D3很轻巧。它适用于任何Web标准，因此无论数据集的大小如何，它都很快。
它是数据驱动的： D3完全由数据驱动，通过输入静态数据或从远程服务器获取数据。这可以用无数种格式完成，从数组和对象到CSV，JSON和XML等。通过这种专业工具，可以轻松创建不同类型的图表。D3中数据驱动元素的大量使用也为数据提供动力，允许动态生成不同的元素和图表样式，无论是表格，图形还是任何其他类型的元素分组。
它是动态的：凭借其灵活性，D3可以成为一个非常强大的工具，因为它为几乎所有功能提供了最大的动态属性。然后，您输入到脚本中的数据可以轻松地形成该特定数据集的可视化所需的样式和属性类型。
https://www.jasondavies.com/coffee-wheel/
如果您真的想深入了解技术细节，这是使用d3.layout.partition布局生成从分层数据派生的可缩放旭日树的示例。甲旭日树是一个特殊的径向空间填充的可视化，其类似于一个冰柱树。
总而言之，D3允许用户基本上基于数据创建基本上任何类型的可视化，而不是基于对数据的个人理解。无论是表格还是饼图，图形或条形图，D3都可以通过简化数据可视化过程来避免人为错误，同时为用户提供调整和控制可视化功能的每个机会。
不仅如此，D3提供了通过类似功能的交互和动画充足的津贴duration()，delay()以及ease()允许用户以动画数据，就像添加视频到您的网站-在D3的情况下，不同之处在于它的流线型，并直接落实到你的网站。这些动画也快速响应用户交互，使其更具吸引力。
如何入门？
D3.js实现起来非常简单，只要你已经掌握了一些JavaScript基础知识。以下是使用交互式数据开始旅程的简化分步指南。
第1步：设置
D3的第一步是设置D3库，它作为D3代码绘制的信息和指令的存储库。它构成了数据可视化的基础，因此将这一步骤放在一边非常重要。
有两种方法可以做到这一点：
将D3库引入项目文件夹：由于D3是开源的，因此可以在D3网站上下载源代码。您所要做的就是解压缩下载的文件夹，查找d3.min.js并直接将其复制到项目的根文件夹中。然后，使用包含该d3.min.js文件在HTML页面中<script src =…>。这样，您的HTML网页现在可以访问<script>标记内D3库中的代码，并且可以轻松操作DOM元素。
从内容传送网络（CDN）引入D3库： CDN是托管文件的不同服务器的网络，这些文件根据其地理位置传送给用户。使用CDN，您甚至不需要源代码（就像使用第一种方法一样）。只是包括CDN URL使用<script src=…>
第2步：DOM元素
有了开源代码库，就可以根据样式和操作其他DOM元素来设置网页本身。使用d3.select（css-selector）或d3.selectAll（css-selector）获取DOM元素的引用非常重要。之后，应用众所周知的HTML和CSS约定，并且可以相应地实现这些元素。
DOM元素也可以通过诸如或的方法列表来操纵。这些与现有约定非常相似，因此从编码角度来看易于使用。您可以使用官方网站上的API参考中可以找到的不同脚本，以类似的方式添加动画和其他功能。text(“content”)remove()
开发此代码的关键点在于“链式语法”，如果您使用过JQuery，可能会对此很熟悉。D3中的链接技术是通过使用句点将方法放在一起来完成的。以这种方式，第一种方法的输出作为输入传递给下一种，简化了代码。
标准烛台图表股票价格
其数据驱动聚焦，D3可以轻松地创建烛台图，如这个。
https://beta.observablehq.com/@mbostock/d3-candlestick-chart
第3步：加载您的数据
下一步是加载数据集并将它们绑定到DOM元素。D3可以处理不同类型的文件，本地和外部。数据的上传是类似于HTML和CSS传统的数据加载，通过类似的方法d3.csv()对 .csv文件，d3.json()对于 .json文件等。
第4步：可视化数据
将数据成功加载到D3后，用户可以创建数据可视化中最重要的部分：可视化本身。
这可以以SVG的形式出现，它允许您的图表显示不同的形状，从直线到圆形到椭圆，并允许您完全控制以实现数据的理想可视化。本质上，SVG值的操作采用了非常类似于DOM元素操作的方法。
通过采取这些步骤，用户可以轻松创建有助于构建完整图表和图形的图像和形状。但是，这实际上并不构成真正的数据可视化。相反，需要通过D3操纵几何和样式来实现期望的结果。这也包括从图表的比例到其轴到图表的动画的任何内容。
但是，一旦掌握了D3.js技术，就可以轻松地将饼图从动态饼图移动到响应式条形图。
美国贸易逆差
上图显示了美国的贸易逆差。首次打开时，图表将根据时间轴（从2001年到2013年）移动。单击时间轴的任何部分会导致图表相应移动，显示该特定时间段的贸易赤字。仔细看看这里。
简而言之
总的来说，D3.js是一个非常强大和多功能的工具。
它包含许多功能，可以为数据科学家（经验丰富的和新的）提供对图表或图形外观的完全控制，使其成为任何希望掌握数据可视化的人最有影响力的工具之一。
https://towardsdatascience.com/interactive-data-visualization-with-d3-js-43fc3428a27e
