Cómo analicé las tendencias de los desarrolladores con una tabla dinámica de JavaScript y una biblioteca de gráficos

¡Hola, comunidad de desarrolladores!

Hoy me gustaría compartir mi experiencia de analizar las preferencias de los desarrolladores en función de los resultados de la encuesta para desarrolladores de StackOverflow. Por supuesto, hay muchos informes analíticos listos , pero siempre es mucho más emocionante crear un proyecto personal desde cero y mejorar nuestras habilidades de análisis de datos. Y eso es exactamente lo que voy a hacer. :)

Desafíos

Desde el principio, enfrenté el desafío de encontrar una herramienta que pudiera manejar el procesamiento de registros de texto de 100k. Dado que es un conjunto de datos enorme, la herramienta debe ser potente y utilizar la menor cantidad de memoria del navegador posible. Debe ser fácil de usar al mismo tiempo. Afortunadamente, encontré un componente de tabla dinámica web . Parecía prometedor a primera vista y me ayudó a lograr todas mis intenciones relacionadas con los informes.

Más allá de sus capacidades de generación de informes, noté que admitía la integración con bibliotecas de gráficos. Elegí FusionCharts. También se integra con diferentes marcos de JavaScript y proporciona gráficos sofisticados. Usando una combinación de tabla dinámica y gráfico, logré crear un pequeño proyecto favorito sobre análisis y visualización de datos.

Metas objetivos

Mis propósitos analíticos incluyeron la creación de un informe y la visualización de los resultados de la encuesta . Decidí centrarme en los perfiles de los desarrolladores, sus estados laborales, las tecnologías, los lenguajes, los marcos y las bibliotecas más queridos, y unir esta información para obtener nuevos conocimientos.

Por ejemplo, fue interesante para mí descubrir los antecedentes de los desarrolladores que aman tecnologías específicas. Como próximo paso adelante, me gustaría analizar las relaciones entre la elección de diferentes tecnologías.

Este artículo tendrá la forma de un tutorial paso a paso donde intentaré cubrir los aspectos más importantes del trabajo con ambas herramientas.

Me complace compartir con ustedes el proceso de creación de un panel interactivo con funciones de obtención de detalles, arrastrar y soltar y gráficos.

¡Empecemos!

Instale las bibliotecas en su proyecto

Como primer paso, debe agregar los scripts de la biblioteca, el conector Flexmonster para FusionCharts y los contenedores donde se procesarán los componentes.

Si desea crear varios gráficos, agregue más contenedores para ellos.

Integrar una tabla dinámica

Agregue una herramienta de informes a su proyecto y establezca su configuración básica:

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

Para saber cómo ampliar las posibilidades de la tabla dinámica con varias propiedades, puede consultar el artículo sobre la llamada a la API init.

Preparar e importar los datos

Como conjunto de datos, elegí los Resultados de la encuesta para desarrolladores. Contiene 195 MB de datos de texto sin procesar.

Una forma de cargar los datos en una tabla dinámica es definiendo la función que devuelve datos JSON. Pero como no puedo mostrar todos los datos en una demostración de CodePen debido a sus limitaciones en el tamaño del código. Para no desordenar mi código, cargué un archivo en CDN y establecí una ruta a mi fuente de datos:

dataSource: { filename: "surveyresults.csv" }

Establecer una rebanada

Organice las jerarquías en la cuadrícula, colóquelas en filas, columnas y medidas. Además, puede agregar filtros de informe para mantener su cuadrícula ordenada y ordenar los datos para ver primero los registros más relevantes.

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

Más tarde, puede cambiar el corte en tiempo de ejecución con la función de arrastrar y soltar , tan pronto como necesite mirar desde una perspectiva diferente.

Vincular gráficos y cuadrícula dinámica juntos

Hagamos que los gráficos muestren los datos de la tabla dinámica. Para ello, adjunte un controlador de reportcompleteeventos al evento de Flexmonster. Se activa tan pronto como la cuadrícula dinámica está lista para actuar como proveedor de datos.

El código tiene el siguiente aspecto:

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

Ahora vayamos a la parte de un código que hará que un tablero sea interactivo.

Defina una función que se encargue de obtener los datos del informe, creando y dibujando el gráfico.

En createFusionChart () , invoque el método getData () en la instancia de la tabla dinámica para obtener los datos del informe actual o del segmento que necesita. Este método lo preprocesa en el tipo de gráfico dado y pasa los datos a callbackHandler y updateHandler . Estos controladores especifican lo que sucede una vez que el informe se muestra por primera vez o cuando los datos se actualizan (filtrados, ordenados, etc.). En callbackHandler , debe crear una instancia de un gráfico y enviarle los datos. En updateHandler , simplemente configure los datos actualizados en el gráfico y vuelva a renderizarlos.

¡Hurra! El gráfico y la tabla dinámica se representan en la misma página. Ahora, el gráfico muestra los datos de la cuadrícula y reacciona a cualquier cambio aplicado al informe.

De manera similar, puede agregar tantos gráficos como necesite.

Para esta visualización de datos, he elegido gráficos de mapa, barras y columnas.

Lo que tengo

Después de seguir todos estos pasos, tengo un tablero totalmente interactivo basado en la herramienta de informes y los gráficos. Permítanme compartir con ustedes algunas de las ideas que obtuve de los datos de los resultados de la encuesta.

Demografía

Se puede ver fácilmente en el gráfico que la mayoría de los desarrolladores que realizaron la encuesta viven en los Estados Unidos, India y Canadá.

Ocupación

Más de 18k de los encuestados son estudiantes a tiempo completo:

Además, alrededor de 80.000 desarrolladores dicen que codifican fuera del trabajo en tiempo libre:

Fue interesante conocer los tipos de desarrolladores más comunes. Son desarrolladores de back-end, full-stack y móviles:

Educación

La mayoría de los encuestados tienen al menos una licenciatura:

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