Forwarded from Data-Human Re(ve)lations
Нестандартные дашборды с примерами и исходным кодом (Часть I).
Мы привыкли пользоваться диаграммами для отображения данных, но что делать, когда обычных пайчартов и графиков недостаточно? Например, требуется наглядно показать связи между множеством различных элементов, или представить статистику с учетом иерархии.
На помощь приходят интерактивные графы, позволяющие выбирать из массива информации нужный слой и фокусировать на нем внимание. Например, диаграмма связей, глядя на которую легко понять что относится к целям, проблемам или действиям, достаточно лишь навести курсор на нужный сектор. С помощью такой диаграммы удобно представлять любые структурированные качественные данные, например, цели по SMART или OKR.
Пример: IA Adaptation
Для демонстрации связи внутри веток событий хорошо подходит кустовая диаграмма. На примере показаны типы вирусов, включая мутации, по всем случаям, зафиксированным с 2007 по 2020 годы. Этот график – альтернатива линейной диаграмме Ганта, с помощью него можно визуализировать любые асинхронные производственные процессы.
Пример: D3_Phylotree
Проблема классических дашбордов – сложно сразу выделить главное. Но ее с легкостью решают графики-пузыри. В них величина объектов зависит от их количественного содержания. В частности, в этом примере размер пузыря – это объем годовой выручки компании, размер сердцевины – объем прибыли, а цвет указывает на индустрию.
Пример: D3 Circle Packing, Bubble Chart with interaction
А вот граф, показывающий количество просмотров по категориям событий: “Музыкальные”, “Развлекательные”, “Спортивные” и т.д. Все объекты объединены в семейства и подсемейства, и на каждом уровне иерархии сразу видно лидеров – самые крупные пузыри. Между иерархическими слоями легко переключаться, это позволяет фокусировать внимание на актуальных в моменте данных. Идеально подходит для сведения маркетинговой статистики.
Пример: dsc530finalProjectV3
Ну и напоследок – тот же “баббл-граф”, только полностью интерактивный. Все элементы можно перемещать для собственного удобства, а также включать фильтрацию, убирая самые крупные пузыри из выборки, чтобы они не мешали работать с основной массой точек.
Пример: D3 V4 Bubble & Update Data/Force
Продолжение следует.
🏳️ Данные и исследования о человеке в бизнес среде - digital HR, UX и Dataviz на канале Data-Human Re(ve)lations
#dashboard #статистика #аналитика #данные #pie_chart #bubble_graph
Мы привыкли пользоваться диаграммами для отображения данных, но что делать, когда обычных пайчартов и графиков недостаточно? Например, требуется наглядно показать связи между множеством различных элементов, или представить статистику с учетом иерархии.
На помощь приходят интерактивные графы, позволяющие выбирать из массива информации нужный слой и фокусировать на нем внимание. Например, диаграмма связей, глядя на которую легко понять что относится к целям, проблемам или действиям, достаточно лишь навести курсор на нужный сектор. С помощью такой диаграммы удобно представлять любые структурированные качественные данные, например, цели по SMART или OKR.
Пример: IA Adaptation
Для демонстрации связи внутри веток событий хорошо подходит кустовая диаграмма. На примере показаны типы вирусов, включая мутации, по всем случаям, зафиксированным с 2007 по 2020 годы. Этот график – альтернатива линейной диаграмме Ганта, с помощью него можно визуализировать любые асинхронные производственные процессы.
Пример: D3_Phylotree
Проблема классических дашбордов – сложно сразу выделить главное. Но ее с легкостью решают графики-пузыри. В них величина объектов зависит от их количественного содержания. В частности, в этом примере размер пузыря – это объем годовой выручки компании, размер сердцевины – объем прибыли, а цвет указывает на индустрию.
Пример: D3 Circle Packing, Bubble Chart with interaction
А вот граф, показывающий количество просмотров по категориям событий: “Музыкальные”, “Развлекательные”, “Спортивные” и т.д. Все объекты объединены в семейства и подсемейства, и на каждом уровне иерархии сразу видно лидеров – самые крупные пузыри. Между иерархическими слоями легко переключаться, это позволяет фокусировать внимание на актуальных в моменте данных. Идеально подходит для сведения маркетинговой статистики.
Пример: dsc530finalProjectV3
Ну и напоследок – тот же “баббл-граф”, только полностью интерактивный. Все элементы можно перемещать для собственного удобства, а также включать фильтрацию, убирая самые крупные пузыри из выборки, чтобы они не мешали работать с основной массой точек.
Пример: D3 V4 Bubble & Update Data/Force
Продолжение следует.
#dashboard #статистика #аналитика #данные #pie_chart #bubble_graph
Please open Telegram to view this post
VIEW IN TELEGRAM
codepen.io
IA Adaptation
...