От команды 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. В нашем примере мы используем следующие настройки подключения:
- Имя хоста: localhost
- Порт: 5432
- Имя пользователя: postgres
- Пароль:
- Имя базы данных: acme_webapp
Затем мы создаем набор данных, который читает из источника данных ACME PostgreSQL.
- Перейдите в раздел «Наборы данных» и создайте новый набор данных.
- Мы называем это деятельностью ACME.
- Прокрутите страницу вниз и нажмите «Добавить SQL-запрос».
Точки необработанных данных записывают только событие. Нам нужно сгруппировать и подсчитать данные, происходящие в течение нескольких дней. Мы используем следующий SQL-запрос:
ВЫБЕРИТЕ TO_CHAR (created_at, ‘MM / DD / YYYY’) AS created, count (*) FROM activity GROUP BY created ORDER BY created;
Набор данных результата содержит следующие данные:
Теперь создадим визуализацию календарной карты кликов.
- Перейдите в раздел «Документы» и нажмите кнопку «Новый документ».
- Выберите «Импортировать Vida» в настраиваемом разделе. Мы используем шаблон Calendar Heatmap от vida.io.
- Вставьте следующий идентификатор документа «Fmhxf9jxed5GY993X» и нажмите «Импорт». Приложение перенесет нас к импортированному документу.
- Щелкните вкладку «Данные» и выберите «Внешняя ссылка» в меню «Наборы данных». Примечание: эта функция доступна только для подписанных пользователей. Свяжитесь с нами, если у вас возникнут вопросы.
- Выберите набор данных «Действия ACME», который мы создали ранее.
- Щелкните Сохранить, чтобы обновить документ.
Окончательная визуализация выглядит так, как показано ниже.
Вот видео-демонстрация всего процесса: