Гистограмма с порядковыми данными - PullRequest
Новая
       26

Гистограмма с порядковыми данными

0 голосов
/ 22 октября 2019

У меня есть набор данных с цветами, и я хочу показать, сколько записей каждого цвета у меня есть в текущем наборе данных.

После форматирования моего набора данных это массив строк: 

const colors = [
    'red',
    'green',
    'blue',
    'red',
    'red',
    'green'
]

Я хочу сделать шкалу, которую я могу вставить в макет гистограммы. Шкала должна помочь макет для создания ряда ячеек. После подачи данных в генератор гистограмм я ожидаю получить массив из 5 записей. Каждый объект в массиве должен иметь свойство x0 и x1.

Это то, что я ожидаю после прочтения документации. Кстати, это то, что я ожидаю в качестве моего окончательного результата:

enter image description here

Вот так выглядит мой код: 

const width = container.node().getBoundingClientRect().width
const xScale = d3.scaleOrdinal().domain(colors).range([0, width])
const histogramGenerator = d3.histogram()

histogramGenerator
  .domain(xScale.domain())
  .tresholds(xScale.domain().length)

const histogramData = histogramGenerator(colors)

Фактический результат выглядит так: 

[Array(0)]
  0: [x0: "red", x1: "blue"]
  length: 1
  __proto__: Array(0)

Я не хочу использовать гистограмму, вся причина этого эксперимента состоит в том, чтобы научиться использовать гистограмму d3 с порядковыми данными, такими как этот набор данных цветов.

1 Ответ

0 голосов
/ 23 октября 2019

К сожалению, "гистограмма с порядковыми данными" по определению невозможна. Вместо этого вам нужна гистограмма . Цитируя статью Википедии о гистограмме,

Гистограмма - точное представление распределения числовых данных. Это оценка распределения вероятности непрерывной переменной , впервые введенная Карлом Пирсоном.

Акцент на непрерывную переменную принадлежит мне.

Если вы посмотрите на d3.histogram исходный код (теперь переименован в d3.bin), вы увидите, что он ожидает числовые значения: 

// Assign data to bins by value, ignoring any outside the domain.
for (i = 0; i < n; ++i) {
  x = values[i];
  if (x0 <= x && x <= x1) {
    bins[bisect(tz, x, 0, m)].push(data[i]);
  }
}

Имеетвзгляните конкретно на x0 <= x && x <= x1.

Я вижу, что вы написали "Я не хочу использовать гистограмму, вся причина этого эксперимента - научиться использовать гистограмму d3" . В этом случае выберите правильные данные , то есть набор данных с непрерывной переменной.

Решение для гистограммы:

Все, что говорится, канаваэтот генератор гистограмм и создать старый добрый гистограммы. Для этого все, что вам нужно, это манипулировать данными тура. Например, давайте используем Array.prototype.reduce для создания массива объектов, с colour и count.

Предположим, этот массив данных: 

const colors = ['red', 'green', 'blue', 'red', 'red', 'green', 'yellow', 'pink', 'red', 'green', 'yellow', 'pink', 'pink', 'green', 'blue', 'green', 'blue', 'green', 'green', 'green', 'green'];

Мы можем манипулировать этим так: 

const colors = [
  'red',
  'green',
  'blue',
  'red',
  'red',
  'green',
  'yellow',
  'pink',
  'red',
  'green',
  'yellow',
  'pink',
  'pink',
  'green',
  'blue',
  'green',
  'blue',
  'green',
  'green',
  'green',
  'green'
];

const data = colors.reduce((acc, curr) => {
  const foundObject = acc.find(e => e.colour === curr);
  if (foundObject) ++foundObject.count;
  else acc.push({
    colour: curr,
    count: 1
  });
  return acc;
}, []);

console.log(data)

Теперь вы можете использовать этот массив данных для создания гистограммы с colours в качестве категориальной переменной на оси x и count в качестве количественнойпеременная по оси y.

...