Моя команда создала JoboboFlow, трекер для поиска работы. Вдохновленные досками Trello, мы хотели воссоздать этот опыт для наших одноклассников (и для нас), чтобы мы могли отслеживать наши заявления о приеме на работу и их статус. Ознакомьтесь с нашей ссылкой на Github или развернутой ссылкой.

В этой статье будет процесс создания диаграммы. У меня будет изображение кода, за которым следует объяснение этого изображения.

Почему Chart.js?

по оси x – этап собеседования, по оси y – количество вакансий

Поскольку мы хотели получить MVP в течение недели, Chart.js позволил нам создать анимированный график, который дает студентам (пользователям) ощущение поиска работы.

Chart.js был инструментом, который мы использовали для получения данных от наших пользователей (исходных данных) для динамического создания гистограммы, которая отображает заявки студента на работу по сравнению со средним значением когорты и средним значением всех студентов. Мы выбрали Chart.js, потому что у них были функции анимации, которые создавали приятный пользовательский интерфейс, который мы хотели, чтобы пользователи имели. Их примеры диаграмм и документации были простыми, и у них было достаточно времени, чтобы изучить график нашего проекта (одна неделя).

Код Chart.js

Во-первых, нам нужно было собирать данные с наших маршрутов. Каждая переменная (от p0 до p4) представляет разные данные, которые возвращаются через наши маршруты. P0 возвращает все задания от определенного идентификатора пользователя в массиве. P1 возвращает все задания в нашей базе данных в виде массива. P2 возвращает все задания в определенной когорте в виде массива. P3 возвращает всех пользователей в нашей базе данных в виде массива, а p4 возвращает всех пользователей в определенной когорте.

Результаты суммирования будут исходными данными для усреднения значений y всех учащихся и когорты.

С результатами на изображении 3 мы используем операторы for и if (изображение 4), чтобы суммировать количество вакансий на каждой панели «подать заявление», «собеседование по телефону» и «собеседование на месте».Для Например, чтобы получить количество рабочих мест, которые есть у пользователя на панели «телефонного интервью», мы проверяем, является ли ключ «телефонного интервью» истинным, и если да, мы добавляем единицу к переменной sumPhoneUser. Второй раздел суммирует общее количество вакансий в панели «телефонного интервью» для всех пользователей в базе данных. Это число используется для расчета среднего количества вакансий в панели «телефонное интервью» по всей базе. Тот же набор инструкций также применяется для получения суммы заданий в панелях интервью «по телефону» и «на месте» когорты.

Чтобы продолжить, это простые средние расчеты, чтобы получить среднее количество рабочих мест в панелях «подача заявки», «собеседование по телефону» и «собеседование на месте» для всех студентов и для определенной когорты.

Наконец, мы можем ввести расчеты в функцию гистограммы chart.js. Мы передаем набор параметров в строке 171, чтобы значения в ключе данных могли отражать правильное среднее значение и суммы заданий на каждой панели. Я также указал метки оси X в строке 179, а метки оси Y будут автоматически удалены с помощью chart.js. в разделе параметров в строке 203 мы можем отображать заголовки и добавлять дополнительные стили.

А как насчет D3?

Хотя Chart.js прекрасно работал для нашего проекта, мы приняли к сведению, что D3 достиг наших целей. Судя по документации, D3 имеет более широкий набор доступных графиков. Со временем мы надеемся использовать D3, поскольку это было бы уместно со значительным объемом данных. Используя их инструмент World Cloud, мы смогли увидеть наиболее распространенные позиции, на которые претендовали студенты. Используя карту дерева связей узла, мы могли получить представление о связях студента с людьми и компаниями.

Надежды и мечты JoboboFlow на будущее?

Некоторые из наших надежд на JoboboFlow заключаются в успешном включении API-интерфейсов поиска работы, таких как Indeed, LinkedIn и dice, добавлении дополнительной информации, отражающей данные, которые мы получаем, чтобы пользователи могли сравнивать свой путь поиска работы с другими и видеть, в каких областях им не хватает и что у них получается. in. И, наконец, если мы сможем интегрировать JoboboFlow с нашими текущими социальными сетями, такими как Facebook или LinkedIn, это будет удобно для студентов.

Для получения дополнительной информации: Прези-ссылка на JoboboFlow