Hvordan jeg analyserede udviklertendenser med en JavaScript-pivottabel og et diagrambibliotek

Hej, dev community!

I dag vil jeg gerne dele min erfaring med at analysere udvikleres præferencer baseret på StackOverflow's Developer Survey Results. Selvfølgelig er der masser af klare analytiske rapporter, men det er altid meget mere spændende at oprette et personligt projekt fra bunden og forbedre vores evner til dataanalyse. Og det er præcis, hvad jeg vil gøre. :)

Udfordringer

Lige fra starten stod jeg over for en udfordring med at finde et værktøj, der kunne håndtere behandlingen af ​​100.000 tekstoptegnelser. Da det er et enormt datasæt, skal værktøjet være kraftigt og bruge så lidt browserhukommelse som muligt. Det skal være let at bruge på samme tid. Heldigvis fandt jeg en komponent til web-pivottabeller . Det så lovende ud ved første øjekast og hjalp mig med at gennemføre alle mine intentioner i forbindelse med rapportering.

Ud over dets rapporteringsfunktioner bemærkede jeg, at det understøttede integration med kortbiblioteker. Jeg valgte FusionCharts. Det integreres også med forskellige JavaScript-rammer og giver sofistikerede diagrammer. Ved hjælp af en kombination af en pivottabel og et diagram lykkedes det mig at oprette et lille kæledyrsprojekt om dataanalyse og visualisering.

Mål og mål

Mine analytiske formål omfattede oprettelse af en rapport og visualisering af undersøgelsesresultaterne . Jeg besluttede at fokusere på udvikleres profiler, deres beskæftigelsesstatus, de mest elskede teknologier, sprog, rammer og biblioteker og forene disse oplysninger for at få ny indsigt.

For eksempel var det interessant for mig at opdage baggrunden for udviklere, der elsker specifikke teknologier. Som det næste skridt fremad vil jeg gerne analysere forholdet mellem valg af forskellige teknologier.

Denne artikel vil være i form af en trinvis vejledning, hvor jeg vil forsøge at dække de vigtigste aspekter ved at arbejde med begge værktøjer.

Jeg er begejstret for at dele med dig processen med at oprette et interaktivt instrumentbræt, der er udstyret med drill-through, træk og slip og kortlægningsfunktionalitet.

Lad os begynde!

Installer bibliotekerne i dit projekt

Som et første trin skal du tilføje biblioteksskripter, Flexmonster-stik til FusionCharts og containere, hvor komponenterne gengives.

Hvis du vil oprette flere diagrammer, skal du tilføje flere containere til dem.

Integrer et pivottabel

Føj et rapporteringsværktøj til dit projekt, og indstil dets grundlæggende konfiguration:

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

For at finde ud af, hvordan du udvider mulighederne for pivottabellen med forskellige egenskaber, kan du tjekke artiklen om init API-opkald.

Forbered og importer dataene

Som datasæt har jeg valgt udviklerens undersøgelsesresultater. Den indeholder 195 MB rå tekstdata.

En måde at indlæse dataene i en pivottabel er ved at definere den funktion, der returnerer JSON-data. Men da jeg ikke kan vise hele dataene i en CodePen-demo på grund af dens begrænsninger på kodestørrelse. For ikke at rodde min kode har jeg indlæst en fil på CDN og indstillet en sti til min datakilde:

dataSource: { filename: "surveyresults.csv" }

Sæt et stykke

Arranger hierarkierne på gitteret - læg dem i rækker, kolonner og mål. Du kan også tilføje rapportfiltre for at holde dit net pænt og sortere dataene for at se de mest relevante poster først.

"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" } } } }

Senere kan du ændre udsnittet i løbetid med træk-og-slip- funktionen - så snart du har brug for at se på det fra et andet perspektiv.

Bind diagrammer og drejegitter sammen

Lad os få diagrammerne til at vise dataene fra pivottabellen. Til dette skal du vedhæfte en begivenhedshåndterer til reportcompletebegivenheden i Flexmonster. Det affyres, så snart omdrejningsgitteret er klar til at fungere som dataudbyder.

Koden ser således ud:

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

Lad os nu komme til den del af en kode, der gør et dashboard interaktivt.

Definer en funktion, der er ansvarlig for at hente dataene fra rapporten, oprette og tegne diagrammet.

I createFusionChart () skal du påberåbe sig getData () -metoden i pivottabelforekomsten for at hente dataene fra den aktuelle rapport eller det udsnit, du har brug for. Denne metode forbehandler den til den givne diagramtype og videregiver dataene til callbackHandler og updateHandler . Disse håndterere specificerer, hvad der sker, når rapporten vises for første gang, eller når dataene opdateres (filtreret, sorteret osv.). I callbackHandler skal du instantiere et diagram og sende dataene til det. I updateHandler skal du blot indstille de opdaterede data til diagrammet og gengive dem igen.

Hurra! Diagrammet og pivottabellen gengives på samme side. Nu viser diagrammet dataene fra nettet og reagerer på de ændringer, der er anvendt i rapporten.

På en lignende måde kan du tilføje så mange diagrammer, som du har brug for.

Til denne datavisualisering har jeg valgt et kort, søjle og søjlediagrammer.

Hvad jeg har

Efter at have fulgt alle disse trin har jeg et helt interaktivt instrumentbræt baseret på rapporteringsværktøjet og diagrammerne. Lad mig dele med dig nogle af de indsigter, jeg har fået fra undersøgelsesresultatdataene.

Demografi

Det kan let ses af grafen, at de fleste udviklere, der deltog i undersøgelsen, bor i USA, Indien og Canada.

Beskæftigelse

Mere end 18.000 respondenter er fuldtidsstuderende:

Desuden siger omkring 80k udviklere, at de koder uden for arbejdet i fritid:

Det var interessant at finde ud af de mest almindelige typer udviklere. De er back-end, full-stack og mobile udviklere:

Uddannelse

De fleste af respondenterne har mindst en bachelorgrad:

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: diagrammer galleri