COVID-19 Индия Визуализация

Я наткнулся на надежные краудсорсинговые данные о COVID-19 для Индии. Хотел попробовать визуализировать это. Создал веб-страницу с библиотекой Angular и ng2-charts. Выберите пузырьковую диаграмму для визуализации; Пытался сделать его интерактивным и в то же время удобным для мобильных устройств. Ниже приводится краткое описание моего проекта выходного дня.

COVID-19 Индия Визуализация

Пузырьковая диаграмма на основе Angular для данных Corona Virus

На веб-странице отображаются данные о COVID-19 на государственном уровне. Перейдите по этой ссылке, чтобы поиграть с приложением. Веб-страница использует услуги, предоставляемые Covid-19 India Org, краудсорсинговой волонтерской организацией. Большой привет и благодарность Covid19India.org. Удивительно, чего им удалось добиться с волонтерами. Данные очень подробные, точные и регулярно обновляются.

На диаграмме представлены данные по всем штатам и союзным территориям Индии. Чтобы не увеличивать нагрузку на их серверы, я кэширую JSON в хранилище сеансов браузеров. Вы можете повторно открыть окно для новых вызовов служб (если вы просматриваете страницу в одночасье).

На пузырьковой диаграмме представлены три точки данных.

Общие случаи в состоянии по оси Y.
Подсчет смертей по оси X;
Количество активных случаев - размер пузыря. Вероятно, это важный показатель, поскольку он представляет риск заражения в определенной области.

Что говорят пузыри?

Обратите внимание, что по оси X показаны общие случаи в миллионах; По оси ординат указано количество смертей в тысячах. См. Рисунок 1 выше (отфильтровано по нескольким состояниям). Среди штатов Дели имеет большое количество смертей, помещенных в крайнем правом углу диаграммы, тогда как в Андхра-Прадеше зарегистрировано больше случаев смерти, а количество смертей относительно невелико. Следовательно, он расположен выше по оси Y и перед Дели по оси X.

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

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

На рисунке 2 ниже представлена общая картина - все штаты страны. Махараштра и Керала затмевают остальные штаты. В обоих штатах очень много активных случаев COVID-19. Большинство других состояний - маленькие точки.

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

Обратите внимание: несмотря на то, что в Керале большое количество активных случаев заболевания, смертность очень низка. Следовательно, он расположен слева на оси абсцисс. В каком-то смысле это говорит об иммунитете и здравоохранении в Керале.

Трудно исследовать и осмыслить остальные состояния, если мы не увеличим масштаб и не отфильтруем состояния с огромным количеством инфекций, смертей и количеством активных случаев. Следовательно, используйте ползунок внизу диаграммы. Он увеличивает масштаб, отфильтровывая верхние состояния. Посмотрите видео слева (и попробуйте на веб-странице).

Библиотеки, используемые на странице

Ng2-Графики

Включена библиотека ng2-charts для пузырьковой диаграммы. Библиотека предоставляет восемь различных диаграмм, включая линейную диаграмму, круговую диаграмму, гистограмму и т. Д.

Для пузырьковой диаграммы каждая точка данных представлена тремя аспектами. Ось X, ось Y и радиус. Рассмотрим следующий фрагмент кода. Как упоминалось ранее, подтвержденное количество случаев указано на оси Y в миллионах (десять лакхов). Обратите внимание, что число делится на 1 000 000. Смертные тысячи. Однако коэффициент радиуса является динамическим.

x: d.deaths / 1000,
y: d.confirmed / 1000000,
r: d.active / radiusFactor,

Существует большая разница в количестве активных дел в двух ведущих штатах и Карнатаке, занявшей третье место в списке. Если я использую постоянный коэффициент, радиус пузырей для Кералы и Махараштры выдувается. Это представляет собой интересную проблему и, следовательно, необходимость в коэффициенте динамического радиуса. Рассмотрим следующий фрагмент кода. Обратите внимание, изменение коэффициента радиуса в зависимости от количества активных случаев

if(data[0].active > 10000) {
radiusFactor = 1000;
} else if(data[0].active > 1000) {
radiusFactor = 50
} else if(data[0].active > 300){
radiusFactor = 25;
} else if(data[0].active > 100){
radiusFactor = 10;
} else {
radiusFactor = 1;
}

Рассмотрим следующий фрагмент кода для визуализации пузырьковой диаграммы в шаблоне.

<canvas baseChart
  [datasets]="bubbleChartData"
  [options]="bubbleChartOptions"
  [colors]="bubbleChartColors"
  [legend]="bubbleChartLegend"
  [chartType]="bubbleChartType">
</canvas>

Угловой материал

Библиотека материалов Angular позволяет легко

Задайте тему для страницы - в данном случае используйте фиолетовую / зеленую тему.
Предоставляет типографику для веб-страницы / веб-сайта.
Готовые компоненты, включая панель инструментов, карточки, сетку данных, слайдер, значки и т. Д.

На странице также показан высокий уровень вакцинации в стране. Эти данные не являются общедоступными, пока. Будем рады поработать над этим в ближайшие недели.

Загрузочный CSS

И последнее, но не менее важное: веб-страница реагирует на запросы. Используется бутстрап для изящной адаптации к форм-фактору планшета и мобильного телефона.

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

Ссылки и ссылки

Covid-19 India Org - https://www.covid19india.org/about
Ng2-Charts - https://github.com/valor-software/ng2-charts
Угловой материал - http://material.angular.io/
Код - https://github.com/kvkirthy/covid-sample (используйте ветку разработки)

Дополнительную информацию можно найти на plainenglish.io

COVID-19 Индия Визуализация