3 (X, Y и Z) с использованием D3.js

Я ищу график, который имеет 3 измерения (X, Y и Z) на D3.js. Пожалуйста, дайте мне знать, есть ли сайт визуализации данных, где я могу найти такой график, или есть один на d3js.org, если я что-то пропустил.

Ответы

Ответ 1

Трехмерная диаграмма рассеяния, связанная с VividD и Lars Kotthoff, вероятно, является лучшим примером того, что вы просите, но я буду противным и предположим, что, возможно, вы задаете неправильный вопрос.

Попытка имитировать три пространственных измерения на плоском экране всегда будет несовершенной и затрудняет чтение данных. Тем не менее, очень просто нарисовать три разных размера данных в D3. Вы используете горизонтальные и вертикальные макеты для двух переменных данных, а затем размер, форму, цвет или затенение для вашей третьей переменной.

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

В этом примере также используется интерактивный интерактивный компонент для добавления четвертого измерения, отображаемого с помощью движения:
Bubble Scatterplot Bumpble Scatterplot - нажмите для оригинала

Вы сказали, что ваши три измерения: Клиент, Продукт и контент. Я не знаю, какое значение имеет "контент" (число или категория), но я уверен, что "клиент" и "продукт" являются категориями.

Здесь пример, когда для выкладки таблицы используются два категориальных размера, каждая ячейка таблицы содержит круг, размер которого определяется третьим, численным измерением. Если ваша третья переменная является категорией, вы можете использовать фигуру, чтобы указать, какой тип "контента" (если есть) идет с каждым спариванием "клиента" и "продукта":
Bubble Matrix
Bubble Matrix - нажмите для оригинала

Здесь еще один, где третье измерение отображается цветом, а не размером. Цвета представляют непрерывную переменную, но вы можете легко выбрать набор высококонтрастных цветов для представления категорий:
Colour Matrix Матрица цветов - нажмите для оригинала

Конечно, простая старая гистограмма - это еще один способ показать две категории и числовое число:
Stacked Bar Graphs Сложенные столбчатые диаграммы - нажмите для оригинала

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

Вот так:
Scatterplot Matrix Матрица Scatterplot - нажмите для оригинала

Или это (где неделя и день недели являются двумя измерениями данных, а категория/сумма - две другие):
Pie Chart Small Multiples
Круговая диаграмма Small Multiples - нажмите для оригинала

Надеюсь, это дало вам массу идей...

Ответ 2

Один пример, похожий на то, что вы ищете:

График 3D-рассеяния

enter image description here

Помните, что в этом примере используется X3DOM, довольно новая попытка стандартизировать 3D-рендеринг в HTML, который не поддерживается всеми браузерами.

Некоторые дополнительные тестовые примеры использования D3.js с X3DOM:

X3DOM в обратном вызове

Тест событий D3 X3DOM

Искать также для X3DOM в группе D3 Google.

Другим потенциально интересным подходом будет использование D3.js и Three.js, как здесь:

Отображение треков GPS в 3D с помощью тэгов. js и d3.js

В целом, D3.js ориентирован скорее на визуализацию данных, чем на научную визуализацию, это означает, что у него нет обширной поддержки для отображения 3D-пространства (за исключением отображения географических 3D-данных, которые D3.js поддерживает превосходным образом, но вам это не нужно).

Например (этот пример не относится непосредственно к вашим примерам, его просто для объяснения): D3 предоставляет алгоритм для 2D-рисования деревьев, но не предоставляет ничего для 3D-размещения деревьев и рендеринга такого размещения на 2D-экране.

Если вы не ограничены D3.js, возможно, вы могли бы достичь таких же целей легче и быстрее с другими библиотеками, написанными специально для целей, подобных вашим. Например, вы можете использовать Pre3D. Взгляните на этот пример. Pre3D не использует X3DOM, просто HTML-рендеринг на 2D-холсте. Я думаю, что анимация (вращение) его 3D-графиков более плавная, чем в первом примере D3/X3DOM.

Надеюсь, это поможет вам.

Ответ 3

Лучшие примеры, которые я мог найти (которые были невероятно просты):

Highcharts (3d-разброс)

http://www.highcharts.com/demo/3d-scatter-draggable

Vis.js (различные 3D-опции, такие как строка и точка)

http://visjs.org/examples/graph3d/playground/index.html

Просто поставьте координаты x, y и z, настройте конфигурацию так, как вам нравится, и вы смеетесь.

Ответ 5

Stefan Nieke в последнее время тоже делает классный материал с его плагином d3-3d: https://bl.ocks.org/Niekes