重新使用D3大的CSV數據集nvd3

我有一個CSV數據集同一項目多次提及（即衝突的名字 - 英格蘭愛爾蘭共和軍，巴勒斯坦，以色列等），以及日期和number_of_casualties每個指定日期的值。重新使用D3大的CSV數據集nvd3

我想表達的這種使用nvd3堆積面積圖： http://nvd3.org/examples/stackedArea.html

，它在本例中使用的格式爲：

key : "category a" 
values: [ [ date , amount ] , [ date , amount ] ....]

這裏的一些FO該示例中的實際代碼：

{ 
      "key" : "Energy" , 
      "values" : [ [ 1138683600000 , 1.544303464167] , [ 1141102800000 , 1.4387289432421] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 1.328626801128] , [ 1154318400000 , 1.2874050802627] , [ 1156996800000 , 1.0872743105593] , [ 1159588800000 , 0.96042562635813] , [ 1162270800000 , 0.93139372870616] , [ 1164862800000 , 0.94432167305385] , [ 1167541200000 , 1.277750166208] , [ 1170219600000 , 1.2204893886811] , [ 1172638800000 , 1.207489123122] , [ 1175313600000 , 1.2490651414113] , [ 1177905600000 , 1.2593129913052] , [ 1180584000000 , 1.373329808388] , [ 1183176000000 , 0] , [ 1185854400000 , 0] , [ 1188532800000 , 0] , [ 1191124800000 , 0] , [ 1193803200000 , 0] , [ 1196398800000 , 0] , [ 1199077200000 , 0] , [ 1201755600000 , 0] , [ 1204261200000 , 0] , [ 1206936000000 , 0] , [ 1209528000000 , 0] , [ 1212206400000 , 0] , [ 1214798400000 , 0] , [ 1217476800000 , 0] , [ 1220155200000 , 0] , [ 1222747200000 , 1.4516108933695] , [ 1225425600000 , 1.1856025268225] , [ 1228021200000 , 1.3430470355439] , [ 1230699600000 , 2.2752595354509] , [ 1233378000000 , 2.4031560010523] , [ 1235797200000 , 2.0822430731926] , [ 1238472000000 , 1.5640902826938] , [ 1241064000000 , 1.5812873972356] , [ 1243742400000 , 1.9462448548894] , [ 1246334400000 , 2.9464870223957] , [ 1249012800000 , 3.0744699383222] , [ 1251691200000 , 2.9422304628446] , [ 1254283200000 , 2.7503075599999] , [ 1256961600000 , 2.6506701800427] , [ 1259557200000 , 2.8005425319977] , [ 1262235600000 , 2.6816184971185] , [ 1264914000000 , 2.681206271327] , [ 1267333200000 , 2.8195488011259] , [ 1270008000000 , 0] , [ 1272600000000 , 0] , [ 1275278400000 , 0] , [ 1277870400000 , 1.0687057346382] , [ 1280548800000 , 1.2539400544134] , [ 1283227200000 , 1.1862969445955] , [ 1285819200000 , 0] , [ 1288497600000 , 0] , [ 1291093200000 , 0] , [ 1293771600000 , 0] , [ 1296450000000 , 1.941972859484] , [ 1298869200000 , 2.1142247697552] , [ 1301544000000 , 2.3788590206824] , [ 1304136000000 , 2.5337302877545] , [ 1306814400000 , 2.3163370395199] , [ 1309406400000 , 2.0645451843195] , [ 1312084800000 , 2.1004446672411] , [ 1314763200000 , 3.6301875804303] , [ 1317355200000 , 2.454204664652] , [ 1320033600000 , 2.196082370894] , [ 1322629200000 , 2.3358418255202] , [ 1325307600000 , 0] , [ 1327986000000 , 0] , [ 1330491600000 , 0] , [ 1333166400000 , 0.39001201038526] , [ 1335758400000 , 0.30945472725559] , [ 1338436800000 , 0.31062439305591]] 
     }

有兩個問題請問：

如何我聚集和我的CSV格式的數據向格式？
什麼時間格式是什麼？

來源

2017-08-06 Tom Bar-Gal

不知道你的（如衝突>日期或日期>衝突，或別的東西）想要什麼組。我會檢查出d3.nest（）並回來，如果你有問題的話 –

問題的答案，

聚集，切片和切塊大型數據集的D3圖表看看Crossfilter。

Crossfilter是一個JavaScript庫，用於在瀏覽器中探索大型多元數據集。 Crossfilter支持極快（< 30毫秒）與協調意見的互動，甚至與含萬以上記錄的數據集;

這是一個被Rusty.io從Crossfilter Tutorial採取了一個例子：

var livingThings = crossfilter([ 
    // Fact data. 
    { name: 「Rusty」, type: 「human」, legs: 2 }, 
    { name: 「Alex」, type: 「human」, legs: 2 }, 
    { name: 「Lassie」, type: 「dog」, legs: 4 }, 
    { name: 「Spot」, type: 「dog」, legs: 4 }, 
    { name: 「Polly」, type: 「bird」, legs: 2 }, 
    { name: 「Fiona」, type: 「plant」, legs: 0 } 
]); 

// How many living things are in my house? 
var n = livingThings.groupAll().reduceCount().value(); 
console.log(「There are 」 + n + 「 living things in my house.」) // 6 

// How many total legs are in my house? 
var legs = livingThings.groupAll().reduceSum(function(fact) { return fact.legs; }).value() 
console.log(「There are 」 + legs + 「 legs in my house.」) // 14

你可以找到一些教程如何到達這裏開始：

Crossfilter Tutorial通過Rusty.io
Getting to know Crossfilter通過彼得庫克

日期1138683600000是目前的Unix時間戳。

您可以定義如何將日期顯示在傳遞到圖表中時的顯示方式。檢查StackOverflow上這個答案如何Format the date in nvd3.js

下面是一個例子：

chart.xAxis.tickFormat(function(d) { 
    // Will Return the date, as "%m/%d/%Y"(08/06/13) 
    return d3.time.format('%x')(new Date(d)) 
});

希望它能幫助。

來源

2017-08-07 11:15:24 shabeer90

重新使用D3大的CSV數據集nvd3

回答

相關問題