Широта данных, доступных нам в современном мире, поразительна. Однако данные, как правило, бесполезны в необработанном виде. Несмотря на то, что мы стремимся заполучить приятные, приятные наборы данных, настоящие деньги заключаются в анализе этих данных. Взяв его из необработанной табличной формы и сжав в графические изображения, можно визуально передать сообщение читателям. Эти данные могут варьироваться от петабайтов данных, анализируемых в многосерверных архитектурах Hadoop, до ваших личных финансов в простой электронной таблице Excel.
Независимо от того, какой инструмент вы выберете, вы, вероятно, захотите сделать с вашими данными одно из следующих действий:
Обобщать (сокращать). Как я упоминал выше, большие наборы табличных данных не могут быть легко интерпретированы человеком. Данные должны быть агрегированы таким образом, чтобы сделать их более краткими.
Подмножество (фильтр): чтобы принимать решения на основе данных, вам, вероятно, потребуется ограничить объем просматриваемых данных. Это может быть сделано для устранения выбросов или для того, чтобы сосредоточить анализ на подмножестве данных.
Преобразование (карта). Преобразование данных — важный шаг к тому, чтобы сделать ваши данные более доступными для пользователей. Это означало бы взять плохо названные категории и сделать их более удобными для пользователя.
Еще несколько определений, которые я хочу убрать с дороги, поскольку я собираюсь использовать их довольно широко:
Параметры. Это различные значения, которые мы используем для классификации наших данных. Наиболее распространенным примером будет месяц и год
Метрики. Это любые значения, которые вы хотите агрегировать в своем наборе данных. Числовые значения, такие как доход или количество.
Иерархии. Если у вас есть два или более параметров, являющихся подмножествами друг друга, их можно организовать в виде иерархии. Марка и модель автомобиля является ярким примером того, что каждая модель (Mustang, Charger) автомобиля принадлежит одной и только одной марке (Ford, Chevy), и каждая марка может иметь одну или несколько моделей.
Подробные параметры. Это самый низкий уровень детализации набора данных. Обычно они зарезервированы для низкоуровневого анализа и обычно не используются в визуализации данных. У вас может быть возможность перейти к этому уровню данных.
На этом давайте поговорим о том, зачем вы все пришли сюда. Получение данных из этих наборов данных и обработка их в JavaScript. Для этого упражнения я буду использовать D3 (https://d3js.org/). D3, или Data Driven Documents, — это фантастическая библиотека, выпущенная несколько лет назад для JavaScript. Он использует манипуляции с DOM для создания визуального представления данных в ваших HTML-документах. Мы будем использовать его здесь, чтобы создать несколько SVG, которые представляют набор данных, считываемый из электронной таблицы CSV (значения, разделенные запятыми). Мы также будем использовать прошлогодний набор данных BuzzFeed о фейковых новостях, потому что, давайте, кто не любит тщательно изучать фейковые новости («https://github.com/BuzzFeedNews/2016-12-fake-news- опрос")
Небольшое предупреждение: я собираюсь рассказать в основном о технических аспектах визуализации данных с помощью JavaScript. Я не буду обсуждать нюансы дизайна, аналитики, качества данных и тому подобное. Визуализации, которые мы будем делать, будут, по сути, довольно бесполезны с точки зрения аналитики, но послужат основой для самостоятельного создания более значимых визуализаций.
Начиная
Прежде всего, мы собираемся включить D3 в наш проект. Итак, создайте HTML-документ и добавьте D3. Вы можете сделать ссылку на локальную копию или получить ее из CDN:
Когда у вас есть D3, мы можем начать извлекать наши данные. Как я упоминал выше, мы используем CSV из репозитория BuzzFeed Github. Сохраните этот CSV-файл в том же каталоге, что и ваш HTML-документ, и мы получим его как таковой:
d3.csv(‘responses.csv’, function(data){
// data processing
});
где responses.csv — это загруженный нами набор данных. Следующее, что вы хотите сделать, это ознакомиться с данными, с которыми мы здесь работаем. Поставьте точку останова на строку кода, которую мы только что добавили, и давайте проверим ее.
В первую очередь стоит отметить, что набор данных, с которым мы работаем, составляет 18 тысяч записей. Очевидно, это соответствует нашим критериям для данных, которые следует уменьшить до более удобного размера. У нас есть несколько полей, которые могут служить измерениями. Начнем с заголовка. Заголовки — это буква, указывающая, какая статья была показана конкретному человеку, чтобы определить, вспомнили ли они эту статью. Чтобы обобщить это, мы собираемся использовать функцию сокращения JavaScript для массивов.
d3.csv(‘responses.csv’, function(data){
var A = data.reduce(function(a, b) {
(b.headline in a) ? a[b.headline][‘count’]++ : a[b.headline] = {“headline”: b.headline, “count”: 1};
return a;
}, {});
});
Здесь мы прогнали весь набор данных, проверяя заголовки. Если заголовок уже является частью нашего объекта (а), мы увеличиваем метрику (количество) для этого объекта (заголовка). Если это не так, мы создаем новый объект и инициализируем его счетчик равным 1. Давайте добавим еще одну точку останова в наш код и проверим созданный объект.
Теперь у нас есть гораздо более простой набор данных для работы. У нас есть 11 объектов, каждый из которых имеет собственный счет, соответствующий заданному заголовку.
Это все на данный момент. Пожалуйста, дайте мне знать в комментариях, если вам интересна эта тема и хотите ли вы увидеть больше. Если вам интересно увидеть рабочий пример, он доступен на GitHub https://github.com/ignoreintuition/Crushing-Data.
