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

Аннотация

Этот документ будет искать ответы, подвергая сомнению переизбыток информации в периодической таблице элементов. В ходе исследования формы и функциональности взаимодействия человека с компьютером мы закончили разработку фронтенд-веб-приложения, обслуживаемого на сервере разработки (https://tothetable). В инструменте взаимодействия мы много играли с иерархией, временем и удобством отображения информации. Проще говоря, мы постепенно показываем и скрываем информацию и детали посредством взаимодействия и выбора пользователя. Когда пользователь прокручивает, скользит или перетаскивает веб-приложение; элементы подчеркиваются, появляются или исчезают, все для беспрепятственного обмена информацией.

Введение

Периодическая таблица представляет собой графическую формулировку, отображающую свойства химических элементов. Около 1869 года первая периодическая таблица стала общепринятой и была составлена ​​Дмитрием Менделеевым. С тех пор он стал иконой химии.

Было создано множество функциональных вариаций и абстрактных версий для разных нужд людей и сред. Возьмем, к примеру, периодические таблицы, организованные Научной службой в 1947 году (см. рис. 1 и 2).

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

Цифровой формат принес новые способы объединения информации таблицы на меньшем дисплее. Благодаря динамическому взаимодействию, неограниченной масштабируемости и возможности повторного использования в Интернете.

По всему Интернету можно найти прекрасные примеры обработки бесконечной информации, сохраняя при этом обзор и культовую форму таблицы. Прекрасным примером является проект Micheal Dayah, Ptable. Ptable был создан в 1997 году и представлен как произведение искусства HTML (язык разметки каждого браузера). Он показывает сложные возможности цифрового интерфейса. отображение бесконечных комбинаций фильтров с понятным интерфейсом. [3]

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

Анализ взаимодействия

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

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

Технический анализ

Мы обсудим реализацию веб-приложения Svelte, которое загружает и обрабатывает данные CSV с помощью D3.js. Веб-приложение использует динамические глобальные переменные CSS, привязанные к ползунку ввода через двустороннюю привязку, что позволяет пользователям интерактивно управлять визуализацией данных.

Веб-приложение использует D3.js, популярную библиотеку JavaScript для обработки и визуализации данных, для загрузки данных CSV. D3 предоставляет удобную функцию d3.csv(), которая асинхронно извлекает и анализирует данные CSV. После загрузки данных CSV к ним можно получить доступ и продолжить их обработку.

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

Веб-приложение использует динамические глобальные переменные CSS, которые можно обновлять в зависимости от взаимодействия с пользователем. Эти переменные CSS определены в отдельном файле CSS или как встроенные стили, и к ним можно получить доступ из любого компонента. Изменяя значения этих переменных, можно динамически изменять внешний вид и стиль различных элементов пользовательского интерфейса.

Веб-приложение включает в себя компонент ползунка ввода, который позволяет пользователям управлять определенным параметром, привязанным к переменным CSS. Ползунок ввода привязывается к значению переменной CSS с помощью двусторонней привязки. Это означает, что при изменении значения ползунка автоматически обновляется значение переменной CSS, и наоборот. В результате элементы пользовательского интерфейса, связанные с переменными CSS, мгновенно реагируют на ввод пользователя.

Развитие дизайна

Проект следовал итеративному подходу к проектированию и разработке. Это включало в себя определение приоритетов проектирования и реализации основных функций на начальном этапе и постепенное включение дополнительных функций на протяжении всего процесса. Для начала таблица была разработана с использованием функции слияния данных Indesign (см. рис. 6).

В текущем прототипе добавлена ​​динамическая легенда и небольшой пользовательский интерфейс; https://periodictable-sage.vercel.app/.

Заключение

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

Рекомендации

[1] Периодические таблицы научной службы. Вашингтон (округ Колумбия): Научная служба, 1947. Коробка FC-5, Папка с периодическими таблицами (в ассортименте). Институт истории науки. Филадельфия. https://digital.sciencehistory.org/works/sj139273w.

[2] Периодические таблицы Sargent-Welch Scientific Company. Скоки, Иллинойс: Sargent-Welch Scientific Company, 1980. Коробка FC-5, Папка с периодическими таблицами (ассорти). Институт истории науки. Филадельфия. https://digital.sciencehistory.org/works/8049g5966.

[3] Dayah, M. (1997, 1 октября). Периодическая таблица — Ptable. Табл. https://ptable.com