Hogyan elemeztem a fejlesztői trendeket egy JavaScript pivot táblával és egy diagramtárral

Szia, dev közösség!

Ma szeretném megosztani tapasztalataimat a fejlesztők preferenciáinak elemzéséről a StackOverflow fejlesztői felmérés eredményei alapján. Természetesen rengeteg kész analitikai jelentés található, de mindig sokkal izgalmasabb egy személyes projekt létrehozása a semmiből és az adatelemzési képességek fejlesztése. És pontosan ezt fogom tenni. :)

Kihívások

Már a kezdetektől fogva szembesültem egy olyan eszköz megtalálásával, amely képes kezelni a 100 ezer szöveges rekordot. Mivel ez egy hatalmas adatkészlet, az eszköznek hatékonynak kell lennie, és a lehető legkevesebb böngészőmemóriát kell használnia. Egyszerűen használhatónak kell lennie. Szerencsére találtam egy webes pivot tábla összetevőt. Első látásra ígéretesnek tűnt, és segített megvalósítani minden, a jelentéssel kapcsolatos szándékomat.

Jelentési képességein túl azt vettem észre, hogy támogatja a diagramtárakkal való integrációt. A FusionCharts-t választottam . Integrálódik a különböző JavaScript keretrendszerekkel és kifinomult diagramokat nyújt. A forgatótábla és a diagram kombinációjával sikerült létrehoznom egy apró kisállat-projektet az adatok elemzéséről és megjelenítéséről.

Célok és célok

Elemzési céljaim között szerepelt egy jelentés készítése és a felmérés eredményeinek megjelenítése . Úgy döntöttem, hogy a fejlesztők profiljára, foglalkoztatási státuszára, a legkedveltebb technológiákra, nyelvekre, keretrendszerekre és könyvtárakra összpontosítok, és ezeket az információkat egyesítem, hogy új betekintést nyerhessek.

Például számomra érdekes volt felfedezni a speciális technológiákat kedvelő fejlesztők hátterét. A következő lépésként szeretném elemezni a különböző technológiák kiválasztása közötti kapcsolatokat.

Ez a cikk lépésről-lépésre bemutató oktatóanyag lesz, amelyben megpróbálom bemutatni a mindkét eszközzel végzett munka legfontosabb szempontjait.

Örömmel osztom meg veletek az interaktív irányítópult létrehozásának folyamatát, amely átfúrási, áthúzási és diagramkészítési funkciókkal rendelkezik.

Kezdjük!

Telepítse a könyvtárakat a projektjébe

Első lépésként hozzá kell adnia a könyvtár szkriptjeit, a FusionCharts Flexmonster csatlakozóját és az összetevőket megjelenítő tárolókat.

Ha több diagramot szeretne létrehozni, adjon hozzá több tárolót hozzájuk.

Integráljon egy forgatótáblát

Adjon hozzá egy jelentési eszközt a projektjéhez, és állítsa be az alapvető konfigurációt:

var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true });

Ha meg szeretné tudni, hogyan lehet kibővíteni a pivot tábla lehetőségeit különféle tulajdonságokkal, tekintse meg az init API hívásról szóló cikket.

Készítse elő és importálja az adatokat

Adatkészletként a fejlesztői felmérés eredményeit választottam. 195 MB nyers szöveges adatot tartalmaz.

Az adatok egyik pivot táblába történő betöltésének egyik módja a JSON-adatokat visszaadó függvény meghatározása. De mivel a kódméret korlátozásai miatt nem tudom a teljes adatot megjeleníteni egy CodePen demóban. Annak érdekében, hogy ne keverjem össze a kódomat, betöltöttem egy fájlt a CDN-be, és beállítottam egy elérési utat az adatforrásomhoz:

dataSource: { filename: "surveyresults.csv" }

Állítson be egy szeletet

Rendezze el a hierarchiákat a rácson - tegye őket sorokba, oszlopokba és mértékekbe. Jelentésszűrőket is hozzáadhat, hogy a rács rendben maradjon, és az adatokat úgy rendezheti, hogy először a legrelevánsabb rekordokat láthassa.

"slice": { "reportFilters": [{ "uniqueName": "Country" }, { "uniqueName": "Gender" } ], "rows": [{ "uniqueName": "DevType" }], "columns": [{ "uniqueName": "[Measures]" }], "measures": [{ "uniqueName": "Salary", "aggregation": "average" }], "sorting": { "column": { "type": "desc", "tuple": [], "measure": { "uniqueName": "Salary", "aggregation": "average" } } } }

Később megváltoztathatja a szelet futási idejét a fogd és vidd funkcióval - amint más szemszögből kell megnéznie.

Kösse össze a diagramokat és az elforduló rácsot

Tegyük a diagramokat a pivot tábla adatainak megjelenítésére. Ehhez csatoljon egy eseménykezelőt reportcompletea Flexmonster eseményéhez. Amint a pivot rács készen áll az adatszolgáltató működésére, bekapcsol.

A kód a következőképpen néz ki:

reportcomplete: function() { pivot.off("reportcomplete"); createFusionChart(); }

Most térjünk rá arra a részre, amely interaktívvá teszi az irányítópultot.

Határozzon meg egy funkciót, amely felelős a jelentés adatainak megszerzéséért, a diagram létrehozásáért és megrajzolásáért.

A createFusionChart () alkalmazásban hívja meg a getData () metódust a kimutatási tábla példányában, hogy az aktuális jelentésből vagy a szükséges szeletből nyerje az adatokat. Ez a módszer előzetesen feldolgozza az adott típusú diagramhoz, és továbbítja az adatokat a callbackHandler és az updateHandler számára . Ezek a kezelők meghatározzák, hogy mi történik a jelentés első megjelenésekor vagy az adatok frissítésekor (szűrés, rendezés stb.). A callbackHandler alkalmazásban be kell állítania egy diagramot, és el kell küldenie neki az adatokat. Az updateHandler alkalmazásban egyszerűen állítsa be a frissített adatokat a diagramra, és adja meg újra.

Hurrá! A diagram és a pivot táblázat ugyanazon az oldalon jelenik meg. Most a diagram megmutatja a rács adatait, és reagál a jelentésre alkalmazott bármilyen változásra.

Hasonló módon annyi diagramot adhat hozzá, amennyire szüksége van.

Ehhez az adatmegjelenítéshez térképet, oszlopot és oszlopdiagramot választottam.

Amit kaptam

Mindezen lépések végrehajtása után kaptam egy teljesen interaktív irányítópultot, amely a jelentési eszköz és a diagramok alapján készült. Hadd osszam meg veletek néhány felismerést, amelyet a felmérés eredményeinek adatai alapján szereztem.

Demográfia

A grafikonon jól látható, hogy a legtöbb fejlesztő, aki részt vett a felmérésben, az Egyesült Államokban, Indiában és Kanadában él.

Foglalkozása

A válaszadók több mint 18 ezer fő nappali tagozatos hallgató:

Ezenkívül a fejlesztők mintegy 80 000-en azt mondják, hogy szabadidőben a munkán kívül kódolnak:

Érdekes volt megtudni a leggyakoribb fejlesztői típusokat. Háttér-, full-stack és mobil fejlesztők:

Oktatás

A válaszadók többsége rendelkezik legalább alapképzéssel:

More than 50.34K of developers majored in computer science, computer and software engineering:

More than 23K of developers learned to code within the past five years:

Frameworks, libraries, and tools

Let’s get to the most desired frameworks, libraries, and tools with which developers want to work in the next year:

As you see, .NET Core, Node.js, React and TensorFlow got the most votes.

Bringing it all together

Using developer-friendly APIs and guides of the pivot table and a charting library, I’ve managed to get a big picture of the trends in the developer community. I encourage you to dive deeper into data and share unique insights with your friends and teammates.

I hope this tutorial will inspire you to create your visualization project.

Thank you for reading!

Useful links

  • CodePen live demo
  • How to integrate Flexmonster with FusionCharts
  • FusionCharts: charts gallery