Vytvořte si vlastní vizuál pro LuckyTemplates pomocí Deneb

Chci mluvit o novém vlastním vizuálu Deneb, který byl nedávno vydán pro LuckyTemplates. To poskytuje rozhraní pro jazyk Vega-Lite, které lze použít k vytvoření interaktivního vlastního vizuálu pro LuckyTemplates.

Jazyk Vega-Lite je založen na syntaxi JSON. Je snazší implementovat a pochopit než programovací jazyky nižší úrovně. Kromě toho autor Daniel Marsh-Patrick zahrnul několik šablon pro urychlení procesu návrhu.

Myslím, že tento vizuál bude obrovský, protože poskytuje plný zážitek z kódu a je extrémně přizpůsobitelný. Rád bych využil této příležitosti a předvedl několik jednoduchých příkladů vizuálů Deneb Vega-Lite a porovnal je se standardními vizuály LuckyTemplates. Celé video tohoto tutoriálu si můžete prohlédnout ve spodní části tohoto blogu.

Obsah

• Jak používat Deneb jako vlastní vizuál pro LuckyTemplates
• Obecné body, které se dozvíte o Deneb
• Vytvoření sloupcového grafu s Deneb
• Vytvoření spojnicového grafu s Deneb
• Vytváření Plošného Grafu S Denebem
• Pomocí překrývajícího se sloupcového grafu s Deneb
• Výroba prstencového grafu s Deneb
• Závěr

Jak používat Deneb jako vlastní vizuál pro LuckyTemplates

Deneb je rozhraní, které umožňuje plně kódovat vizuál pomocí syntaxe JSON podle jazyka Vega-Lite. Tato prezentace není zamýšlena jako úvod do jazyka Vega-Lite, ale je spíše malou ukázkou toho, jak jazyk umožňuje vizuály, které jsou jako některé standardnía lze je plně přizpůsobit tak, aby vyhovovaly vašemu scénáři.

Základní vizuály vyvinuté v této prezentaci využívají některé z ukázkových šablon dostupných v rozhraní Deneb. Vlastní vizuály jsou úvodními příklady toho, čeho lze ve Vega-Lite dosáhnout s malým úsilím prostřednictvím pokusů a omylů modifikací jiných příkladů, které lze snadno najít online.

Zde je domovská stránka Deneb. Některé referenční materiály naleznete zde .

Na webu Vega-Lite GitHub je galerie , která ukazuje příklady věcí, které lze vytvořit pomocí Vega-Lite.

Zde je další příklad některých vlastních karet KPI , které lze vytvořit pomocí vlastního vizuálu Deneb.

Obecné body, které se dozvíte o Deneb

Zde jsou některé z obecných bodů, které jsem se o Vega-Lite dozvěděl během svých počátečních výzkumů. Data jsou vázána na značku. Ve Vega-Lite je k dispozici mnoho značek, včetně pruhu, čáry, oblouku, bodu, textu a mnoha dalších. Značka má kódování. Například textová značka má k dispozici mnoho kódování, včetně zarovnání, písma, velikosti, váhy a barvy.

Více značek lze kombinovat a vytvořit složený vizuální zážitek, včetně vrstvy (více značek se vzájemně překrývají a sdílejí stejný kotevní bod nebo osu), zřetězení (více značek uspořádaných vodorovně nebo svisle) nebo fasety (malé násobky dostupné v mnoha power BI vizuály, kde se k zobrazení podmnožin stejných dat používá řada podobných grafů, což usnadňuje srovnání mezi podmnožinami).

Vytvoření sloupcového grafu s Deneb

Nyní se pojďme podívat na to, jak se vlastní vizuál pro LuckyTemplates vytváří pomocí šablon od společnosti Deneb a jak se porovnávají se standardními vizuály LuckyTemplates.

V tomto příkladu jsem přidal standardní pruhový graf LuckyTemplates pro zobrazení celkových prodejů podle kanálu na levé straně. Pojďme postavit něco podobného pomocí Deneb a Vega-Lite.

Na pravou stranu přidáme vizuál Deneb.

První věc, kterou musíme udělat, je přidat naše data, takže přidejte naše kanály a celkové prodeje .

Jen pro zajímavost zapněme Shadow .

Poté zvolíme Upravit .

Vybereme jednoduché šablony sloupcových grafů, které poskytuje rozhraní. Pro kategorii zvolíme Channel a pro míru Total Sales .

Jakmile klikneme na Vytvořit , můžeme vidět náš vizuál Deneb.

Vidíme, že mezi LuckyTemplates a Deneb je mnoho věcí podobných. Jedna věc, která není podobná hned po vybalení, je to, že máme štítky dat zobrazené na vizuálu LuckyTemplates. U vizuálu Deneb lze tyto datové štítky snadno přidat do vizuálu, což provedeme přidáním jiné vrstvy.

Jakmile klikneme na Upravit z vizuálu Deneb, vidíme zde jedinou značku.

Vezmu úryvek kódu k přidání štítků dat a nahradím kód jediné značky dvěma značkami.

Jakmile to spustíme, budeme mít štítky dat.

Druhá věc, kterou můžeme udělat, je naformátovat tyto datové štítky. Opět zde mám blok citace, který mohu vložit místo pouhého použití holého kódování pro Total Sales .

Další věc, která je na Deneb a Vega-lite opravdu skvělá, je, že můžeme snadno změnit sloupcový graf na sloupcový. Znovu klikneme na Upravit . Vše, co musíme udělat, je otočit X a Y.

Je zřejmé, že je potřeba udělat nějakou práci a jsou potřeba úpravy, ale chtěl jsem ukázat, jak snadno lze věci ve Vega-Lite změnit.

Vytvoření spojnicového grafu s Deneb

Dále jsem přidal standardní spojnicový graf LuckyTemplates, který zobrazuje celkový prodej podle data . Pojďme postavit něco podobného pomocí Deneb Vega-lite. Pojďme přidat vizuál Deneb, přidat naše Datum a celkové prodeje .

Vyberme spojnicový graf s intervalovým pásmem, pro naši osu X zvolte Datum a pro další tři hodnoty zvolte Celkový prodej .

Zde je výsledný základní vizuál pro Deneb. Můžete vidět, že mezi těmito dvěma je mnoho podobností. Existuje několik rozdílů, například osa X je ve vizuálu Deneb zobrazena číselně.

Existuje něco, co můžeme udělat, abychom to snadno napravili. Vraťme se k Deneb a změňme kódování pro X datum na temporal .

Druhým rozdílem je titul. Přidejme k vizuálu Deneb název. Kód ještě jednou upravíme, přidáme rohové razítko a naformátujeme JSON.

A tady je náš titulek. Máme plnou kontrolu nad fontem, velikostí, barvou atd.

Vytváření Plošného Grafu S Denebem

Zkusme také plošný graf. Přidal jsem standardní oblastní graf LuckyTemplates zobrazující Prodej podle data .

Nyní pojďme postavit něco podobného pomocí Deneb Vega-Lite. Vložme vizuál Deneb, pak přidejme míry Datum a Kumulativní celkový prodej .

Pojďme získat blok kódu pro samostatný plošný graf a použít jej.

Plošný graf ve spodní části je výsledkem.

Jednou z dalších funkcí Vega-Lite je, že můžete používat štětce . To je slovo, které používají pro výběr konkrétního intervalu ve vašem grafu.

Jedna z věcí, která je opravdu skvělá, je, že můžete použít štětce na propojené vizuály. Pojďme udělat nový vizuál Deneb, přidat stejná data Of Date a Kumulativní tržby . Klikněte na Upravit na vizuálu a zvolte Prázdná specifikace .

Zkopírujte kód pro duální grafy propojené obdélníkovým štětcem. Poté vložte a spusťte kód.

Nyní máme náš primární vizuál, kde můžeme pomocí štětce zobrazit vybraný interval od prvního do našeho sekundárního vizuálu.

Pomocí překrývajícího se sloupcového grafu s Deneb

Zde je příklad něčeho, co jsem už nějakou dobu hledal. Toto je překrývající se sloupcový graf nebo sloupcový graf s odrážkami , který ukazuje vztah mezi dvěma hodnotami pro stejnou kategorii. Vytvořil jsem to také v Denebu.

Přidal jsem nějaký kód z programu Notepad++, aby byl překrývající se sloupec vizuální.

To, co zde máme, je čtyřvrstvý vizuál složený ze čtyř vrstev navrstvených na sebe: jedna pro zadní sloupec, jedna pro přední sloupec, jedna pro zadní štítek a jedna pro přední štítek. Vidíme, že graf reaguje na výběry provedené v LuckyTemplates a podle toho se také upraví.

Výroba prstencového grafu s Deneb

Další věc, kterou jsem už nějakou dobu hledal, je prstencový graf, který je podobný prstencům aktivity na Apple Watch. Vytvořil jsem něco takového pro používání Pythonu, ale nebylo to tak dobré, jak bych chtěl, aby bylo.

Snažil jsem se udělat to samé v Deneb a byl jsem s tím velmi úspěšný. V tomto vizuálu Deneb máme devítivrstvý vizuál, kde jsme přidali samostatné míry pro prsteny 1, 2 a 3, hodnoty pro prsteny 1, 2 a 3, barvy pro prsteny 1, 2 a 3 a kategorie pro kroužky 1, 2 a 3.

Pojďme se podívat na kód, který jsem zde použil. Využívá koncept ve Vega-Lite nazvaný Transform and Params k rozšíření dat, která jsou zpřístupněna různým značkám. Potom jsem navrstvil devět značek na sebe pomocí stejné osy, abych vytvořil kruhový graf. Toto je plně interaktivní s popisky LuckyTemplates.

Další zajímavostí je, že můžete použít k vývoji vizuálů Vega-Lite. Nejprve budete potřebovat rozšíření pro zobrazení kódu Vega-Lite. Momentálně používám rozšíření Vega Viewer .

Poté je třeba nastavit technický soubor s příponou vl.json. Kliknutím pravým tlačítkem na kód zobrazíte náhled Vega Graph .

Vzhledem k tomu, že vizuál Vega-Lite je plný kód, považuji prostředí Visual Studio Code za velmi užitečné při mém vývoji.

Závěr

Doufám, že vám tento tutoriál osvětlí a že vás přiměje prozkoumat možnosti použití Deneb a Vega-Lite k vývoji vizualizací nad rámec toho, co je aktuálně dostupné v LuckyTemplates.

Pokud se vám líbil vlastní vizuál obsahu LuckyTemplates obsažený v tomto konkrétním tutoriálu, nezapomeňte se přihlásit k odběru televizního kanálu LuckyTemplates .

Neustále vychází obrovské množství obsahu ode mne a řady tvůrců obsahu, všichni se věnují zlepšování způsobu, jakým používáte LuckyTemplates a Power Platform.

Greg