В этом уроке мы узнаем, как визуализировать данные с помощью Google Charts, бесплатной службы диаграммы и библиотеки JavaScript от Google. Мы также будем использовать Cube, API с открытым исходным кодом для создания приложений данных, чтобы обеспечить доступ к публичному набору данных с помощью данных музея современного сбора искусств. В конце концов, у нас будет приборная панель с чартами, которые рассказывают все о современных произведениях Moma.
Вот как будет выглядеть конечный результат:
Хотите попробовать? Вот живая демонстрация Вы можете использовать сразу. Кроме того, полный исходный код доступен на GitHub.
Теперь мы все готовы. Пожалуйста, проверьте свой билет и перейдите на этаж 1, диаграмма галереи 🎫
Что такое диаграммы Google?
Google Charts-это сервис Google, который предоставляет богатый выбор типов визуализации данных, отображает диаграммы с использованием HTML5 и SVG, обеспечивает совместимость кросс-браузера и кроссплатформенную переносимость (что означает, что диаграммы выглядят хорошо как на рабочем столе, так и на мобильных устройствах).
Почему это Служба диаграммы , не библиотека диаграммы ? Действительно, диаграммы Google предоставляют библиотеку JavaScript, которая принимает данные и отображает диаграммы на веб -странице. Однако, в отличие от других инструментов визуализации данных, диаграммы Google не отображают все диаграммы на стороне клиента. Вместо этого, для некоторых графиков, они передают данные на серверы Google, отображают там диаграмму, а затем отображают результат на странице.
Такой подход имеет свои плюсы:
- Код рендеринга зависит от браузера и платформы, который обеспечивает повышенную совместимость и мобильность. Если он будет отображаться один раз, он будет отображаться в любое время.
- Размер библиотеки JavaScript фиксирован и не зависит от используемых функций. И на самом деле это действительно крошечное – менее 20 КБ (GZIPPED).
Но у него также есть свои минусы:
- Для некоторых графиков данные должны быть загружены на серверы Google для отображения диаграммы. Если вы имеете дело с конфиденциальными данными, пожалуйста, проверьте Google APIS Условия обслуживания Анкет Кроме того, обязательно всегда проверяйте Политика данных Разделы в документах. В этом уроке мы будем использовать публичный набор данных, так что это не имеет большого значения.
Какие графики доступны? Среди обычных подозреваемых, таких как линейные диаграммы, барные диаграммы или круговые диаграммы, вы можете найти несколько отличительных:
- Календарные диаграммы что вы, должно быть, видели много раз в профилях Github.
- Гантт диаграммы что вы, возможно, хотели бы никогда не встречаться из -за их сродства к «корпоративному программному обеспечению».
- Диаграммы DIFF Это сочетает в себе пару графиков разброса, круговые диаграммы или гистограммы в изображение, которое визуализирует разницу между двумя аналогичными наборами данных.
- Вега -диаграммы Это обеспечивает способ отображать диаграммы, определенные с Вега и Vega-lite Визуальные грамматики в диаграммах Google.
Наслаждайтесь зрелищем до сих пор? Пожалуйста, перейдите на этаж 2, Современное искусство 🎫
Что такое мама?
Музей современного искусства – это художественный музей в Нью -Йорке, США. Он был основан 91 год назад, 7 ноября 1929 года, и его часто идентифицируется как один из крупнейших и наиболее влиятельных музеев современного искусства в мире. Коллекция MOMA включает в себя почти 200 000 произведений по архитектуре и дизайну, рисунка, живопись, скульптуру, фотографии, принты, иллюстрированные книги, фильмы и электронные СМИ.
На GitHub Moma публикует и периодически обновляет публичный набор данных который содержит ~ 140 000 записей, представляющих все работы, которые были вступлены в коллекцию MOMA и каталогизированы в нашей базе данных. Он включает в себя основные метаданные для каждой работы (например, название, художник, дата, средняя, размеры и дата приобретения). Этот набор данных размещен в общественном достоянии с использованием лицензии CC0 (Итак, мы можем использовать его в этом уроке) и доступны в форматах CSV и JSON.
Я импортировал этот набор данных в общедоступный экземпляр Postgres, который мы будем использовать через несколько минут для изучения данных. Перейдите на этаж 3, Кубизм 🎫
Что такое куб?
Мы строим приборную панель, поэтому было бы очень удобно получить доступ к данным с переднего конца через API. Куб очень удобен для этой цели.
Куб это популярный продукт с открытым исходным кодом с более чем 11 000 звезд на Github на сегодняшний день. Он служит API для создания приложений данных. Вы можете настроить Cube для подключения к любой базе данных, описать свои данные с помощью декларативной схемы данных и мгновенно получить API, который вы можете использовать в своем приложении.
Давайте раскрутим API для набора данных MOMA. Во -первых, убедитесь, что у вас есть Docker Установлен на вашей машине. Это Рекомендуется запустить куб с Docker или использовать управляемый экземпляр в Cube Cloud Анкет
Во -вторых, давайте создадим новую папку для приложения вашего куба и перейдем к нему:
mkdir google-charts-moma cd google-charts-moma
В -третьих, запустите этот фрагмент, чтобы создать новый Docker-compose.yml Файл с конфигурацией. Мы также будем использовать переменные среды из .env файл для обучения Cube, как подключиться к Postgres:
cat > docker-compose.yml << EOL
version: '2.2'
services:
cube:
image: cubejs/cube:latest
ports:
- 4000:4000
- 3000:3000
env_file: .env
volumes:
- .:/cube/conf
EOL
Затем запустите этот фрагмент, чтобы создать .env Файл с учетными данными Postgres. В этом уроке мы используем общедоступную базу данных Postgres, которую я уже настроил. Проверьте Документы Чтобы узнать больше о подключении Cube к Postgres или любой другой базе данных.
cat > .env << EOL CUBEJS_DB_TYPE=postgres CUBEJS_DB_HOST=demo-db-examples.cube.dev CUBEJS_DB_NAME=moma CUBEJS_DB_USER=cube CUBEJS_DB_PASS=12345 CUBEJS_API_SECRET=SECRET CUBEJS_DEV_MODE=true EOL
Это все, что нам нужно, чтобы куб подключился к Postgres. Последняя часть конфигурации – это Схема данных который декларативно описывает содержание базы данных. Давайте поместим это под схема папка:
mkdir schema touch Artworks.js
Пожалуйста, скопируйте и вставьте эту схему данных в Kingworks.js , затем следуйте комментариям в файле:
cube(`Artworks`, {
// Cube definition.
// It says that the data is kept in the "artworks" table.
// Learn more in the docs: https://cube.dev/docs/schema/getting-started
sql: `SELECT * FROM public.artworks`,
// Quantitative information about the data, e.g., count of rows.
// It makes sense for all rows rather than individual rows
measures: {
count: {
type: `count`,
},
minAgeAtAcquisition: {
type: `number`,
sql: `MIN(${CUBE.ageAtAcquisition})`
},
avgAgeAtAcquisition: {
type: `number`,
sql: `SUM(${CUBE.ageAtAcquisition}) / ${CUBE.count}`
},
maxAgeAtAcquisition: {
type: `number`,
sql: `MAX(${CUBE.ageAtAcquisition})`
}
},
// Qualitative information about the data, e.g., an artwork's title.
// It makes sense for individual rows of data rather than all rows
dimensions: {
title: {
sql: `${CUBE}."Title"`,
type: `string`
},
artist: {
sql: `${CUBE}."Artist"`,
type: `string`
},
classification: {
sql: `${CUBE}."Classification"`,
type: `string`
},
medium: {
sql: `${CUBE}."Medium"`,
type: `string`
},
// We can use SQL functions here
year: {
sql: `SUBSTRING(${CUBE}."Date" FROM '[0-9]{4}')`,
type: `number`
},
date: {
sql: `${CUBE}."Date"`,
type: `number`
},
dateAcquired: {
sql: `${CUBE}."DateAcquired"`,
type: `time`
},
yearAcquired: {
sql: `DATE_PART('year', ${CUBE}."DateAcquired")`,
type: `number`
},
ageAtAcquisition: {
case: {
when: [
{
sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT > 0`,
label: { sql: `${CUBE.yearAcquired}::INT - ${CUBE.year}::INT` }
}
],
else: {
label: `0`
}
},
type: `number`
},
heightCm: {
sql: `ROUND(${CUBE}."Height (cm)")`,
type: `number`
},
widthCm: {
sql: `ROUND(${CUBE}."Width (cm)")`,
type: `number`
},
},
dataSource: `default`
});
Вот, как будто! Теперь мы наконец готовы запустить куб:
docker compose up
Теперь давайте рассмотрим данные в наборе данных MOMA. Cube предоставляет Разработчик детская площадка , удобный веб-инструмент, который помогает изучить данные, в Localhost: 4000 Анкет Перейдите к игровой площадке для разработчика в вашем браузере и изучите пользовательский интерфейс. Вы можете получить произвольные данные, нарезать и надеть набор данных, выбрав измерения и меры.
Например, вы можете проверить, сколько произведений искусства Moma имеет для артистов, у которых есть «Сара» на их имя. Для этого выберите Ortworks.count Измерение, Ortworks.Artist размер, а также обязательно добавьте фильтр для Ortworks.Artist измерение, которое позволяет только имена, содержащие «Сара».
Не стесняйтесь возиться с другими мерами и измерениями. Как только вы закончите, давайте доберемся до создания приборной панели. Перейдите на этаж 4, абстрактное искусство 🎫
Создание приборной панели с диаграммами Google
Теперь пришло время разработать фронтальное приложение, рассказывающее историю, стоящую за коллекцией Moma Artworks, с диаграммами и другими типами визуализаций данных. Для простоты давайте создадим его с помощью чистого JavaScript и без каких -либо рамок (однако, неофициальные пакеты доступны в NPM для Реагировать , Угловой и Vue а также определения типографии в Определеннотипед репозиторий).
Основная приборная панель. Во -первых, давайте создадим подпалку для приборной панели под Google-Charts-Moma папка:
mkdir dashboard-app cd dashboard-app
Во -вторых, давайте начнем с HTML -файла со следующим содержимым. Вы можете назвать это Basic.html и положить в это Dashboard-App папка. Мы пройдем эту линию файла по строке. Следите за комментариями!
Google Charts Dashboard
Вот что вы должны получить, как только вы сохраните содержимое этого файла и откроете его в браузере. Это таблица и причудливая диагональная диаграмма - потому что маловероятно, что Moma может приобрести произведения искусства, прежде чем он был создан, верно?
Менее 200 строк кода позволили нам включить все библиотеки, запросить API, преобразовать данные, настраивать диаграммы и сделать их бок о бок на странице. Не так уж плохо!
Тем не менее, я бы не назвал это полноценной панелью панели, пока она не позволит взаимодействовать с элементами и изменить, как представлены данные. Давайте рассмотрим, как работать с событиями и скрещивать графики.
Интерактивная приборная панель. Пожалуйста, создайте другой файл, вы можете позвонить в него index.html Анкет Он будет содержать еще на 2-3 строки кода, поэтому у нас будет больше диаграмм и некоторые биты кода, которые позволяют работать с событиями. Скопируйте и вставьте Код из github - И давайте просмотрим самые интересные части вместе.
Теперь у нас есть много графиков и много функций, чтобы нарисовать их:
function drawCharts(artistFilters) {
drawChartForArtworkArtists(artistFilters);
drawChartForArtworkMediums(artistFilters);
drawChartForArtworkYears(artistFilters);
drawChartForArtworkWidthsHeights(artistFilters);
drawChartForArtworkAcquisitions(artistFilters);
drawChartForArtworkAcquisitionsIn1964(artistFilters);
drawChartForArtworkAcquisitionsAge(artistFilters);
}
В одной из графиков, стола с именами артистов, есть слушатель, который уволен каждый раз, когда вы выбираете один или многие строки таблицы или очищают выбор. Как видите, мы каким -то образом создаем фильтр для данных, используя BUILDQUERYFILTER функционируйте, а затем передайте этот фильтр на любой другой график:
google.visualization.events.addListener(chart, 'select', function() {
const artistsFilter = buildQueryFilter(resultSet, chart, "Artworks.artist");
drawChartForArtworkMediums(artistsFilter);
drawChartForArtworkYears(artistsFilter);
drawChartForArtworkWidthsHeights(artistsFilter);
drawChartForArtworkAcquisitions(artistsFilter);
drawChartForArtworkAcquisitionsIn1964(artistsFilter);
drawChartForArtworkAcquisitionsAge(artistsFilter);
});
Вот как мы строим фильтр. Мы получаем доступ к выбранным рядам через chart.getSelection () Анкет Если не выбраны строки, фильтр будет не определен. Если есть какие -либо, мы найдем значения выбранных ячеек и будем использовать их в качестве значений в фильтре «Куб -запрос»:
function buildQueryFilter(resultSet, chart, member) {
const selectedRowNumbers = chart
.getSelection()
.map(function(x) { return x.row; });
if (selectedRowNumbers.length === 0) return
const values = resultSet
.tablePivot()
.filter(function(row, i) {
return selectedRowNumbers.indexOf(i) !== -1
})
.map(function(row) {
return row[member]
})
return {
member,
operator: "equals",
values
};
}
Это все, что вам нужно, чтобы добавить интерактивность в приборную панель. Посмотрите, как изменяются диаграммы при выборе одного или многих художников в первой таблице:
Это своего рода искусство, не так ли? 🧑🎨
На самом деле, эти графики и весь этот учебник вдохновлены работой других, которые я хотел бы упомянуть здесь: « FiveThirtyEight , " moma on github " by Yyyy-mm-dd и это твит по Стивен Любар Анкет
Очистка краски
Спасибо за чтение и следование этому уроку! Я призываю вас провести некоторое время в документах И изучите, на что еще способны Google Hacarts. Вы найдете еще больше типов диаграмм, параметров конфигурации и расширенных функций.
Также, Спасибо за изучение Куб и строительство панелей мониторинга. Я надеюсь, что вам понравилось.
Пожалуйста, не стесняйтесь любить и добавить в закладки этот пост, написать комментарий и дайте звезду Куб на GitHub. Я надеюсь, что вы попробуете чарты Cube и Google в вашем следующем производственном концерте или в вашем следующем Pet Project.
Удачи и приятного времяпровождения! Теперь перейдите к выходу! 🎫
Оригинал: "https://dev.to/cubejs/google-charts-dashboard-a-tutorial-with-an-artistic-touch-of-moma-1jdn"