代码之家 › 专栏 › 技术社区 › sf_

如何在复杂数据中使用散点图?

crossfilter dc.js javascript

sf_ · 技术社区 · 8 年前

runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });

示例数据:

Expt Run Speed
1    1   850
1    2   740
1    3   900

我想使用相同的图表,但我有下一种格式的数据:

[
 {
  "Timestamp":"2016-12-15T17:29:53Z",
  "idgame":"euro",
  "users":{
    "Jo": {
      "energy":200,
      "jump_height":0.5
     },
    "Bob": {
      "energy":220,
      "jump_height":0.35
     }
  }
 },
 {
  "Timestamp":"2016-12-15T17:29:55Z",
  "idgame":"euro",
  "users":{
    "Jo": {
      "energy":120,
      "jump_height":0.15
     },
    "Bob": {
      "energy":240,
      "jump_height":0.75
     }
  }
 }
]

我需要建立下一个图表,其中x轴是 timestamp y轴为 jump_height

enter image description here

我的数据在交叉过滤器中已经准备好了,所以我无法更改它。

1 回复 | 直到 8 年前

Gordon 8 年前

我仍然不相信这是值得付出努力的,而不是咬紧牙关,把你的数据弄平,然后整理其他图表。如果你的数据不平坦,你将与交叉滤波器和直流电作斗争。js的每一步。

也就是说,像往常一样,这是可能的!

也许我们可以用一个假团队,但那会很复杂。相反,让我们为每个用户生成一个维度和组,然后使用合成图将它们缝合在一起。

首先,我们需要解析这些时间戳:

data.forEach(function(d) {
  d.Timestamp = new Date(d.Timestamp);
});

// retrieve all users from all events
var users = data.reduce(function(p, event) {
  return p.concat(Object.keys(event.users));
}, []);
users = d3.set(users).values();

在代码的其余部分中,我们假设每个事件都有相同的用户。他们可能会有所不同,但这增加了额外的复杂性,这个答案已经足够复杂了。如果你需要那个功能,请给我打电话!

我们将创建图表、交叉过滤器和将为用户分配符号的比例:

var chart = dc.compositeChart("#test");
var ndx = crossfilter(data);
var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes);

chart
  .width(768)
  .height(480)
  .x(d3.time.scale())
  .xUnits(d3.time.seconds)
  .elasticX(true)
  .elasticY(true)
  .brushOn(false)
  .clipPadding(10)
  .shareTitle(false) // allow default scatter title to work
  .shareColors(true) // but use different colors for subcharts
  .legend(dc.legend().x(350).y(350).itemHeight(13)
          .gap(5).horizontal(1).legendWidth(140).itemWidth(70));

我们用时间刻度设置X轴,分辨率为秒。两个轴都有弹性。我们需要共享颜色,以便为每个子图分配自己的颜色。(图例可能是指定过度了-我从另一个示例中复制了这一点。)

最后我们谈到了它的实质。对于每个用户,我们将创建一个子图,并告诉复合图组成所有子图:

chart.compose(users.map(function(user) {
  var userDimension = ndx.dimension(function(d) {
    return [d.Timestamp, d.users[user].jump_height];
  })
  var jumpGroup = userDimension.group();
  console.log(user, jumpGroup.all());
  var scatter = dc.scatterPlot(chart)
    .symbol(symbolScale(user))
    .dimension(userDimension)
    .group(jumpGroup)
    .colorAccessor(function() { return user; })
    .symbolSize(8)
    .highlightedSize(10);
  return scatter;
}))

jump_height )一旦我们了解了用户。一旦我们克服了这一点,团队就变得简单了。

这是一把小提琴: https://jsfiddle.net/gordonwoodhull/3m4mv3xf/19/