Как я проанализировал тенденции разработчика с таблицей Pivot JavaScript и библиотекой Charting

Автор оригинала: Veronika Rovnik.

Привет, сообщество Dev!

Сегодня я хотел бы поделиться своим опытом анализа предпочтений разработчиков на основе Результаты опроса разработчика Stackoverflow Отказ Конечно, есть много готовых Аналитические отчеты Но всегда гораздо интересно создавать личный проект с нуля и улучшить наши навыки анализа данных. И это именно то, что я собираюсь сделать.:)

Вызовы

С самого начала я столкнулся с проблемой нахождения инструмента, который может обрабатывать обработку 100K текстовых записей. Поскольку он является огромным набором данных, инструмент должен быть мощным и использовать как можно меньше памяти браузера. Это должно быть просто в использовании одновременно. К счастью, я нашел Web Pivot Table составная часть. Это выглядело перспективным с первого взгляда и помогло мне достичь всех моих намерений, связанных с отчетностью.

Помимо своих возможностей отчетности, я заметил, что она поддерживала интеграцию с библиотеками графиков. Я выбрал Fusioncharts. Он также интегрируется с различными каркасами JavaScript и обеспечивает сложные диаграммы. Используя комбинацию таблицы и диаграммы Pivot, мне удалось создать Tiny Pet Project на анализ данных и визуализации данных.

Цели задачи

Мои аналитические цели включены Создание отчета и Визуализация результатов опроса Отказ Я решил сосредоточиться на профилях разработчиков, их статуса занятости, самые любимые технологии, языки, рамки и библиотеки и объединяют эту информацию, чтобы получить новые идеи.

Например, мне было интересно обнаружить фоны разработчиков, которые любят конкретные технологии. Как следующий шаг вперед, я хотел бы проанализировать отношения между выбором различных технологий.

Эта статья будет в форме пошаговый учебник Где я постараюсь прикрыть самые важные аспекты работы с обоими инструментами.

Я взволнован, чтобы поделиться с вами процессом создания интерактивной панели мониторинга, представленной с помощью сверла, перетаскивания и функционал DRAP и CHARTING.

Давайте начнем!

Установите библиотеки в свой проект

В качестве первого шага необходимо добавить библиотечные скрипты, разъем FlexMonster для Fusioncharts, а контейнеры, где будут отображаться компоненты.

Если вы хотите создать несколько графиков, добавьте больше контейнеров для них.

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

Добавьте инструмент отчетности в свой проект и установите его базовую конфигурацию:

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

Чтобы выяснить, как расширить возможности Pivot Table с различными свойствами, вы можете проверить статью о init API звонить Отказ

Подготовьте и импортируйте данные

Как набор данных, я выбрал результаты опроса разработчика. Он содержит 195 МБ из необработанных текстовых данных.

Один из способов загрузки данных в таблицу пивота – определение функции, которая возвращает данные JSON. Но, поскольку я не могу показать все данные в демонстрационной демонстрации из-за его ограничений по размеру кода. Чтобы не загромождать мой код, я загрузил файл на CDN и установил путь к моему источнику данных:

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

Позже вы можете изменить ломтик во время работы с Перетаскивание Особенность – как только вам нужно взглянуть на другую перспективу.

Связать диаграммы и сетку сетки вместе

Давайте сделаем графики отображать данные из таблицы Pivot. Для этого прикрепите обработчик событий к ReportComplete Мероприятие Flexmonster. Он уволен, как только сетка Pivot готова выступить в качестве поставщика данных.

Код выглядит следующим образом:

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

Теперь давайте доберемся до части кода, которая сделает приборную панель интерактивной.

Определите функцию, которая отвечает за получение данных из отчета, создавая и нанесение диаграммы.

В createfusionchart () вызовите getdata () Метод в экземпляре таблицы Pivot, чтобы получить данные из текущего отчета или нарезки, который вам нужен. Этот метод предварительно обрабатывает его к данному типу диаграммы и передает данные для Callbackhandler и updateHandler Отказ Эти обработчики указывают, что произойдет, как только отчет отображается впервые или когда данные обновлены (отфильтрованы, отсортированы и т. Д.). В Callbackhandler , вам нужно создать диаграмму и отправлять ему данные. В updateHandler , просто установите обновленные данные на диаграмму и еще раз редактируйте.

Ура! Таблица диаграммы и пивота отображаются на той же странице. Теперь график показывает данные из сетки и реагирует на любые изменения, применяемые к отчету.

Аналогичным образом вы можете добавить столько графиков, сколько вам нужно.

Для этой визуализации данных я выбрал карту, бар и столбцы диаграммы.

То, что у меня есть

После выполнения всех этих шагов у меня есть совершенно Интерактивная приборная панель на основе инструмента и диаграммы отчетности. Позвольте мне поделиться с вами, некоторые из пониманий, которые я получил из данных результатов опроса.

Демография

Он может быть легко видно из графика, который большинство разработчиков, которые взяли опрос, живут в Соединенных Штатах, Индии и Канаде.

Занятие

Более 18 тысяч респондентов являются штатными учениками:

Кроме того, около 80 тысяч разработчиков говорят, что они код вне работы в свободное время:

Было интересно узнать самые распространенные виды разработчиков. Они возвращаются, полный стек и мобильные разработчики:

Образование

У большинства респондентов есть как минимум степень бакалавра:

Более 50,34К разработчиков, специализирующихся в информатике, компьютерной и программной технике:

Более 2 кварта разработчиков научились кодировать в течение последних пяти лет:

Фрезы, библиотеки и инструменты

Давайте доберемся до самых желаемых рамх, библиотек и инструментов, с которыми хотят работать разработчики в следующем году:

Как вы видите, .NET Core, Node.js, React и Tensorflow получили наибольшее количество голосов.

Принося все это вместе

Использование устройства для разработчиков API и руководства таблицы Pivot и библиотека Charting, мне удалось получить большую картину тенденций в сообществе разработчика. Я рекомендую вам погрузиться глубже в данные и поделиться уникальным пониманием ваших друзей и товарищей по команде.

Я надеюсь, что это учебное пособие вдохновляет вас создать ваш проект визуализации.

Спасибо за чтение!

Полезные ссылки

Оригинал: “https://www.freecodecamp.org/news/analysis-of-developers-trends-with-javascript-pivot-table-and-charting-library-b7b6e16ab71b/”