От команды Vida Lab: https://vida.io

Оригинальная статья из блога vida.io: http://blog.vida.io/2016/11/06/connect-d3-dot-js-visualization-with-sql-database/

Поддерживаемые базы данных SQL: PostgreSQL, MySQL, MS SQL Server.

Визуализации D3.js часто используют файлы данных CSV, которые загружаются в браузер. В этой статье мы расскажем, как подключиться к базе данных SQL на vida.io и использовать D3.js для визуализации данных.

База данных содержит данные для просмотра активности сайта. Мы используем календарную тепловую карту, чтобы визуализировать частоту по месяцам. Таблица необработанных данных имеет 3 столбца: представления, created_at и updated_at.

Первый шаг, который нам нужно сделать, - это подключиться к базе данных PostgreSQL. После входа в систему мы переходим в раздел «Источники» и создаем новый источник данных. Мы называем это ACME PostgreSQL. В нашем примере мы используем следующие настройки подключения:

  1. Имя хоста: localhost
  2. Порт: 5432
  3. Имя пользователя: postgres
  4. Пароль:
  5. Имя базы данных: acme_webapp

Затем мы создаем набор данных, который читает из источника данных ACME PostgreSQL.

  1. Перейдите в раздел «Наборы данных» и создайте новый набор данных.
  2. Мы называем это деятельностью ACME.
  3. Прокрутите страницу вниз и нажмите «Добавить SQL-запрос».

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

ВЫБЕРИТЕ TO_CHAR (created_at, ‘MM / DD / YYYY’) AS created, count (*) FROM activity GROUP BY created ORDER BY created;

Набор данных результата содержит следующие данные:

Теперь создадим визуализацию календарной карты кликов.

  1. Перейдите в раздел «Документы» и нажмите кнопку «Новый документ».
  2. Выберите «Импортировать Vida» в настраиваемом разделе. Мы используем шаблон Calendar Heatmap от vida.io.
  3. Вставьте следующий идентификатор документа «Fmhxf9jxed5GY993X» и нажмите «Импорт». Приложение перенесет нас к импортированному документу.
  4. Щелкните вкладку «Данные» и выберите «Внешняя ссылка» в меню «Наборы данных». Примечание: эта функция доступна только для подписанных пользователей. Свяжитесь с нами, если у вас возникнут вопросы.
  5. Выберите набор данных «Действия ACME», который мы создали ранее.
  6. Щелкните Сохранить, чтобы обновить документ.

Окончательная визуализация выглядит так, как показано ниже.

Вот видео-демонстрация всего процесса: