Како сам анализирао трендове програмера помоћу ЈаваСцрипт пивот табеле и библиотеке графикона

Здраво, развојна заједница!

Данас бих желео да поделим своје искуство анализирања преференција програмера на основу резултата анкете програмера СтацкОверфлов. Наравно, има доста спремних аналитичких извештаја, али увек је много узбудљивије створити лични пројекат од нуле и побољшати наше вештине анализе података. И управо то ћу учинити. :)

Изазови

Од самог почетка суочио сам се са изазовом да нађем алат који би могао да се носи са обрадом 100к записа текста. С обзиром на то да је реч о огромном скупу података, алат мора бити моћан и користити што мање меморије прегледача. Требало би да буде истовремено једноставно за употребу. Срећом, нашао сам компоненту веб пивот табеле . На први поглед је изгледало обећавајуће и помогло ми је да остварим све своје намере повезане са извештавањем.

Поред могућности извештавања, приметио сам да подржава интеграцију са библиотекама графикона. Изабрао сам ФусионЦхартс. Такође се интегрише са различитим ЈаваСцрипт оквирима и пружа софистициране табеле. Комбинацијом пивот табеле и графикона успео сам да створим малени пројекат кућног љубимца о анализи и визуализацији података.

Циљеви

Моје аналитичке сврхе укључивале су стварање извештаја и визуализацију резултата анкете . Одлучио сам да се усредсредим на профиле програмера, њихов статус запослења, најомиљеније технологије, језике, оквире и библиотеке и објединим ове информације како бих стекао нове увиде.

На пример, било ми је занимљиво открити позадину програмера који воле одређене технологије. Као следећи корак напред, желео бих да анализирам везе између избора различитих технологија.

Овај чланак биће у облику детаљног водича у којем ћу покушати да обухватим најважније аспекте рада са оба алата.

Узбуђена сам што ћу са вама поделити поступак стварања интерактивне контролне табле са функцијама детаљног провлачења, превлачења и испуштања и графикона.

Почнимо!

Инсталирајте библиотеке у свој пројекат

Као први корак, морате додати скрипте библиотеке, Флекмонстер конектор за ФусионЦхартс и контејнере у којима ће се компоненте приказивати.

Ако желите да направите више графикона, додајте још контејнера за њих.

Интегришите пивот табелу

Додајте свој алат за извештавање у свој пројекат и поставите његову основну конфигурацију:

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

Да бисте сазнали како проширити могућности заокретне табеле са различитим својствима, можете погледати чланак о инит АПИ позиву.

Припремите и увезите податке

Као скуп података одабрао сам резултате анкете програмера. Садржи 195 МБ сирових текстуалних података.

Један од начина за учитавање података у пивот табелу је дефинисање функције која враћа ЈСОН податке. Али како не могу да прикажем целокупне податке у демо ЦодеПен-у због ограничења величине кода. Да не бих претрпао свој код, учитао сам датотеку на ЦДН и поставио путању до свог извора података:

dataSource: { filename: "surveyresults.csv" }

Поставите кришку

Распоредите хијерархије на мрежи - ставите их у редове, колоне и мере. Такође, можете додати филтере за извештаје да бисте одржавали мрежу уредном и сортирали податке да бисте прво видели најрелевантније записе.

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

Касније можете да промените рез у времену извођења помоћу функције превлачења и испуштања - чим требате погледати из друге перспективе.

Повежите графиконе и заокрените мрежу заједно

Учинимо да графикони приказују податке из пивот табеле. За ово, приложите reportcompleteобрађивач догађаја догађају Флекмонстер. Активира се чим је стожерна мрежа спремна да делује као добављач података.

Код изгледа овако:

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

Сада идемо на део кода који ће контролну таблу учинити интерактивним.

Дефинишите функцију која је одговорна за добијање података из извештаја, стварање и цртање графикона.

У цреатеФусионЦхарт () позовите методу гетДата () на инстанци пивот табеле да бисте добили податке из тренутног извештаја или одсечка који вам је потребан. Ова метода га претходно обрађује на дати тип графикона и прослеђује податке цаллбацкХандлер-у и упдатеХандлер-у . Ови руковаоци одређују шта се дешава након што се извештај прикаже први пут или када се подаци ажурирају (филтрирају, сортирају итд.). У цаллбацкХандлер-у морате направити инстанцу графикона и послати јој податке. У упдатеХандлер једноставно поставите ажуриране податке на графикон и поново их прикажите .

Ура! Графикон и заокретна табела приказују се на истој страници. Сада графикон приказује податке из мреже и реагује на све промене примењене на извештај.

На сличан начин можете додати онолико графикона колико вам је потребно.

За ову визуализацију података изабрао сам мапе, траке и графиконе колона.

Шта имам

Након свих ових корака, добио сам потпуно интерактивну контролну таблу засновану на алату за извештавање и графиконима. Дозволите ми да поделим са вама неке увиде које сам стекао из података резултата анкете.

Демографија

Из графикона се лако може видети да већина програмера који су узели анкету живи у Сједињеним Државама, Индији и Канади.

Занимање

Више од 18 хиљада испитаника су редовни студенти:

Осим тога, око 80.000 програмера каже да у слободно време кодирају ван посла:

Било је занимљиво сазнати најчешће типове програмера. Они су бацк-енд, фулл-стацк и мобилни програмери:

образовање

Већина испитаника има најмање диплому:

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
  • ФусионЦхартс: галерија графикона