Kuinka analysoin kehittäjien trendejä JavaScript-pivot-taulukolla ja karttakirjastolla

Hei, dev-yhteisö!

Tänään haluaisin jakaa kokemukseni kehittäjien mieltymysten analysoinnista StackOverflow's Developer Survey -tulosten perusteella. Tietysti on paljon valmiita analyyttisiä raportteja, mutta on aina paljon jännittävämpää luoda henkilökohtainen projekti tyhjästä ja parantaa taitojamme tietojen analysointiin. Ja juuri sen teen. :)

Haasteet

Heti alusta alkaen haasteena oli löytää työkalu, joka kykenisi käsittelemään 100 kt: n tekstitietueita. Koska kyseessä on valtava aineisto, työkalun on oltava tehokas ja käytettävä mahdollisimman vähän selaimen muistia. Sen tulisi olla helppokäyttöinen samanaikaisesti. Onneksi löysin web-kääntötaulukon komponentin. Se näytti lupaavalta ensi silmäyksellä ja auttoi minua toteuttamaan kaikki raportointiin liittyvät aikomukseni.

Raportointimahdollisuuksien lisäksi huomasin, että se tuki integrointia karttakirjastojen kanssa. Valitsin FusionCharts. Se integroituu myös erilaisiin JavaScript-kehyksiin ja tarjoaa kehittyneitä kaavioita. Pivot-taulukon ja kaavion yhdistelmällä onnistuin luomaan pienen lemmikkiprojektin tietojen analysoinnista ja visualisoinnista.

Tavoitteet

Analyyttisiin tarkoituksiini kuului raportin luominen ja kyselyn tulosten visualisointi . Päätin keskittyä kehittäjien profiileihin, heidän työllisyystiloihinsa, rakastetuimpiin tekniikoihin, kieliin, kehyksiin ja kirjastoihin ja yhdistää nämä tiedot saadaksesi uusia oivalluksia.

Minulle oli esimerkiksi mielenkiintoista löytää kehittäjien taustat, jotka rakastavat tiettyä tekniikkaa. Seuraavana askeleena eteenpäin haluaisin analysoida eri tekniikoiden valinnan suhteita.

Tämä artikkeli on vaiheittainen opetusohjelma, jossa yritän käsitellä molempien työkalujen kanssa työskentelyn tärkeimmät näkökohdat.

Olen innoissani voidessani jakaa kanssasi interaktiivisen hallintapaneelin luomisen, jossa on poraus-, vedä-ja-pudota- ja karttatoiminnot.

Aloitetaan!

Asenna kirjastot projektiisi

Ensimmäisessä vaiheessa sinun on lisättävä kirjaston komentosarjat, Flexmonster-liitin FusionChartsille ja säilöt, joissa komponentit renderöidään.

Jos haluat luoda useita kaavioita, lisää niille lisää säilöjä.

Integroi pivot-taulukko

Lisää raportointityökalu projektiisi ja määritä sen perusmääritykset:

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

Saat lisätietoja pivot-taulukon mahdollisuuksien laajentamisesta erilaisilla ominaisuuksilla tutustumalla artikkeliin init API-kutsu.

Valmistele ja tuo tiedot

Aineistona olen valinnut kehittäjän kyselyn tulokset. Se sisältää 195 Mt raakatekstidataa.

Yksi tapa ladata tiedot pivot-taulukkoon on määrittelemällä funktio, joka palauttaa JSON-tiedot. Mutta koska en pysty näyttämään kaikkia tietoja CodePen-esittelyssä, koska sen koodikoko on rajoitettu. Jotta koodiani ei sekoittaisi, olen ladannut tiedoston CDN: ään ja asettanut polun tietolähteelleni:

dataSource: { filename: "surveyresults.csv" }

Aseta siivu

Järjestä hierarkiat ruudukkoon - laita ne riveihin, sarakkeisiin ja mittoihin. Voit myös lisätä raporttisuodattimia pitämään ruudukon siistinä ja lajittelemalla tiedot, jotta näet ensin osuvimmat tietueet.

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

Myöhemmin voit muuttaa leikkeen ajoaikaa vetämällä ja pudottamalla -toiminnolla - heti kun sinun on katsottava toista näkökulmaa.

Sido kaaviot ja nivelverkko yhteen

Tehdään kaavioihin pivot-taulukon tiedot. Liitä tätä varten tapahtumankäsittelijä reportcompleteFlexmonster-tapahtumaan. Se laukaistaan ​​heti, kun kääntöverkko on valmis toimimaan tietojen tarjoajana.

Koodi näyttää seuraavalta:

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

Mennään nyt koodin osaan, joka tekee kojelaudasta interaktiivisen.

Määritä toiminto, joka on vastuussa tietojen hankkimisesta raportista, kaavion luomisesta ja piirtämisestä.

In createFusionChart () , vedota getData () -menetelmää pivot taulukon esimerkiksi saada tietoja nykyisestä raportin tai viipaleen tarvitset. Tämä menetelmä esikäsittelee sen tietyn tyyppiseen kaavioon ja välittää tiedot callbackHandlerille ja updateHandlerille . Nämä käsittelijät määrittelevät, mitä tapahtuu, kun raportti näytetään ensimmäisen kerran tai kun tiedot päivitetään (suodatetaan, lajitellaan jne.). Vuonna callbackHandler , sinun täytyy instanssia kaavion ja lähettää tiedot sen. Aseta updateHandlerissa vain päivitetyt tiedot kaavioon ja hahmonna ne uudelleen.

Hurraa! Kaavio ja pivot-taulukko renderöidään samalla sivulla. Nyt kaavio näyttää ruudukon tiedot ja reagoi kaikkiin raporttiin tehtyihin muutoksiin.

Samalla tavalla voit lisätä niin monta kaaviota kuin tarvitset.

Tätä tietojen visualisointia varten olen valinnut kartta-, palkki- ja sarakekaaviot.

Mitä minulla on

Kaikkien näiden vaiheiden jälkeen minulla on täysin interaktiivinen hallintapaneeli, joka perustuu raportointityökaluun ja kaavioihin. Haluan jakaa kanssasi joitain näkemyksiä, jotka olen saanut kyselytutkimustiedoista.

Väestötiedot

Kaaviosta voidaan helposti nähdä, että suurin osa kyselyyn osallistuneista kehittäjistä asuu Yhdysvalloissa, Intiassa ja Kanadassa.

Ammatti

Yli 18k vastaajista on kokopäiväisiä opiskelijoita:

Lisäksi noin 80 000 kehittäjää kertoo koodaavansa vapaa-ajan ulkopuolella:

Oli mielenkiintoista selvittää yleisimmät kehitystyypit. Ne ovat taustakehittäjiä, koko pinon ja mobiilikehittäjiä:

Koulutus

Suurimmalla osalla vastaajista on vähintään kandidaatin tutkinto:

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: kaavioiden galleria