重新使用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

回答

相关问题