Bok, razvojna zajednica!
Danas bih želio podijeliti svoje iskustvo analiziranja preferencija programera na temelju rezultata ankete programera StackOverflow. Naravno, postoji puno spremnih analitičkih izvještaja, ali uvijek je puno uzbudljivije stvoriti osobni projekt od nule i poboljšati naše vještine analize podataka. I upravo to ću učiniti. :)
Izazovi
Od samog početka suočio sam se s izazovom pronalaska alata koji bi se mogao nositi s obradom 100k zapisa teksta. Budući da se radi o enormnom skupu podataka, alat mora biti moćan i koristiti što manje memorije preglednika. Trebao bi biti jednostavan za korištenje u isto vrijeme. Srećom, pronašao sam komponentu web pivot table . Na prvi pogled izgledalo je obećavajuće i pomoglo mi je ostvariti sve moje namjere povezane s izvještavanjem.
Osim mogućnosti izvještavanja, primijetio sam da podržava integraciju s knjižnicama grafikona. Odabrao sam FusionCharts. Također se integrira s različitim JavaScript okvirima i pruža sofisticirane grafikone. Korištenjem kombinacije zaokretne tablice i grafikona uspio sam stvoriti maleni projekt kućnog ljubimca o analizi i vizualizaciji podataka.
Ciljevi i zadaci
Moje analitičke svrhe uključivale su izradu izvještaja i vizualizaciju rezultata ankete . Odlučio sam se usredotočiti na profile programera, njihov status zaposlenja, najomiljenije tehnologije, jezike, okvire i knjižnice i objediniti ove informacije kako bih stekao nove uvide.
Na primjer, bilo mi je zanimljivo otkriti pozadinu programera koji vole određene tehnologije. Kao sljedeći korak naprijed, želio bih analizirati odnos između odabira različitih tehnologija.
Ovaj će članak biti u obliku detaljnog vodiča u kojem ću pokušati obuhvatiti najvažnije aspekte rada s oba alata.
Oduševljen sam što ću s vama podijeliti postupak stvaranja interaktivne nadzorne ploče s funkcijama detaljnog provlačenja, povlačenja i ispuštanja i grafikona.
Počnimo!
Instalirajte knjižnice u svoj projekt
Kao prvi korak, morate dodati skripte knjižnice, Flexmonster konektor za FusionCharts i spremnike u koje će se komponente prikazati.
Ako želite stvoriti više grafikona, dodajte više spremnika za njih.
Integrirajte zaokretnu tablicu
Dodajte svoj alat za izvještavanje u svoj projekt i postavite njegovu osnovnu konfiguraciju:
var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true });Da biste saznali kako proširiti mogućnosti zaokretne tablice s različitim svojstvima, možete provjeriti članak o init API pozivu.
Pripremite i uvezite podatke
Kao skup podataka odabrao sam rezultate ankete programera. Sadrži 195 MB sirovih tekstualnih podataka.
Jedan od načina učitavanja podataka u zaokretnu tablicu je definiranjem funkcije koja vraća JSON podatke. Ali kako ne mogu prikazati cijele podatke u demo CodePen-u zbog ograničenja veličine koda. Kako ne bih pretrpao svoj kod, učitao sam datoteku na CDN i postavio put do svog izvora podataka:
dataSource: { filename: "surveyresults.csv" }Postavite krišku
Složite hijerarhije na mreži - stavite ih u retke, stupce i mjere. Također, možete dodati filtre izvješća kako biste održavali mrežu urednom i sortirali podatke da biste prvo vidjeli najrelevantnije zapise.
"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" } } } }Kasnije možete promijeniti krišku u vremenu izvođenja pomoću značajke povlačenja i ispuštanja - čim trebate pogledati iz druge perspektive.
Povežite grafikone i zaokrenite mrežu
Učinimo da grafikoni prikazuju podatke iz zaokretne tablice. Za to, reportcompleteFlexmonsteru priložite obrađivač događaja. Aktivira se čim je stožerna mreža spremna da djeluje kao pružatelj podataka.
Kôd izgleda na sljedeći način:
reportcomplete: function() { pivot.off("reportcomplete"); createFusionChart(); }Sada ćemo prijeći na dio koda koji će nadzornu ploču učiniti interaktivnom.
Definirajte funkciju koja je odgovorna za dobivanje podataka iz izvješća, izradu i crtanje grafikona.
U createFusionChart () , pozvati na GetData () metodu na stožer tablice primjer kako bi dobili podatke iz trenutne izvješća ili kriška vam je potrebno. Ova metoda ga prethodno obrađuje na zadanu vrstu grafikona i prosljeđuje podatke callbackHandleru i updateHandleru . Ovi rukovatelji određuju što se događa nakon što se izvješće prikaže prvi put ili kada se podaci ažuriraju (filtriraju, sortiraju itd.). U callbackHandleru morate napraviti instancu grafikona i poslati mu podatke. U updateHandler jednostavno postavite ažurirane podatke na grafikon i ponovo ih prikažite .
Ura! Grafikon i zaokretna tablica prikazuju se na istoj stranici. Sada grafikon prikazuje podatke iz mreže i reagira na sve promjene primijenjene na izvješću.
Na sličan način možete dodati onoliko grafikona koliko vam je potrebno.
Za ovu vizualizaciju podataka odabrao sam karte, trake i stupce.
Što imam
Nakon svih ovih koraka, dobio sam potpuno interaktivnu nadzornu ploču na temelju alata za izvještavanje i grafikona. Dopustite mi da podijelim s vama neke uvide do kojih sam stekao podatke o rezultatima ankete.
Demografski podaci
Iz grafikona se lako može vidjeti da većina programera koji su sudjelovali u anketi žive u Sjedinjenim Državama, Indiji i Kanadi.
Okupacija
Više od 18 tisuća ispitanika redoviti su studenti:
Osim toga, oko 80 tisuća programera kaže da u slobodno vrijeme kodiraju izvan posla:
Bilo je zanimljivo saznati najčešće tipove programera. Oni su back-end, full-stack i mobilni programeri:
Obrazovanje
Većina ispitanika ima barem diplomu:
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