Készítsen egyéni látványelemet a LuckyTemplates számára a Deneb használatával

Szeretnék beszélni az új Deneb egyedi vizualizációról, amely nemrég jelent meg a LuckyTemplates számára. Ez interfészt biztosít a Vega-Lite nyelv számára, amellyel interaktív egyéni vizualizációt hozhat létre a LuckyTemplates számára.

A Vega-Lite nyelv a JSON szintaxison alapul. Könnyebben megvalósítható és érthető, mint az alacsonyabb szintű programozási nyelvek. Ezenkívül a szerző, Daniel Marsh-Patrick néhány sablont is mellékelt a tervezési folyamat felgyorsítására.

Úgy gondolom, hogy ez a látvány hatalmas lesz, mivel teljes kódélményt biztosít, és rendkívül testreszabható. Szeretném megragadni az alkalmat, hogy bemutassak néhány egyszerű példát a Deneb Vega-Lite vizualizációkra, és összehasonlítsam a szabványos LuckyTemplates vizualizációkkal. Az oktatóanyag teljes videóját a blog alján tekintheti meg.

Tartalomjegyzék

• A Deneb használata egyéni látványelemként a LuckyTemplates számára
• Általános tudnivalók a Denebről
• Oszlopdiagram készítése Deneb segítségével
• Vonaldiagram készítése Deneb segítségével
• Területdiagram készítése Deneb segítségével
• Átfedő oszlopdiagram használata Deneb-el
• Gyűrűdiagram készítése Deneb-el
• Következtetés

A Deneb használata egyéni látványelemként a LuckyTemplates számára

A Deneb egy olyan felület, amely lehetővé teszi a vizualizáció teljes kódolását JSON szintaxissal a Vega-Lite nyelvnek megfelelően. Ez a bemutató nem a Vega-Lite nyelv bevezetése, hanem egy kis bemutató, hogy a nyelv hogyan tesz lehetővé olyan látványelemeket, amelyek olyanok, mint néhány szabvány.és teljesen testreszabható az Ön forgatókönyvének megfelelően.

Az ebben a prezentációban kifejlesztett alapvizualizáció a Deneb felületen elérhető példasablonok közül néhányat kihasznál. Az egyéni látványelemek bevezető példák arra, hogy mit lehet elérni kis erőfeszítéssel a Vega-Lite-ban más, az interneten könnyen megtalálható példák próba- és hibamódosításával.

Itt van a Deneb honlapja. Néhány referenciaanyagot itt találhat .

A Vega-Lite GitHub webhelyen található egy galéria , amely példákat mutat be a Vega-Lite segítségével létrehozható dolgokra.

Íme egy másik példa néhány egyéni KPI-kártyára , amelyek a Deneb egyéni vizualizációjával hozhatók létre.

Általános tudnivalók a Denebről

Íme néhány általános szempont, amit a Vega-Lite-ról tanultam a kezdeti vizsgálataim során. Az adatok jelöléshez vannak kötve. Számos jel áll rendelkezésre a Vega-Lite-ban, beleértve a sávot, vonalat, ívet, pontot, szöveget és még sok mást. A jelölésnek kódolása van. Például a szövegjel számos kódolást tartalmaz, beleértve az igazítást, a betűtípust, a méretet, a súlyt és a színt.

Több jelölés kombinálható összetett vizuális élmény létrehozásához, beleértve a réteget (több jelölés, amely átfedi egymást, és ugyanazon a rögzítési ponton vagy tengelyen osztozik), az összefűzést (több jelölés vízszintesen vagy függőlegesen elrendezve) vagy a fazettát (kis többszörösek sok teljesítményű BI-ben elérhetők). olyan látványelemek, ahol hasonló diagramok sorozatát használják ugyanazon adatok részhalmazainak megjelenítésére, megkönnyítve az alhalmazok összehasonlítását).

Oszlopdiagram készítése Deneb segítségével

Most pedig nézzük meg, hogyan készül a LuckyTemplates egyedi vizualizációja a Deneb sablonjaival, és hogyan hasonlítható össze a szabványos LuckyTemplates vizualizációkkal.

Ebben a példában hozzáadtam egy szabványos LuckyTemplates oszlopdiagramot, amely a bal oldalon megjeleníti a teljes értékesítést csatornánként . Építsünk valami hasonlót a Deneb és a Vega-Lite segítségével.

A jobb oldalon hozzáadjuk a Deneb vizualizációt.

Az első dolog, amit tennünk kell, hogy hozzáadjuk adatainkat, tehát adjuk hozzá a csatornáinkat és a teljes értékesítésünket .

Csak a szórakozás kedvéért kapcsoljuk be az Árnyékot .

Ezután válasszuk a Szerkesztés lehetőséget .

Kiválasztjuk az egyszerű oszlopdiagram-sablonokat, amelyeket a felületen biztosítunk. A kategóriához a Csatornát , a mércéhez pedig az Összes értékesítést választjuk .

Miután rákattintunk a Létrehozás gombra , láthatjuk a Deneb-vizuálisunkat.

Láthatjuk, hogy sok hasonló dolog van a LuckyTemplates és a Deneb között. Az egyik dolog, ami már a dobozból kiindulva nem hasonló, az az, hogy a LuckyTemplates vizuálban megjelennek az adatcímkék. A Deneb vizualizációnál ezeket az adatcímkéket könnyen hozzáadhatjuk a vizualizációhoz, amit egy másik réteg hozzáadásával tehetünk meg.

Ha rákattintunk a Szerkesztés lehetőségre a Deneb-vizuálból, itt egyetlen jelet látunk.

Fogok egy kódrészletet az adatcímkék hozzáadásához, és az egyetlen jel kódját két jelzéssel helyettesítem.

Ha ezt lefuttatjuk, adatcímkéink lesznek.

A második dolog, amit tehetünk, hogy formázzuk ezeket az adatcímkéket. Ismét van itt egy idézet blokk, amelyet beírhatok ahelyett, hogy pusztán a csupasz kódolást használnám a Total Sales esetében .

A másik dolog, ami nagyon klassz a Denebben és a Vega-lite-ban, hogy az oszlopdiagramot könnyen oszlopdiagrammá alakíthatjuk. Kattintsunk ismét a Szerkesztés gombra . Csak annyit kell tennünk, hogy megfordítjuk az X-et és az Y-t.

Nyilvánvalóan van még tennivaló, és kiigazításokra van szükség, de meg akartam mutatni, milyen egyszerűen lehet változtatni a Vega-Lite-ban.

Vonaldiagram készítése Deneb segítségével

Ezután hozzáadtam egy szabványos LuckyTemplates vonaldiagramot, amely az összes értékesítést mutatja dátum szerint . Építsünk valami hasonlót a Deneb Vega-lite segítségével. Adjunk hozzá egy Deneb-vizuálist, adjuk hozzá a Dátum és az összes értékesítéshez .

Válasszunk egy intervallumsávot tartalmazó vonaldiagramot, X tengelyünkhöz válasszuk a Dátumot , a következő három értékhez pedig az Összes értékesítés lehetőséget.

Íme az eredményül kapott Deneb alapvizuál. Láthatod, hogy sok hasonlóság van a kettő között. Van néhány eltérés, például az X tengely numerikusan jelenik meg a Deneb-vizuálban.

Van valami, amit tehetünk, hogy könnyen megjavítsuk. Menjünk át a Deneb-re, és változtassuk meg az X dátum kódolását temporálisra .

A második különbség a cím. Adjunk címet a Deneb-vizuálhoz. Még egyszer szerkesztjük a kódot, hozzáadjuk a címblokkot, és formázzuk a JSON-t.

És itt a címünk. Teljes ellenőrzésünk alatt áll a cím betűtípusa, mérete, színe stb.

Területdiagram készítése Deneb segítségével

Próbáljunk meg egy területdiagramot is. Hozzáadtam egy szabványos LuckyTemplates területdiagramot, amely az értékesítéseket dátum szerint mutatja .

Most építsünk valami hasonlót a Deneb Vega-Lite segítségével. Tegyük be a Deneb vizualizációt, majd adjuk hozzá a Dátum és az Összesített értékesítés mértékét.

Szerezzük meg a kódblokkot egy önálló területdiagramhoz, és alkalmazzuk.

Az alul látható területdiagram az eredmény.

A Vega-Lite egyik további funkciója, hogy használhat ecsetet . Ezt a szót használják egy adott intervallum kiválasztására a diagramon.

Az egyik nagyon klassz dolog, hogy ecsetet használhat a linkelt látványelemeken. Készítsünk új Deneb-vizuálist, adjuk hozzá ugyanazokat a dátumot és a kumulatív értékesítéseket . Kattintson a Szerkesztés elemre a vizualizáción, és válassza az Üres specifikáció lehetőséget .

Másolja ki a téglalap alakú ecsettel összekapcsolt kettős diagramok kódját. Ezután illessze be és futtassa a kódot.

Mostantól megvan az elsődleges vizualitásunk, ahol egy ecsettel megjeleníthetünk egy kiválasztott intervallumot az elsőtől a másodlagos vizualizációnkig.

Átfedő oszlopdiagram használata Deneb-el

Itt van egy példa arra, amit már régóta keresek. Ez egy átfedő oszlopdiagram vagy oszlopsoros diagram , amely egyazon kategória két értéke közötti kapcsolatot mutatja be. Ezt is Denebben készítettem.

Hozzáadtam néhány kódot a Notepad++-ból, hogy az átfedő oszlop vizuális legyen.

Itt van egy négyrétegű kép, amely négy rétegből áll egymásra: egy a hátsó oszlophoz, egy az elülső oszlophoz, egy a hátsó címkéhez és egy az elülső címkéhez. Láthatjuk, hogy a diagram a LuckyTemplatesben végrehajtott kijelölésekkel válaszol, és ennek megfelelően igazodik is.

Gyűrűdiagram készítése Deneb-el

Egy másik dolog, amit már régóta keresek, az egy gyűrűdiagram, amely hasonló az Apple órák aktivitási gyűrűihez. Valami ilyesmit készítettem a Python használatához, de nem volt olyan jó, mint szerettem volna.

Megpróbáltam ugyanezt megtenni a Denebben, és nagyon sikeres voltam vele. Ebben a Deneb-vizuálban egy kilencrétegű vizualizációnk van, amelyben külön mértékegységeket adtunk az 1., 2. és 3. gyűrűhöz, értékeket az 1., 2. és 3. gyűrűhöz, színeket az 1., 2. és 3. gyűrűhöz, valamint kategóriákat . az 1., 2. és 3. gyűrűhöz.

Nézzük csak az itt használt kódot. A Vega-Lite Transform and Params elnevezésű koncepcióját használja a különböző védjegyekhez elérhetővé tett adatok kiterjesztésére. Ezután kilenc jelet rétegeztem egymásra, ugyanazt a tengelyt használva a gyűrűdiagram létrehozásához. Ez teljesen interaktív a LuckyTemplates eszköztippekkel.

Egy másik érdekesség, hogy a Vega-Lite vizualitás fejlesztésére használhatod. Először is szüksége lesz egy kiterjesztésre a Vega-Lite kód megtekintéséhez. Jelenleg a Vega Viewer bővítményt használom .

Ezután be kell állítania egy technológiai fájlt a vl.json kiterjesztéssel. Csak kattintson a jobb gombbal a kódra a Vega Graph előnézetéhez .

Mivel a Vega-Lite vizualitás teljes kódélmény, a Visual Studio Code környezetet nagyon hasznosnak találom a fejlesztésem során.

Következtetés

Remélem, hasznosnak találja ezt az oktatóanyagot, és felfedezheti a Deneb és a Vega-Lite használatának lehetőségeit a LuckyTemplatesben jelenleg elérhető vizualizációk fejlesztésére.

Ha tetszett a LuckyTemplates tartalom egyedi látványvilága, amelyről ebben a konkrét oktatóanyagban van szó, kérjük, ne felejtsen el feliratkozni a LuckyTemplates TV-csatornára .

Rengeteg tartalom jön ki folyamatosan tőlem és egy sor tartalomkészítőtől, mindannyian elkötelezettek a LuckyTemplates és a Power Platform használatának javításáért.

Greg