A Sankey-diagram alkalmas kétféle adatsor közötti
N:M fokszámú kapcsolat, összefüggés és a köztes átmenet ábrázolására. Hangsúlyozza a fő átvitelt vagy áramlatokat egy rendszeren belül. Az áramlás irányát nyíllal szemlélteti és az áramlatok szélessége arányos az áramlási mennyiségekkel.
Feladat
Jelenítsük meg HTML formátumú weboldalként a magyarországi régiókban a foglalkoztatottak számát nemzetgazdasági szektorok szerint a KSH 2018-as adatsora alapján! Automatizáljuk egy Java programmal úgy a feladatot, hogy az év paraméterként megadható legyen!
Tervezés
A KSH témastruktúrában a táblázat elérési útja:
- 5. Területi adatok,
- 5.1. A munkaerő-piaci tendenciák Magyarország régióiban,
- 5.1.3. A foglalkoztatottak száma nemzetgazdasági szektorok szerint, nemenként (2008–)
Online böngészhető táblázat:
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/h_qlf017.html
Letölthető táblázat (XLS formátumban):
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/xls/h5_1_3.xls
A táblázatban lévő adatforrás szükséges része látható az ábrán:
A táblázatban a régiók az A105:A112 cellatartományban találhatók. A hozzájuk tartozó 3 nemzetgazdasági szektor a B-C-D oszlopok azonos soraiból olvashatók ki. POJO-k létrehozása mindenképpen hasznos a megvalósításhoz, például new SankeyData("Közép-Dunántúl", "Szolgáltatás", 253.89). Ezekből generikus listát is célszerű építeni: List<SankeyData> sankeyDataList.
Többféleképpen is hozzájuthatunk az adatokhoz attól függően, hogy milyen előismeretekkel rendelkezünk a különböző tanfolyamainkon:
- A Java SE szoftverfejlesztő tanfolyamon „kézzel” letölthetjük a projekt files mappájába az XLS fájlt. Ezután akár manuálisan is összeállítható a POJO lista, vagy a JExcel API-val is hatékonyan feldolgozható a XLS fájl aktuális munkalapja. Fájlkezelés előtt az összeállított HTML fájlt kiírathatjuk a konzolra, ahonnan „kézzel” vágólapozva létrehozhatjuk belőle a szükséges HTML fájlt. Fájlkezeléssel persze adott mappába, adott fájlnévvel, kivételkezeléssel a java.io vagy java.nio csomagot használva a HTML fájl generálása is automatizálható.
- A Java EE szoftverfejlesztő tanfolyamon megvalósítható, hogy a program kivételkezeléssel hálózati kapcsolatot épít, majd letölti az XLS fájlt és ezzel a feladat visszavezethető az előző esetekre. Azt is megtehetjük, hogy az XLS fájlt nem töltjük le, hanem olvasunk belőle közvetlenül a webről. Ekkor is rendelkezésünkre áll a POJO lista. Itt már tudunk HTML fájlt is automatikusan generálni.
Tanulmányoznunk kell a Google Charts galériában a Sankey diagram dokumentációját! Meg kell ismernünk a paraméterezési lehetőségeit és JavaScript forráskódját!
Megvalósítás
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
private String createSankeyDiagram(List<SankeyData> sankeyDataList) { String sankeyData= sankeyDataList.stream().map(SankeyData::toString). collect(Collectors.joining(",\n ", " ", "\n")); String html= "<html>\n" + " <head>\n" + " <script type=\"text/javascript\" " + " src=\"https://www.gstatic.com/charts/loader.js\"></script>\n" + " <script type=\"text/javascript\">\n" + " google.charts.load('current', {'packages':['sankey']});\n" + " google.charts.setOnLoadCallback(drawChart);\n" + "\n" + " function drawChart() {\n" + " var data = new google.visualization.DataTable();\n" + " data.addColumn('string', 'Régió');\n" + " data.addColumn('string', 'Nemzetgazdasági szektor');\n" + " data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)');\n" + " data.addRows([\n" + "#SankeyData#" + " ]);\n" + "\n" + " var options = {\n" + " width: 500,\n" + " };\n" + "\n" + " var chart=new google.visualization.Sankey("+ " document.getElementById('sankey_basic'));\n" + " chart.draw(data, options);\n" + " }\n" + " </script>\n" + " </head>\n" + " <body>\n" + " <div id=\"sankey_basic\" style=\"width: 500px; height: 300px;\"></div>\n" + " </body>\n" + "</html>"; return html.replace("#SankeyData#", sankeyData); } |
A createSankeyDiagram() függvény létrehozza a HTML fájl szöveges tartalmát. Átveszi adatforrásként a sankeyDataList generikus POJO listát. A String típusú sankeyData objektum tartalmazza a Stream API-val hatékonyan összefűzött – POJO-któl elkért – toString() szövegeket. Ezek a diagramhoz szükséges adatok ( addRows …). Például: "['Közép-Dunántúl', 'Szolgáltatás', 253.89]". A String típusú html objektum kezdetben tartalmazza a diagramhoz nem szükséges fix részeket, a diagram alapbeállításait, valamint a diagram fejlécéhez szükséges metaadatokat ( addColumn… Régió, Nemzetgazdasági szektor, Foglalkoztatottak száma (ezer fő)). A függvény végül a html objektum #SankeyData# részét cseréli a sankeyData-val és az adatfüggő résszel frissített HTML tartalommal tér vissza.
Eredmény
Az egyik eredmény a generált HTML fájl (benne a grafikonhoz tartozó JavaScript) forráskódját tartalmazza:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data=new google.visualization.DataTable(); data.addColumn('string', 'Régió'); data.addColumn('string', 'Nemzetgazdasági szektor'); data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)'); data.addRows([ ['Budapest', 'Mezőgazdaság', 1.251], ['Budapest', 'Ipar', 148.004], ['Budapest', 'Szolgáltatás', 684.56], ['Pest', 'Mezőgazdaság', 11.845], ['Pest', 'Ipar', 182.934], ['Pest', 'Szolgáltatás', 400.425], ['Közép-Dunántúl', 'Mezőgazdaság', 22.684], ['Közép-Dunántúl', 'Ipar', 222.544], ['Közép-Dunántúl', 'Szolgáltatás', 253.89], ['Nyugat-Dunántúl', 'Mezőgazdaság', 25.64], ['Nyugat-Dunántúl', 'Ipar', 202.794], ['Nyugat-Dunántúl', 'Szolgáltatás', 253.44], ['Dél-Dunántúl', 'Mezőgazdaság', 26.865], ['Dél-Dunántúl', 'Ipar', 122.281], ['Dél-Dunántúl', 'Szolgáltatás', 224.863], ['Észak-Magyarország', 'Mezőgazdaság', 21.866], ['Észak-Magyarország', 'Ipar', 186.662], ['Észak-Magyarország', 'Szolgáltatás', 276.754], ['Észak-Alföld', 'Mezőgazdaság', 48.301], ['Észak-Alföld', 'Ipar', 206.593], ['Észak-Alföld', 'Szolgáltatás', 384.82], ['Dél-Alföld', 'Mezőgazdaság', 56.402], ['Dél-Alföld', 'Ipar', 174.068], ['Dél-Alföld', 'Szolgáltatás', 329.982] ]); var options={ width: 500, }; var chart=new google.visualization.Sankey( document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 500px; height: 300px;"></div> </body> </html> |
A másik eredmény a Sankey-diagram képernyőképe, amelyről kiválóan leolvashatók az értékek:
A böngészőben megjelenő HTML oldalon a Sankey-diagram dinamikusan – az egérkurzor pozíciójától függően – képes az aktuális adatok megjelenítésére, mintegy lebegő jelmagyarázatként.
A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.
Aki gyakorolna: készítsen Sankey-diagramot, amely az évek/hónapok és a péntek 13 „viszonyát” ábrázolja. A kiinduló feladat itt található: Péntek 13
Sikerült egy ilyet összehoznom:
Ugye csoportváltással csináltad László és nem „kézzel”?
Az első 6 évet „kézzel” írtam meg. Ennyi kellett ahhoz, hogy kipróbáljam, hogyan kell megadni a diagramnak az adatokat. Utána megírtam Java-ban. Két, egymásba ágyazott csoportváltást használtam.
Kitartó és ügyes vagy!
Laci, elmagyarázod ezt a pénteki óra előtt?
Igen, a szokott helyen egy órával kezdés előtt ott leszek.
Én is, én is.
Aki gyakorolna: készítsen Java programmal Sankey-diagramot, amely a magyarországi vármegyék és autópályák/autóutak „viszonyát” ábrázolja. A KSH weboldalán megtalálható a szükséges adatforrás. Hasonló feladat az elinduláshoz: KSH táblázatból dolgozunk.
Sándor: köszönöm a feladatot. Laci ötlete alapján megoldottam. Ilyen lett:
Tetszik Máté. Feltöltöd a forráskódot ILIAS-ra?
Fenn van 🙂 Laci.
Én is átnéztem. Jó az adatforrás. Helyes a megoldás. Máté, László: örülök, hogy kooperáltatok.
Továbbgondoltam és kiegészítettem Máté. Leolvasható róla, melyik vármegyében hány út van, illetve az utak hány vármegyén haladnak át.
Tetszik Edina.