Пошаговое руководство по визуализации разработки вакцин против COVID-19
Я думаю, что все мы где-то сталкивались с временными рамками; как средство передачи хронологической информации классическая временная шкала не имеет себе равных как по глубине передаваемой информации, так и по крутизне, если она сделана с ловким творческим подходом. Итак, с учетом сказанного, хотели бы вы узнать, как построить временную диаграмму с использованием JavaScript, который отлично выглядит и прост в создании? (Конечно, да!) Следуйте за мной, пока я проведу вас через пошаговую разбивку по разработке вашей собственной временной шкалы JS на практическом примере.
Поскольку мир продолжает борьбу с COVID-19, долгожданная хорошая новость - это разработка вакцин по всему миру. Здесь я решил построить интерактивную временную шкалу, которая демонстрирует этапы разработки вакцины Pfizer-BioNTech в Соединенных Штатах. Чтобы добавить больше контекстной информации, я также хотел показать разрешения из других стран и некоторые связанные факты, включая даты разработки трех других вакцин, одобренных для использования в США. В конечном итоге вот как получается готовый продукт:
Построение простой временной шкалы JavaScript за 4 шага
На самом деле довольно легко создавать диаграммы и визуализировать данные даже без особых технических знаний. Конечно, если у вас есть навыки работы с такими технологиями, как HTML и JavaScript, вам будет легче понять, что происходит, и вы сможете быстрее организовать более широкий диапазон настроек. Тем не менее, визуализация данных с помощью одной из доступных JS-библиотек диаграмм довольно проста. Итак, не беспокоясь о каких-либо ошибках (ну, к сожалению, нам действительно нужно беспокоиться о вирусах), давайте сделаем нашу первую попытку создать временную шкалу с помощью JavaScript.
Первое, что нужно понять, это то, что не все библиотеки диаграмм JavaScript поддерживают диаграммы с временной шкалой. Таким образом, логично, что первое, что нужно сделать, - это найти тот, который работает. В этом руководстве я решил использовать AnyChart, поскольку он поддерживает временные шкалы из коробки, а также является легким, гибким и простым в использовании, предоставляя обширную документацию и специальную игровую площадку, которая полезна для практики с кодом. . Все это должно помочь вам понять основы процесса, которые, как правило, очень похожи независимо от того, какую конкретную библиотеку вы выберете.
Есть 4 основных шага для создания любой JS-диаграммы, включая временную шкалу JS. Они есть:
- Сделайте простую HTML-страницу.
- Ссылка на все необходимые скрипты.
- Добавьте данные.
- Напишите код JS для настройки временной шкалы.
1. Создайте простую HTML-страницу.
Прежде всего, мы должны настроить базовую HTML-страницу. Это включает в себя разработку структуры для визуализации, а также добавление необходимых правил CSS.
Базовый HTML-шаблон заключен в тег html и состоит из двух частей - head и body. Заголовок страницы вместе со ссылками CSS и сценариями JS входит в head часть. Часть тела определяет различные компоненты страницы html. Одним из основных способов определения раздела страницы является использование тега div в HTML.
Здесь я создаю div, чтобы содержать график временной шкалы, и присваиваю ему идентификатор, который будет идентифицировать этот конкретный контейнер. Я установил «100%» для параметров ширины и высоты, чтобы визуализация временной шкалы занимала всю страницу.
2. Ссылайтесь на все необходимые скрипты.
Во-вторых, в разделе <head> должна быть ссылка на все необходимые JS-скрипты. В этом руководстве, поскольку я использую библиотеку AnyChart, я включу соответствующие файлы из ее CDN (сети доставки контента).
Чтобы создать временную диаграмму, мне нужно будет добавить ссылки на модуль основной библиотеки из AnyChart, который необходим для всех типов диаграмм, а также на специальный модуль временной шкалы.
3. Добавьте данные
В-третьих, добавим данные. Я создал набор данных для этого учебника по временной шкале вручную, собрав все, что я хотел, из различных источников новостей, двумя из основных из которых являются NYT и Bloomberg. Мой файл данных JSON находится здесь на случай, если вам интересно.
Загрузить файл JSON в AnyChart можно с помощью модуля Адаптер данных, который я добавляю вместе со всеми скриптами JS в <head>. Затем я использую метод loadJsonFile внутри тега <script> в теле HTML-страницы для загрузки файла данных.
Теперь, когда вся подготовка завершена, будьте готовы добавить код, который мгновенно создаст интерактивную временную диаграмму JS!
4. Напишите код JS для настройки временной шкалы.
Первым базовым шагом для создания любой диаграммы таким способом является добавление функции, включающей весь код, которая гарантирует, что весь код внутри нее будет выполняться только после того, как страница будет готова.
График временной шкалы, который я создаю здесь, состоит из 3 частей:
- центральная временная шкала, которая показывает фазы разработки вакцины Pfizer-BioNTech для США в виде временных интервалов,
- временные диапазоны над временной шкалой, которые указывают на события, связанные с вакциной Pfizer-BioNTech в целом, как вехи, и
- маркеры под графиком, обозначающие даты этапов разработки других вакцин, одобренных в США в качестве контрольных точек.
Создать центральную временную шкалу очень просто, но при работе с точками выше и ниже временной шкалы это может немного утомить. Не волнуйтесь, так как весь код закомментирован, и я проведу вас по каждому из фрагментов кода.
Что касается центральной части, все, что мне нужно сделать, это инициализировать объект временной шкалы с помощью встроенных функций и установить точки в ряды диапазонов.
Чтобы нанести на график точки сверху и снизу временной шкалы, я инициализирую наборы данных, определяю сопоставление для точек и устанавливаю для обеих серий функциональность моментных рядов.
Теперь мне просто нужно установить масштаб временной шкалы на 1 месяц и добавить полосу прокрутки, которая позволит видеть определенные разделы временной шкалы.
В заключение я добавляю заголовок к диаграмме, устанавливаю контейнер, определенный для диаграммы, и рисую фактическую временную шкалу.
Вот и все! Настроена полнофункциональная интерактивная временная шкала!
Приглашаем вас посмотреть и поиграть с этой первоначальной версией интерактивной временной шкалы с полным кодом JS / CSS / HTML на CodePen.
Настройка временной шкалы JS
Библиотеки JavaScript, такие как AnyChart, не только упрощают процесс создания базовой визуализации, но также предоставляют возможность легкой настройки. С помощью нескольких настроек кода (или чуть больше), если хотите, вы можете быстро и эффективно изменить диаграмму.
Цвета и маркеры для временной шкалы
Простая настройка, придающая диаграмме индивидуальный вид, - это изменение цвета. Поскольку этапы разработки включают испытания, проверку и одобрение, я использовал цветовую гамму от красного до зеленого - цвета сигналов светофора. Я также меняю цвет маркера для верхней серии и использую для нее фирменный синий Pfizer.
Поскольку нижняя серия содержит информацию для трех отдельных вакцин, я создаю разные серии для всех трех из них, которые, в свою очередь, автоматически назначают разные маркеры для каждой серии.
Посмотрите, как сейчас выглядит вариация. Вы можете найти интерактивную версию этой итерации временной шкалы JS с полным кодом здесь.
Настройка всплывающей подсказки
Кроме того, я хочу показать дополнительную информацию для каждой точки данных на временной шкале, поэтому я добавляю ее во всплывающую подсказку диаграммы в качестве интерактивной функции, включая некоторую настройку внешнего вида.
Текстовые маркеры и заголовок
Временная шкала почти готова, так что пора сделать последние штрихи. Я отформатирую заголовок и добавлю подзаголовок, чтобы он выглядел лучше. Затем я добавлю текстовые маркеры для разных серий выше и ниже центральной шкалы времени, чтобы события были более понятными.
Вот и все! Вы можете найти интерактивную версию этой временной шкалы JavaScript на CodePen или GitHub.
В этом пошаговом руководстве я показал, насколько легко получить временную диаграмму JS не только в рабочем состоянии, но и как воплотить ее в жизнь. Существует множество вариантов настройки временных шкал, и вы можете продолжить изучение с документацией здесь. Создавать универсальные и интерактивные диаграммы JavaScript легко с помощью хорошей библиотеки JS. Вы можете проверить различные другие варианты диаграмм или попробовать свои силы в других библиотеках диаграмм JavaScript для ваших нужд визуализации данных.
Не стесняйтесь задавать мне любые вопросы или дайте мне знать, как получился ваш собственный график JS. Будьте в безопасности и сделайте вовремя уколы, чтобы бороться с этой пандемией!
Шачи Свадия - внештатный дизайнер данных и создатель контента. Она любит создавать визуализации и писать о процессе. Вы можете посмотреть ее профиль и другие подобные статьи здесь.
