Эта страница переведена с помощью Cloud Translation API.

Создание пользовательских визуализаций Javascript в Data Studio

Google Data Studio позволяет пользователям бесплатно создавать интерактивные панели мониторинга с красивыми визуализациями данных. Пользователи могут получать данные из различных источников и создавать отчёты в Data Studio с полным набором возможностей редактирования и публикации. Вот пример панели мониторинга Data Studio:

( Нажмите здесь, чтобы просмотреть этот пример отчета в Data Studio )

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

Чему вы научитесь

В этой лабораторной работе по кодированию вы узнаете:

Как работает визуализация сообщества Google Data Studio
Как создать визуализацию сообщества с помощью вспомогательной библиотеки ds-component
Как интегрировать визуализацию вашего сообщества в панель управления Data Studio

Что вам понадобится

Для выполнения этой лабораторной работы вам понадобится:

Доступ к Интернету и веб-браузеру
Аккаунт Google
Доступ к хранилищу Google Cloud Platform
Знакомство с Javascript

Почему вы выбрали эту практикум?

Меня интересует визуализация данных в целом.

Я хочу узнать больше о Data Studio

Я хочу создать собственную визуализацию сообщества.

Я пытаюсь интегрировать Data Studio с другой платформой.

Меня интересуют решения Google Cloud.

Как вы планируете использовать эту лабораторную работу/руководство?

Только пролистать

Прочитайте и выполните упражнения.

Как бы вы оценили свой опыт работы с Data Studio?

Никогда об этом не слышал.

Я знаю, что это такое, но я этим не пользуюсь.

Я иногда им пользуюсь.

Я пользуюсь им регулярно.

Я опытный пользователь.

Что лучше всего описывает ваше прошлое?

Разработчик

Дизайнер / UX-специалист

Бизнес / Данные / Финансовый аналитик

Специалист по обработке данных / Инженер по обработке данных

Эксперт по маркетингу, социальным сетям и цифровой аналитике

Другой

Какие библиотеки визуализации JavaScript вас интересуют?

D3.js

Google Графики

Chart.js

Листовка

Highcharts

Plot.ly

Другой

Перейдите на следующую страницу, чтобы отправить информацию об опросе.

Визуализации сообщества Data Studio позволяют создавать и использовать пользовательские визуализации JavaScript, интегрируемые в ваши панели управления.

В этой лабораторной работе вы создадите визуализацию столбчатой диаграммы, которая поддерживает 1 измерение, 1 метрику и цветовой стиль столбцов.

Для создания визуализации сообщества вам понадобятся следующие файлы в контейнере хранилища Google Cloud Platform, который вы создадите на более позднем этапе.

Имя файла	Тип файла	Цель
manifest.json*	JSON	Предоставляет метаданные о визуализации и местоположении других ресурсов.
myViz.json	JSON	Предоставляет параметры конфигурации данных и стилей для панели «Свойства».
myViz.js	JavaScript	Предоставляет код JavaScript, необходимый для отображения визуализации.
myViz.css (необязательно)	CSS	Обеспечивает стилизацию визуализации.

*Манифест — единственный файл, имеющий обязательное имя. Остальные файлы могут иметь другие имена, если их имя и расположение указаны в вашем файле манифеста.

В этом разделе вы добавите код, необходимый для обработки данных, изменения стилей и визуализации в ваш файл JavaScript.

Напишите источник визуализации

Шаг 1: Загрузите файл dscc.min.js из библиотеки компонентов сообщества Data Studio и скопируйте его в свой рабочий каталог.

Шаг 2: Скопируйте следующий код в текстовый редактор и сохраните его как myVizSource.js в локальном рабочем каталоге.

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  'blue';

  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Подготовьте окончательный файл JavaScript

Шаг 3: Объедините все необходимые JavaScript-коды в один файл, скопировав содержимое вспомогательной библиотеки визуализации ( dscc.min.js ) и файла myVizSource.js в новый файл с именем myViz.js . Выполните следующие команды для объединения файлов. Повторяйте этот шаг каждый раз при обновлении кода визуализации.

Скрипт конкатенации Linux/Mac OS

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

скрипт Windows

del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js

CSS-файл определяет стили визуализации. Скопируйте следующий код и сохраните его как myViz.css.

myViz.css

#myVizTitle {
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

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

Скопируйте следующий код и сохраните его как myViz.json. Подробнее о настраиваемых свойствах см. в справочной документации по конфигурации .

myViz.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "barDimension",
          "label": "Dimension",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "barMetric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }
      ]
    }
  ],
  "style": [
    {
      "id": "color",
      "label": "Colors",
      "elements": [
        {
          "type": "FONT_COLOR",
          "id": "barColor",
          "label": "Bar Color",
          "defaultValue": "black"
        }
      ]
    }
  ]
}

Шаг 1. Создайте проект Google Cloud Platform (GCP)

Шаг 2. Создайте контейнер GCP . Рекомендуемый класс хранилища — региональный. Подробнее об уровнях бесплатного использования см. на странице цен на облачное хранилище . Маловероятно, что ваше хранилище визуализаций будет связано с какими-либо расходами, связанными с региональным классом хранилища.

Шаг 3: Запишите имя/путь к контейнеру, начиная с раздела после Buckets/ . В Data Studio это называется «идентификатором компонента», и он будет использоваться для идентификации и развертывания.

Файл манифеста содержит информацию о расположении и ресурсах визуализации. Он должен иметь имя « manifest.json » и располагаться в контейнере, созданном на предыдущем шаге (том же, который используется для идентификатора вашего компонента).

Скопируйте следующий код в текстовый редактор и сохраните его как manifest.json.

Более подробную информацию о манифесте можно найти в справочной документации по манифесту .

manifest.json

{
  "name": "Community Visualization",
  "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
  "organization": "Data Studio Codelab",
  "supportUrl": "https://url",
  "packageUrl": "https://url",
  "privacyPolicyUrl": "https://url",
  "description": "Community Visualization Codelab",
  "devMode": true,
  "components": [{
    "id": "barChart",
    "name": "Bar Chart",
    "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
    "description": "Bar chart written in d3.js",
    "resource": {
      "js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
      "config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
      "css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
    }
  }]
}

Загрузите файлы manifest.json , myViz.js , myViz.json и myViz.css в контейнер Google Cloud Storage через веб-интерфейс или командную строку gsutil . Повторяйте это действие при каждом обновлении визуализации.

команды загрузки gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

Шаг 1: Скопируйте URL-адрес набора данных образца визуализации сообщества .

Шаг 2: Посетите Data Studio и нажмите «Пустой» в разделе «Начать новый отчет».

Шаг 3: В правом нижнем углу нажмите СОЗДАТЬ НОВЫЙ ИСТОЧНИК ДАННЫХ .

Шаг 4: Выберите коннектор Google Таблиц .

Шаг 5: В поле URL введите URL-адрес Google-таблицы из шага 1 выше.

Шаг 6: В правом верхнем углу страницы нажмите «ПОДКЛЮЧИТЬСЯ».

Шаг 7: В заголовке источника данных нажмите «Доступ к визуализациям сообщества», выберите «ВКЛ.» и нажмите « Сохранить».

Шаг 7 : Нажмите ДОБАВИТЬ В ОТЧЕТ в появившемся поле, чтобы добавить источник данных в отчет.

Шаг 6: На панели инструментов нажмите кнопку визуализации сообщества. . Откроется раскрывающийся список.

Шаг 7: Вставьте имя контейнера с префиксом gs:// ( например: gs://community-viz-docs/myViz) в текстовое поле «Manifest Path», добавьте barChart в раздел «Component ID» и нажмите «ADD».

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

Визуализация допускает одно измерение и одну метрику.

Был указан один элемент стиля — селектор цвета шрифта с надписью «Цвет полосы». На следующем шаге вы будете использовать этот селектор для управления визуализацией.

В этом разделе вы будете использовать элемент стиля селектора цвета для обновления визуализации.

Шаг 1: Замените код в файле myVizSource.js на код ниже.

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  fillColor;
  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Шаг 2: Создайте объединенный файл JavaScript, затем повторно загрузите файлы визуализации в Google Cloud Storage.

Шаг 3: Обновите отчет Data Studio, в котором вы тестировали визуализацию сообщества.

Вы можете изменить цвет прямоугольника, используя селектор в меню стилей.

В этом разделе вы обновите визуализацию, построив столбчатую диаграмму на основе данных из набора данных Community Visualization . Примечание: Data Studio возвращает максимум 2500 строк данных для визуализации.

Шаг 1: Замените код в файле myVizSource.js на код ниже.

myVizSource.js

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function(row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function(row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);
}

// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Шаг 2: Создайте объединенный файл JavaScript, затем повторно загрузите файлы визуализации в Google Cloud Storage.

Шаг 3: Обновите отчёт в Data Studio, в котором вы тестировали визуализацию сообщества. У вас должна получиться столбчатая диаграмма с метками, сгенерированная на основе данных из Google Таблицы. Чтобы изменить цвет столбцов, измените цвет, выбранный в селекторе «Цвет столбцов» в разделе «Стиль».

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

Шаг 1: Замените код в файле myVizSource.js на код ниже.

myVizSource.js

// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function (row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function (row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    // use style selector from Data Studio
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);

  // Get the human-readable name of the metric and dimension

  var metricName = data.fields['barMetric'][0].name;
  var dimensionName = data.fields['barDimension'][0].name;

  titleElement.innerText = metricName + ' by ' + dimensionName;

}

dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Шаг 2: Создайте объединенный файл JavaScript, затем повторно загрузите файлы визуализации в Google Cloud Storage.

Шаг 3: Обновите отчёт Data Studio, в котором вы тестировали визуализацию сообщества. У вас должна появиться столбчатая диаграмма с заголовком, сгенерированным на основе данных и оформленным с помощью файла myViz.css .

Поздравляем! Вы создали визуализацию сообщества в Data Studio! На этом работа над практической работой завершена. Теперь давайте посмотрим, что можно сделать дальше.

Расширьте свою визуализацию

Добавьте интерактивности в вашу визуализацию
Научитесь разрабатывать визуализацию локально
Узнайте больше о доступных элементах стиля и добавьте дополнительные стили к своей визуализации.

Достигайте большего с помощью визуализаций сообщества

Просмотрите ссылки на вспомогательную библиотеку dscc , манифест и файл конфигурации .
Отправьте свою визуализацию на нашу выставку визуализаций сообщества .
Создайте соединитель сообщества для Data Studio.

Дополнительные ресурсы

Ниже приведены различные ресурсы, которые помогут вам глубже изучить материал, рассматриваемый в этой лабораторной работе.

Тип ресурса	Пользовательские функции	Возможности разработчика
Документация	Справочный центр	Документация разработчика
Новости и обновления	Зарегистрируйтесь в Data Studio > Настройки пользователя	Список рассылки разработчиков
Задавайте вопросы	Форум пользователей	Stack Overflow [google-data-studio] Форум разработчиков Data Studio
Видео	Студия данных на Youtube	Вскоре!
Примеры	Галерея отчетов	Репозиторий с открытым исходным кодом

Создание пользовательских визуализаций Javascript в Data Studio Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Чему вы научитесь

Что вам понадобится

Почему вы выбрали эту практикум?

Как вы планируете использовать эту лабораторную работу/руководство?

Как бы вы оценили свой опыт работы с Data Studio?

Что лучше всего описывает ваше прошлое?

Какие библиотеки визуализации JavaScript вас интересуют?

Напишите источник визуализации

myVizSource.js

Подготовьте окончательный файл JavaScript

Скрипт конкатенации Linux/Mac OS

скрипт Windows

myViz.css

myViz.json

manifest.json

команды загрузки gsutil

myVizSource.js

myVizSource.js

myVizSource.js

Расширьте свою визуализацию

Достигайте большего с помощью визуализаций сообщества

Дополнительные ресурсы

Создание пользовательских визуализаций Javascript в Data Studio