Analysis of Developers Trends with JavaScript Pivot Table and Charting LibraryVeronika RovnikBlockedUnblockFollowFollowingMar 28Hi, dev community!Today I’d like to share my experience of analyzing developers preferences based on StackOverflow Developer’s Survey Results.
Of course, there are plenty of ready analytical reports but it’s always much more exciting to create a personal project from scratch and improve skills of data analysis.
And that’s exactly what I’m going to do.
:)ChallengesRight from the start, I’ve faced a challenge of finding a tool that can handle the processing of 100k text records.
Since it’s an enormous dataset, the tool needs to be powerful and use as little of browser memory as possible.
It should be simple-to-use at the same time.
Luckily, I’ve found a web pivot table component which functionality looked promising at first sight and helped me accomplish all my intentions related to reporting.
Beyond its reporting capabilities, I’ve noticed that it supports integration with charting libraries.
My choice fell on FusionCharts as it also integrates with different JavaScript frameworks and provides with sophisticated charts.
Using a combination of a pivot table and chart, I’ve managed to create a tiny pet project on data analysis and visualization.
Goals & objectivesMy analytical purposes included creating a report and visualizing the survey results.
I’ve decided to focus on developers’ profiles, their employment statuses, the most loved technologies, languages, frameworks, and libraries and unite this information to gain new insights.
For example, it was interesting for me to discover the backgrounds of developers who love specific technologies.
As the next step forward, I’d like to analyze relationships between choosing different technologies.
This article will be in the form of a step-by-step tutorial where I’ll try to cover the most important aspects of working with both tools.
I’m excited to share with you the process of creating an interactive dashboard featured with drill-through, drag-and-drop and charting functionality.
Let’s start!Install the libraries into your projectAs a first step, you need to add the libraries scripts, Flexmonster connector for FusionCharts and containers where the components will be rendered.
If you want to create multiple charts, add more containers for them.
Integrate a pivot tableAdd a reporting tool to your project and set its basic configuration:To find out how to extend the possibilities of the pivot table with various properties, you can check the article about init API call.
Prepare and import the dataAs a dataset, I’ve chosen the Developer’s Survey Results.
It contains 195 MB of raw text data.
One way to load the data into a pivot table is by defining the function that returns JSON data.
But as I can’t show the whole data in a CodePen demo due to its limitations on code size and so as not to clutter my code, I’ve loaded a file on CDN and set a path to my data source:Set a sliceArrange the hierarchies on the grid — put them into rows, columns, and measures.
Also, you can add report filters to keep your grid neat and sort the data to see the most relevant records first.
Later, you can change the slice in run time with the drag-and-drop feature — as soon as you need to take a look from a different perspective.
Bind charts and pivot grid togetherLet’s make the charts display the data from the pivot table.
For this, attach an event handler to the `reportcomplete` event of Flexmonster.
It is fired as soon as the pivot grid is ready to act as a data provider.
The code looks as follows:Now let’s get to the part of a code which will make a dashboard interactive.
Define a function that is responsible for getting the data from the report, creating and drawing the chart.
In createFusionChart(), invoke the getData() method on the pivot table instance to get the data from the current report or the slice you need.
This method pre-processes it to the given type of a chart and passes the data to the callbackHandler and updateHandler.
These handlers specify what happens once the report is displayed for the first time or when the data is updated (filtered, sorted, etc).
In callbackHandler, you need to instantiate a chart and send the data to it.
In updateHandler, simply set the updated data to the chart and render it again.
Hooray!.The chart and pivot table are rendered on the same page.
Now the chart shows the data from the grid and reacts to any changes applied to the report.
In a similar manner, you can add as many charts as you need.
For this data visualization, I’ve chosen a map, bar and column charts.
What I’ve gotAfter following all these steps, I’ve got a totally interactive dashboard based on the reporting tool and charts.
Let me share with you some of the insights I’ve gained from the survey results data.
DemographicsIt can be easily seen from the graph that most developers who took the survey live in the United States, India, and Canada.
OccupationMore than 18k of respondents are full-time students:Besides, around 80k of developers say they code outside of work in free time:It was interesting to find out the most popular types of developers.
They are back-end, full-stack, and mobile developers:EducationMost of the respondents have at least a bachelor’s degree: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 toolsLet’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 togetherUsing 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’s 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 linksCodePen live demoHow to integrate Flexmonster with FusionChartsFusionCharts: charts gallery.