Как использовать точечную диаграмму со сложными данными?

Я все еще не убежден, что это стоит усилий, против кусания пули и сглаживания ваших данных и фиксации других карт. Если ваши данные не плоские, вы будете бороться с crossfilter и dc.js на каждом шагу.

При этом, как обычно, это возможно!

Мы не можем использовать серию диаграмм, потому что для этого требуется, чтобы все данные присутствовали в одной группе. Но поскольку вы хотите создавать несколько символов из каждой строки данных, обычная группа перекрестных фильтров не может создавать нужные вам данные.

Возможно, мы могли бы использовать поддельную группу, но это было бы сложно. Вместо этого дайте возможность создавать размер и группу для каждого пользователя, а затем сшить их вместе с помощью составной диаграммы.

Во-первых, нам нужно проанализировать эти временные метки:

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

Затем мы получим список всех пользователей, вытаскивая пользовательские ключи из каждого события (timestamp), объединяя их, а затем используя набор d3.set для их уникальности:

// 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;
}))

Мы создаем новое измерение для каждого графика. Это связано с тем, что график рассеяния dc.js предполагает, что ключи включают в себя как координаты X, так и Y, и мы можем получить доступ только к координате Y (jump_height), как только мы узнаем пользователя. Как только мы закончим это, группа проста.

График назначит символ и цвет на основе пользовательского ключа. Они оба работают одинаково; порядковый масштаб присваивает новое значение из диапазона для каждого нового значения, которое он встречает в домене. Единственное различие заключается в том, что мы используем цветовую шкалу по умолчанию, тогда как нам пришлось указывать нашу собственную шкалу символов.

Здесь скрипка: https://jsfiddle.net/gordonwoodhull/3m4mv3xf/19/