Studio danych Google pozwala bezpłatnie tworzyć na żywo interaktywne panele z pięknymi wizualizacjami danych. Użytkownicy mogą pobierać swoje dane z różnych źródeł i tworzyć raporty w Studiu danych, mając pełne możliwości edytowania i udostępniania. Przykładowy panel Studia danych:
(Kliknij tutaj, by wyświetlić przykładowy raport w Studiu danych)
Studio danych udostępnia kilka wbudowanych typów wykresów, w tym wykresy liniowe, słupkowe, kołowe i punktowe. Wizualizacje utworzone przez społeczność umożliwiają tworzenie i używanie własnych wizualizacji JavaScriptu w Studiu danych. Wizualizacje utworzone przez społeczność tworzą społeczność Studio danych – każdy programista może je utworzyć. Możesz też udostępniać wizualizacje utworzone przez społeczność innym osobom, żeby mogły użyć ich własnych danych.
Czego się nauczysz
Z tego modułu kodu dowiesz się:
- Jak działa wizualizacja utworzona przez społeczność Studia danych Google
- Jak utworzyć wizualizację utworzoną przez społeczność, korzystając z biblioteki pomocniczej komponentu ds
- Jak zintegrować wizualizację utworzoną przez społeczność z panelem Studia danych
Czego potrzebujesz
Aby ukończyć moduł, musisz:
- Dostęp do internetu i przeglądarki
- konto Google,
- Dostęp do zasobnika na dane Google Cloud Platform
- znajomość JavaScriptu;
Dlaczego wybierasz ćwiczenia z programowania?
Jak planujesz wykorzystać to ćwiczenie/ćwiczenia z programowania?
Jak oceniasz korzystanie ze Studia danych?
Co najlepiej opisuje Twoje tło?
Jakie biblioteki wizualizacji JavaScript Cię interesują?
Aby przesłać informacje, przejdź na następną stronę.
Wizualizacje utworzone przez społeczność Studia danych umożliwiają tworzenie i używanie niestandardowych wizualizacji JavaScript, które można zintegrować z panelami.
W ramach tego ćwiczenia utworzysz wizualizację utworzoną na podstawie wykresu słupkowego, która obsługuje jeden wymiar, jeden rodzaj danych i styl koloru słupka.
Aby utworzyć wizualizację utworzoną przez społeczność, musisz mieć w zasobniku Google Cloud Platform następujące pliki, które utworzysz w kolejnym kroku.
Nazwa pliku | Typ pliku | Cel |
manifest.json* | JSON | Zapewnia metadane dotyczące wizualizacji i lokalizacji innych zasobów. |
myViz.json, | JSON | Udostępnia opcje konfiguracji danych i stylu w panelu Usługa. |
myViz.js | JavaScript | Udostępnia kod JavaScript wymagany do wyświetlania wizualizacji. |
myViz.css (opcjonalnie) | CSS | Zapewnia styl wizualizacji. |
*Plik manifestu to jedyny plik o wymaganej nazwie. Inne nazwy mogą mieć różne nazwy, o ile ich nazwy/lokalizacja zostały określone w pliku manifestu.
W tej sekcji dodasz do pliku JavaScript kod wymagany do obsługi danych, zmian stylu i wizualizacji wizualizacji.
Wpisz źródło wizualizacji
Krok 1. Pobierz plik dscc.min.js z Biblioteki komponentów Studia danych i skopiuj go do katalogu roboczego.
Krok 2. Skopiuj następujący kod do edytora tekstu i zapisz go jako myVizSource.js w lokalnym katalogu roboczym.
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 });Przygotowywanie ostatecznego pliku JavaScript
Krok 3. Połącz cały wymagany kod JavaScript w jeden plik, kopiując zawartość biblioteki pomocniczej (dscc.min.js) i pliku myVizSource.js do nowego pliku o nazwie myViz.js. Aby połączyć pliki, uruchom następujące polecenia. Powtarzaj ten krok przy każdej aktualizacji kodu wizualizacji.
Skrypt łączenia / Linux/macOS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsSkrypt Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsPlik CSS określa styl wizualizacji. Skopiuj następujący kod i zapisz go jako myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Plik JSON konfiguracji wizualizacji określa atrybuty danych i stylu obsługiwane i wymagane przez wizualizację. Ta wizualizacja utworzona w tym ćwiczeniu z programowania obsługuje 1 wymiar i 1 rodzaj danych oraz wymaga wyboru koloru przy użyciu 1 elementu stylu. Więcej informacji o wymiarach i danych
Skopiuj następujący kod i zapisz go jako myViz.json.Więcej informacji o właściwościach, które możesz skonfigurować, znajdziesz w dokumentacji referencyjnej konfiguracji.
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"
}
]
}
]
}Krok 1. Utwórz projekt Google Cloud Platform (GCP)
Krok 2. Utwórz zasobnik GCP Zalecana klasa pamięci to regionalna. Aby dowiedzieć się więcej o bezpłatnych poziomach, otwórz cennik Cloud Storage. Jest mało prawdopodobne, że wizualizacja pamięci zostanie obciążona żadnymi opłatami za klasę pamięci regionalnej.
Krok 3. Zanotuj nazwę/ścieżkę zasobnika, zaczynając od sekcji za segmentami/ . Studio danych określa ten identyfikator jako „identyfikator komponentu” i służy do jego identyfikacji i wdrażania.
Plik manifestu zawiera informacje o lokalizacji i zasobach wizualizacji. Musi on mieć nazwę "manifest.json" i musi znajdować się w zasobniku utworzonym w poprzednim kroku (takim jak używany w przypadku Twojego identyfikatora komponentu).
Skopiuj następujący kod do edytora tekstu i zapisz go jako manifest.json.
Więcej informacji o pliku manifestu znajdziesz w dokumentacji pliku manifestu.
Plik 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"
}
}]
}
- Prześlij pliki
manifest.json,myViz.js,myViz.jsonimyViz.cssdo zasobnika Google Cloud Storage za pomocą interfejsu internetowego lub narzędzia wiersza poleceń gsutil. Powtarzaj te czynności przy każdej aktualizacji wizualizacji.
Polecenia przesyłania 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_BUCKETKrok 1. Skopiuj adres URL przykładowego zbioru danych do wizualizacji utworzonych przez społeczność.
Krok 2. Otwórz Studio danych i kliknij Pusty w sekcji Utwórz nowy raport.
Krok 3. W prawym dolnym rogu kliknij UTWÓRZ NOWE ŹRÓDŁO DANYCH.
Krok 4. Wybierz oprogramowanie sprzęgające Arkuszy Google.
Krok 5. W polu URL wpisz adres URL arkusza Google z kroku 1.
Krok 6. W prawym górnym rogu strony kliknij POŁĄCZ
Krok 7. W nagłówku źródła danych kliknij Dostęp do wizualizacji utworzonych przez społeczność, wybierz WŁ. i kliknij Zapisz.
Krok 7. Kliknij DODAJ DO RAPORTU w wyświetlonym polu, aby dodać źródło danych do raportu.
Krok 6. Na pasku narzędzi kliknij przycisk wizualizacji społeczności 
. Otworzy się menu.
Krok 7. Wklej nazwę zasobnika poprzedzoną znakiem gs:// (, na przykład: gs://community-viz-docs/myViz), do pola tekstowego „"Ścieżka pliku manifestu” dodaj barChart w sekcji „"Identyfikator komponentu”, i kliknij „DODAJ”
Wizualizacja zostanie automatycznie narysowana na płótnie. Panel usługi po prawej stronie powinien odzwierciedlać elementy w pliku myViz.json.
Wizualizacja umożliwia stosowanie jednego wymiaru i jednego typu danych.
Określono element jednego stylu – renderuje selektor koloru czcionki oznaczony etykietą „Kolor koloru”." W kolejnym kroku użyjesz tego selektora, aby wpłynąć na wizualizację.
W tej sekcji użyjesz elementu stylu selektora koloru, aby zaktualizować wizualizację.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
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 });Krok 2. Utwórz połączony plik JavaScript, a następnie ponownie prześlij pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport Studia danych, w którym przetestowano wizualizację utworzoną przez społeczność.
Kolor prostokąta możesz zmienić za pomocą selektora w menu stylów.
W tej sekcji zaktualizujesz wizualizację, aby rysowała się wykres słupkowy z danymi z przykładowego zbioru danych do wizualizacji utworzonych przez społeczność. Uwaga: Studio danych zwraca do wizualizacji maksymalnie 2500 wierszy danych.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
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 });Krok 2. Utwórz połączony plik JavaScript, a następnie ponownie prześlij pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport Studia danych, w którym przetestowano wizualizację utworzoną przez społeczność. Powinien istnieć wykres słupkowy z etykietami wygenerowanymi na podstawie danych z Arkuszy Google. Aby zmienić kolor pasków, zmień kolor w selektorze Styl koloru".
W tej sekcji zaktualizujesz wizualizację, aby rysowała się wykres słupkowy z danymi z przykładowego zbioru danych do wizualizacji utworzonych przez społeczność.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
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 });Krok 2. Utwórz połączony plik JavaScript, a następnie ponownie prześlij pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport Studia danych, w którym przetestowano wizualizację utworzoną przez społeczność. Powinien wyświetlić się wykres słupkowy z tytułem wygenerowanym na podstawie danych i stylem utworzonym za pomocą pliku myViz.css.
Gratulacje – udało Ci się utworzyć wizualizację utworzoną przez społeczność w Studiu danych. To już koniec tego ćwiczenia z programowania. Teraz zobaczmy, co możesz zrobić.
Przedłuż wizualizację
- Dodawanie interakcji do wizualizacji
- Dowiedz się, jak przygotować wizualizację lokalnie
- Dowiedz się więcej o dostępnych elementach stylu i dodaj styl do wizualizacji.
Więcej możliwości dzięki wizualizacjom utworzonym przez społeczność
- Przejrzyj odsyłacze z biblioteki pomocniczej dscc, pliku manifestu i pliku konfiguracji.
- Prześlij wizualizację na naszą prezentację dotyczącą społeczności.
- Utwórz oprogramowanie sprzęgające społeczności dla Studia danych.
Dodatkowe materiały
Poniżej znajdziesz różne zasoby, dzięki którym lepiej poznasz materiał omawiany w tym ćwiczeniu z programowania.
Typ zasobu | Funkcje użytkownika | Funkcje dla programistów |
Dokumentacja | ||
Wiadomości i aktualności | Zarejestruj się w Studiu danych w Ustawieniach użytkownika | |
Zadawanie pytań | ||
Filmy | Już wkrótce | |
Examples |