使用Dimple和D3在JavaScript中创建数据可视化

>万维网将大量数据触手可及。由于这些数据的庞大卷，以脱颖而出或以传达信息的方式呈现它通常会很棘手。这是数据可视化的地方。

> 在本文中，我将使用Dimple.js JavaScript库来指导您创建数据可视化，即美国车辆召回了2015年1月的月份。

钥匙要点

可以使用JavaScript和Dimple.js库（建立在D3.js）以引人入胜的方式显示大量数据。 该过程涉及设定目标，使用数据并将数据绑定到D3对象；在这种情况下，创建了一张钢筋图，描绘了制造商在2015年1月创建了车辆召回的总数。

数据清理和制备对于成功的数据可视化至关重要；这包括提取相关数据，将列还原为可用数据的子集，以及根据特定标准手动分组数据。

。
• d3.js库为各种数据文件格式（例如CSV，TSV或JSON）提供现成的支持，并可以将它们转换为用于处理的JavaScript数组。 可以添加其他功能，例如工具提示，美学过渡和标签操作，以增强数据可视化和用户交互。
• 设定目标
• > NHTSA
/ODI
• 提供一个自1967年以来包含所有与NHTSA安全相关的缺陷和合规性活动的召回文件（可以通过其网站访问）。我们的目标是提取给定月份的数据（ 2015年1月），并从中创建一个条形图，描绘了制造商的车辆召回总数。
观看使用D3.J的可视化数据 用JavaScript说明您的数据
• 观看此课程 观看此课程
这个数据可视化将不会是解释性的（我们将显示原始数据），几乎没有探索性（观众对从该数据构建的叙述不多）。但是，我的确打算在用户徘徊在其中一个栏上时在图表旁边显示其他信息。

>

这就是我们最终得到的：

>您可以在文章末尾看到（较小的）实时演示，或在Codepen上查看原件。

使用数据

仅保留我们需要的数据

>本节中提到的所有文件都可以在我们的github repo上找到。

>

原始文件flat_rcl.txt（link）是一个选项卡分离的值文件，其中包含alot 的数据-109,682记录。 有一个随附的文件rcl.txt（链接），详细介绍了与此数据有关的列。

我们只对2015年1月的数据感兴趣，或者是记录创建日期为2015年1月的记录，可以删除其余记录。为此，我使用的是OpenOffice CalcEversheet程序（尽管任何其他电子表格软件都足够）。结果文件RCL_JANUARY_2015.CSV（链接）仅计算201条记录。

我们现在需要将列减少到可用的列的子集中：

> 记录创建日期，制造商，模型，模型年，开始制造日期，制造的结束日期，受影响的单位的潜在数量，缺陷摘要，后果摘要和纠正摘要。 然后，我们可以将列名添加到结果CSV文件的第一行，RCL_JANUARY_2015_CLEAN.CSV（link）。
这为我们提供了可视化所需的原始数据。

>

创建数据结构

>现在，我们需要手动将召回者按照制造商进行分组，并将那些具有相同缺陷的记录组合在一起。我们需要确保按日期按日期对组合记录进行排序，然后按模型对其进行累积潜在的影响。

我们将使用JSON数据结构进行此分组。

> 为了说明这一点，让我们处理rcl_january_2015_clean.csv文件的前三个条目。这些可以分为一条线，说明MCI的J4500从2013年，2014年和2015年开始，它们具有相同的制造年份，呈现出相同的缺陷。受影响的单位的潜在数量已经在数据集中的这三个模型组合在一起。>

这是我们将要使用的JSON数据结构：

>迭代此过程（并逃脱了双引号）后，我们现在拥有CSV文件（link）。为了简洁起见，我们的工作示例将仅显示原始文件的前三个制造商（46个中的3个）。 >将数据绑定到D3对象

> D3提供有关数据文件格式的现成支持，例如CSV，TSV或JSON。执行AJAX调用以获取文件，然后将其解析并转换为JavaScript数组。我们创建的CSV文件可以使用以下代码获取：

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

>

>我们还可以直接在代码中定义JavaScript数组，我们将在此处为Codepen演示而进行此操作。数据结构已尽可能与数组D3创建的数组。

现在，让我们潜入！

>

html很简单：两个divs，一个用于图表（召回），另一个用于显示其他详细信息，如果用户徘徊在其中一个bars上（ReckerDetails）。

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

>我们首先将SVG对象添加到DIV元素，并通过其ID引用它。然后，我们将数据链接到我们的新图表，该图表将在SVG中渲染。最后，我们手动设置图表范围，以正确定位其在其父div中的位置。

d3<span>.csv("RCL.csv", function (data) {
</span>  <span>// process the data
</span><span>});</span>

>我们将图表的X轴设置为数据的制造商字段 - 我们使用AddCategoryAxis方法作为制造商构成分类数据。我们使用addorderrule方法按字母顺序订购制造商，然后隐藏X轴标题（本来是制造商），因为制造商名称是自称的。

>我们将图表的Y轴设置为受影响的单位的潜在数量，该单位数量。我们本可以在此处使用addMeasureAxis方法，该方法定义了给定值的线性轴，但是由于制造商的胜利比MCI或Thor的潜在单位数量是受影响的单位数量的20倍以上，因此所得的列将使其他两个相形见war。 。在这种情况下，对数刻度为较小的值提供了更多的空间，因此我们使用addlogaxis方法，该方法默认为基础10。>

data <span>= [
</span>  <span>{
</span>    <span>'Record creation date':'20150105',
</span>    <span>'Maker':'MCI',
</span>    <span>'Potential number of units affected':'109',
</span>    <span>'JSON data': '{
</span>      <span>"items":[
</span>        <span>{
</span>          <span>"item": {
</span>            <span>"date":"January, 5 2015",
</span>            <span>"models":[
</span>              <span>"J4500 (years 2013, 2014, 2015) ..."
</span>            <span>],
</span>            <span>"units":"109",
</span>            <span>"defect":"...",
</span>            <span>"consequence":"...",
</span>            <span>"corrective":"..."
</span>          <span>}
</span>        <span>}
</span>      <span>]
</span>    <span>}'
</span>  <span>},
</span>  <span>...
</span><span>];</span>

>现在我们已经定义了轴，我们可以将它们绑在一起以呈现图形。为此，我们通过Dimple.plot.bar选择条形图，然后将其绑定到Maker数据字段。第二个数组元素JSON DATA将把数据的JSON部分连接到每个栏，并使我们在用鼠标悬停在栏上时访问正确的数据。

<span><span><span><div> id<span>="RecallsChart"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="RecallDetails"</span>><span><span></span></span>
</div></span>></span></span>

默认情况下，用鼠标悬停在绘图单元（此处为bar）上并显示轴和串联数据时显示工具提示。在我们的情况下：制造商（X轴值），受影响的单位的潜在数量（Y轴值）以及我们的JSON数据的纯文本值。

<span>var svg = dimple.newSvg("#RecallsChart", 800, 560);
</span><span>var myChart = new dimple<span>.chart</span>(svg, data);
</span>myChart<span>.setBounds(60, 30, 710, 355)</span>

> getToolTipText功能在此处重载，以处理JSON数据并将其显示在另一个DIV中。它返回要显示作为工具提示的数据数组，即制造商的名称（我们的数据线的第一个集合字段）和受影响的单位数（我们从Y轴上获得的数量，以及我们本地化的，通用英语数字格式通过内置的tolocalestring JavaScript方法）。

>

，但让我们回到JSON数据解析。

>

>我们要访问的两个汇总字段（AggField [0]和AggField [1]）与我们先前设置为系列的数据字段数组匹配（[“ Maker”，“ JSON Data”]），Aggfield本身就是属性基础元素对象。

>我们使用JQuery的Parsejson函数解析JSON字符串，设置一个符合JSON对象键的全长标题数组召回尾巴。

>我们最终使用一秒钟延迟的弹性轻松绘制审美跃迁。

<span>var x = myChart.addCategoryAxis("x", "Maker");
</span>x<span>.addOrderRule("Maker");
</span>x<span>.title = '';</span>

我终于说了吗？好吧，在这里，我们在X轴标签中添加了另一个美学技巧。

>默认情况下，X轴标签是水平编写的。但是它们可以轻松重叠，因此我们将垂直写下它们。这是Dimple对其基础D3物体暴露的地方。请注意，我们只能在绘制图表后才将其更改，因此在MyChart.Draw（）呼叫之后。 为此，我们首先选择每个标签文本，或者选择链接到每个标签的X轴的匹配SVG形状。 getBbox（）方法属于InterfaceVglocatable，并返回一个定义边界框，公开其坐标，高度和宽度的SVGRECT对象。然后，我们执行SVG盒的旋转，并进行轻微的垂直翻译，以使其更靠近X轴线。

>这是最终结果：

>

请参阅Codepen上的SitePoint（@sitepoint）2015年1月的笔车辆。

为了将这笔笔的宽度降低，以便将其适合文章。您可以在此处看到原始Codepen

结论

在本文中，我们看到了如何清理和准备数据以进行数据可视化，特别定义了数据结构以匹配我们想到的最终结果。我们同时使用了Dimple.js和D3.js库，对JQuery的一些有限的调用（主要与JSON处理有关）。我们从数据中绘制了条形图，并通过超载Dimple的工具提示功能来进行一些探索性交互。我们还访问了基础D3对象来操纵X轴标签。

>作为附带说明，现在已广泛支持SVG，但是最好事先检查它（例如，使用ModernIzr）进行检查，并在需要时提供诸如PNG图像之类的后备。当然，还应考虑D3.js和Dimple.js的条件加载。

如果您想深入研究数据可视化，Udacity提供了一个自定价的MOOC标题为数据可视化和D3.js，涵盖可视化概念，D3.js和Dimple.js的使用，叙事结构和动画。此外，如果您想了解该库背后的概念，而Mike Bostock的网站（D3.js的创建者）是理想的来源，而Dimple和D3都提供了一个示例列表。

经常询问有关使用JavaScript，Dimple和D3

>创建数据可视化的问题（常见问题解答）

>如何使用Dimple和D3？

创建多行图表，使用Dimple创建多行图和D3涉及多个步骤。首先，您需要设置HTML文件，并包括D3和Dimple库。然后，您需要加载数据，这些数据可以采用各种格式，例如CSV，JSON或TSV。加载数据后，您可以创建一个新的SVG对象并设置其尺寸。之后，您可以创建一个新的Dimple图，指定轴并为每个数据系列添加行。最后，您可以自定义图表的外观并在需要时添加交互性。

> d3和Dimple代码之间的差异是什么？可视化，但它们有一些差异。 D3是一个低级库，提供了很大的灵活性和控制力，但它可能是复杂且冗长的。另一方面，Dimple构建在D3的顶部，并提供了一个更高级别的API，该API简化了创建图表的常见类型（包括线图）的过程。但是，对于更复杂或自定义的可视化，它可能不提供D3的灵活性。

>

>如何将交互性添加到我的Dimple图表？

>将交互性添加到DIMPLE图表中可以增强用户的用户经验并提供其他见解。当用户徘徊在数据点上时，您可以添加可以显示更多信息的工具提示。您还可以添加响应用户操作的事件侦听器，例如点击或鼠标移动。例如，当用户单击它时，您可以突出显示一条行或显示数据的详细视图。

我如何自定义我的Dimple图表的外观？用于自定义图表的外观。您可以更改元素的颜色，字体和大小。您还可以调整秤和轴以更好地表示您的数据。例如，您可以使用对数刻度量表来跨越几个数量级的数据，也可以旋转X轴上的标签以获得更好的可读性。

>

>我如何在DIMPLE中处理缺失或不一致的数据？

处理丢失或不一致的数据是数据可视化的重要组成部分。 Dimple提供了几种处理此类数据的方法。您可以使用Dimple.filterdata（）方法来过滤不需要的值，也可以使用Dimple.AddMeasureAxis（）方法汇总数据并填充缺失值。您也可以使用D3的数据操纵功能在可视化数据之前清洁和预处理您的数据。

>如何使用Dimple和D3？

创建带有DIMPLE的条形图和D3的条形图涉及创建线路图的类似步骤。您需要加载数据，创建SVG对象并创建新的Dimple图。但是，您没有添加线条，而是使用Dimple.Addseries（）方法添加条。您还可以自定义条形的外观并根据需要添加交互性。

>

如何将我的Dimple图作为图像或pdf？

>导出Dimple图作为图像或PDF可以对于共享或显示您的数据可视化有用。您可以使用D3的Node（）方法获取图表的SVG元素，然后使用Canvg或JSPDF之类的库将SVG转换为图像或PDF。请注意，这可能需要其他设置和依赖关系。

如何使我的Dimple Chart动画？

动画DIMPLE图表可以使您的数据可视化更具吸引力和动态性。您可以使用D3的过渡方法来对数据或图表的外观进行动画更改。例如，当数据更改时，您可以在线图中的行中进行动画线条以平稳从一个状态过渡到另一个状态。带有Dimple和D3的散点图涉及创建线路图或条形图的类似步骤。您需要加载数据，创建SVG对象并创建新的Dimple图。但是，您没有添加线条或条，而是使用Dimple.Addseries（）方法添加点。您还可以自定义点的外观并根据需要添加交互性。

如何使用DIMPLE和D3？

>创建带有DIMPLE和D3的饼图涉及类似步骤的饼图创建其他类型的图表。您需要加载数据，创建SVG对象并创建新的Dimple图。但是，您没有添加线条，条或点，而是使用Dimple.Addseries（）方法添加派。您还可以自定义派的外观并根据需要添加交互性。

>

以上是使用Dimple和D3在JavaScript中创建数据可视化的详细内容。更多信息请关注PHP中文网其他相关文章！