使用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中文網其他相關文章！