предисловие
С визуализацией я познакомился в конце 2017 года, и занимался разработкой и исследованиями сопутствующих продуктов, в основном в направлении анализа визуализации. За эти три года возникло много сомнений и мыслей. Воспользуйтесь этой возможностью, чтобы подвести итоги. Я также надеюсь, что благодаря своему собственному опыту я смогу помочь некоторым веб-разработчикам, которые заинтересованы в том, чтобы начать работу.
Я постараюсь охватить цепочку знаний, которая должна быть задействована в качестве разработчика интерфейса. Иногда это также требует некоторых базовых знаний, поэтому контента будет больше, но я надеюсь, что смогу успокоиться, медленно читать и думать об этом.
Эта статья не посвящена практическим и практическим техническим деталям, но предлагает некоторые размышления между визуализацией и веб-интерфейсом. Поскольку уровень автора ограничен, если есть какие-либо упущения или неправильное выражение, вы можете исправить это в области комментариев, спасибо 🙏.
Визуальные основы
В основном визуальные основы, пусть новые студенты узнают о структуре визуализации, которая не требует слишком много деталей.
Определение визуализации
Чтобы заниматься визуализацией, вы должны сначала понять, что такое визуализация.
Существует много определений визуализации, здесь мы говорим только об определении визуализации в информатике:Технология, которая использует визуальное представление данных для улучшения познания, используя возможности восприятия человеческого глаза., называемая технологией визуализации. Звучит запутанно. Человеческий глаз — это процессор с высокой пропускной способностью. Роль визуализации заключается в улучшении восприятия данных людьми, в то время как визуальные выражения (например, изображения) могут нести больше данных и передаваться через глаза в наш мозг, где получаем ощутимые результаты.
Это также может быть просто понято как: использование компьютерной графики или технологии обработки изображений для преобразования данных в изображения для облегчения понимания технологии данных.
Визуализация
Зачем нужна визуализация?
-
Чтобы сделать данные более простыми и интуитивно понятными.
-
Откройте для себя ценную информацию, стоящую за вашими данными.
-
Повышение различных показателей эффективности в конечном итоге связано с эффективностью бизнеса.
-
....
Ниже приведена классическая диаграмма, которая поможет вам понять.
Это таблица с четырьмя столбцами данных I, II, III и IV. Каждый элемент в каждом столбце данных имеет два атрибута, x и y. Давайте спросим характеристики этих четырех наборов данных, выглядят ли они вообще как Это утомительно, не говоря уже о том, чтобы смотреть на функции, лежащие в основе данных. Но рисуем вышеуказанные данные визуальным методом.
Мы можем легко увидеть их соответствующие шаблоны и некоторую дополнительную информацию. В этом также прелесть визуализации.
Визуализация областей филиалов
Визуализация в основном имеет следующие ветви
1. Научная визуализация (SciVis)
Научная визуализация — самая ранняя и наиболее развитая ветвь визуализации. В основном он предназначен для описания реальных данных в природе и используется в областях физики, химии, метеорологии, авиации, медицины и так далее. Например, наши обычные карты погоды, карты туманностей, карты океанских течений и т. д.
Данные, обработанные с помощью научной визуализации, имеют естественные геометрические структуры, такие как силовые линии магнитного поля.
2. Визуализация информации (infoVis)
В ограниченном пространстве отображается большой объем данных, а содержащаяся в нем абстрактная информация отображается интуитивно понятным образом. Большинство распространенных визуализаций в нашей повседневной жизни относятся к области визуализации информации. Например, карта метро. Его особенностью является отсутствие сложных взаимодействий и тенденция к статике.
3. Визуальный анализ (ВАСТ)
Визуальный анализ — это относительно новая ветвь, определяемая какНаука аналитического мышления на основе визуального интерфейса. Сочетание таких технологий, как визуализация, анализ данных и взаимодействие человека с компьютером, использование визуального взаимодействия в качестве канала, интеграция человеческого восприятия в процесс обработки данных, формирование взаимодополняющих и взаимоусиливающих преимуществ интеллекта человеческого мозга и машинного интеллекта, а также создание спирали обмен информацией и подход к извлечению знаний для завершения эффективных аналитических рассуждений и принятия решений.
Это определение является пугающим.Простое понимание заключается в том, чтобы анализировать данные с помощью комбинации визуальных диаграмм и активного взаимодействия с человеком, чтобы получить некоторую скрытую информацию о данных, чтобы помочь в принятии решений.
Выше приведены три области визуализации, которые в настоящее время распознаются, и границы между ними также размыты.
Визуальная история
Краткая история визуализацииЭта статья является хорошим введением, поэтому я не буду вдаваться в подробности.В истории есть несколько известных фотографий, таких как карта Восточной экспедиции Наполеона и карта холеры на Брод-стрит в Англии в 1854 году.
как сделать визуализацию
Шаги визуализации на самом деле разные, но они похожи, различия незначительны, а центральная идея одна. Вот шаг, который я использовал. Подобным образом, это также немного воды, проходящей мимо.
1. Определите свои потребности
Прежде чем сделать еще одну вещь, вы должны знать, что вы собираетесь делать? Что вы хотите узнать? Требования — это первый шаг в визуальном дизайне. Это требование должно быть конкретной проблемой, и вы должны быть в состоянии записать его и четко объяснить, чтобы оно считалось требованием. Например, какие факторы влияют на продажи автомобилей компании в этом году.
2. Данные
Из-за нехватки места этапы сбора и обработки данных записываются непосредственно в данные. Получайте необработанные данные из различных источников данных по мере необходимости. Необработанные данные в большинстве случаев представляют собой большой беспорядок. Нам нужно сделать очистку данных, такую как сортировка в единый формат, удаление ненужных измерений данных, удаление дублирующейся информации и т. д.
После очистки данных мы получаем более стандартизированную и удобную базу данных. Следующим шагом является операционализация данных на уровне приложения. В соответствии с требованиями, выдвинутыми на первом этапе, данные подвергаются дальнейшей обработке, например, агрегированию и разделению данных по различным измерениям.
3. Визуализация
Выберите способ визуального отображения в соответствии с нашими требованиями и структурой данных. Здесь нам нужно понять характеристики и применимые структуры данных некоторых распространенных графов.
Ниже я приведу характеристики нескольких графиков. Позже я опубликую несколько веб-сайтов, чтобы помочь вам выбрать фотографии.
Конечно, вы можете создавать графики самостоятельно. Вот небольшое предложение: создайте новый график и попытайтесь максимально расширить базовый график.Такие графики являются инновационными, с низкими затратами на обучение для пользователей и высоким признанием. Например, разделить гистограмму на блоки и превратить ее в наложение гистограммы. Плюс ось для сравнения, она становится двухосевой столбчатой диаграммой с накоплением.
Что касается оптимизации графика, поместите ее на следующий шаг.
4. Примите решение
После вышеуказанных трех шагов получается предварительная диаграмма. В настоящее время нам нужно сравнить требования, чтобы увидеть, можем ли мы выполнить требования, которые мы выдвинули. Если не удовлетворены, подумайте о шагах, на которых возникла проблема.
-
Необоснованное требование? Например, я хочу знать количество котят, рожающих детей и продажи автомобилей в мире (это может быть действительно связано, скажу по желанию).
-
Данные получены некорректно? Например, при построении графика обнаруживается, что в данных отсутствует некоторая ключевая информация, тогда мы можем решить проблему с данными.
-
Картинка неправильная? Переосмыслите структуру данных и требования, а затем выберите диаграмму.
Если требования соблюдены, то следующим шагом будет оптимизация.
На самом деле, этап разработки чертежа — это действительно большое знание. Хорошая визуализация должна иметь хороший сюжет, полные графические элементы, взаимодействие человека с компьютером и перцептивное познание (например,Гештальт)так далее. Ссылки на соответствующие знания будут размещены позже. Смотреть классику сильнее, чем слушать меня.
Что такое хорошая визуализация?
Вот руководство, которое представляет собой визуализация профессора Цюй Хуамина из Гонконгского университета науки и технологий.Письмо, Да, Я. Вы также можете оптимизировать свою собственную работу.
1. Письмо
Визуализации не могут быть предвзятыми и не могут вводить пользователей в заблуждение. Чтобы правдиво передать истинное лицо данных.
Есть наглядный кейс, который заключается в выборе американских автомобилей для покупки автомобилей. Анализ данных показал, что 90% пользователей первым делом выбирают производителя марки А. Данные говорят нам только о том, что больше пользователей выбирают бренд А. Следовательно, мы не можем быть уверены в том, что автомобиль марки А имеет хорошее качество и высокую популярность, потому что за пределами набора данных может быть слишком много факторов, влияющих на результаты данных, таких как национальная политика, заводские скидки и т. д. Нам просто нужно выразить информацию, которую нам приносят необработанные данные.
Это письмо также является первым шагом, самым важным.
2. До
Основная цель визуализации не в красоте и не в простоте. Речь идет о решении потребности, которую вы выдвинули на первом этапе, о «достижении» этой потребности. является эффективной визуализацией. Конечно, если вам нужно быть крутым и красивым, это тоже нормально.
3, Я.
Эстетика и элегантность визуального дизайна. После достижения двух критериев, мы можем рассмотреть возможность добавления некоторой художественной компоненты в работах. Есть книга, которая «красивая визуализация», скажем, это визуальная красота.
приложение для визуализации
Визуализация имеет широкий спектр применений.Короче говоря, отрасли, требующие визуализации, генерации данных и потребностей в анализе, незаменимы для участия визуализации и могут принести большую пользу. Например, боевые карты и боевая техника (характеристики огнестрельного оружия, статус бойца) в военной промышленности, анализ трафика и карты атак в отрасли сетевой безопасности, КТ-изображения в медицинской отрасли. Рассказывание историй в медиа-индустрии (например, The Paper Labs) и многое другое — это бесконечные сценарии применения. В этой новой кампании по профилактике коронарной пневмонии и борьбе с ней появилось большое количество отличных работ по визуализации, которые оказали большую помощь. Например, доктор Гвоздика.
Когда данные представлены в виде графика, это часто может принести неожиданные выгоды. Цитируя интересный случай, упомянутый ранее профессором Цюй, его команда ранее участвовала в проекте онлайн-видеообучения. Затем веб-сайт записывает некоторые действия пользователя, такие как быстрая перемотка вперед и назад во время просмотра видео.
После визуализации анализа этих данных получается визуализация интерактивной обратной связи пользователя в видео. Затем я узнал, какие временные отрезки в видео пользователь просматривал неоднократно, а лектор просматривал эти отрезки времени, чтобы понять, было ли это сложно или не очень тщательно. Есть также некоторые временные отрезки, которые в основном пропускаются и ускоряются. Затем требуется много времени, чтобы подтвердить, важно это или нет. Так, чтобы добиться возможности улучшить качество курса.
Еще одним интересным явлением является то, что некоторые пользователи не перестают работать в местах, которые всем кажутся трудными. Есть также тип пользователей, которые быстро смотрят в том месте, где все неоднократно останавливаются, но постоянно смотрят в том месте, где все быстро перематывают вперед. Вы можете оценить разницу между результатами тестов этих двух типов пользователей.
В общем, визуализация может многое. Так много сказано о базовых знаниях визуализации, если будет много интересующихся, то я напишу серию из них позже.
Визуализация и веб-интерфейс
Зачем делать визуализации (лично мне)
1. Заинтересованы.
Интерес — это основная производительная сила, а я люблю классные вещи. Если бы я целыми днями занимался внедрением различных систем управления бэкендом, я бы потерял страсть к фронтенду и считал его работой на выживание. Человеку очень повезло, что он может заниматься в своей жизни делом, которое ему нравится. Я выбрал позицию фронтенда после выпуска вместо этой специализации по Java и Embedded. Это из-за высокой видимости передней части.
2. Высокая степень свободы
Когда дело доходит до дизайна и взаимодействия, степень свободы возрастает. Например, шар можно вращать вверх-вниз, влево-вправо и ионизировать. Вы можете дать полную волю своему воображению и творчеству.
3, сильное чувство выполненного долга
Всем известный «паж» всегда «презирают» 🐶🐶🐶 (собачий заголовок жизни). Визуализация способна разбить 梏桎, войти в новое поле. Когда вы делаете вселенную бомбежку, вы можете звонить только по номеру 666 👏👏👏.
4. Хорошая рыночная среда
Догоняя эпоху больших данных, можно не сомневаться в рыночном спросе. С обновлением оборудования популярность AR/VR. По мере развития webassembly спрос на визуализацию будет становиться все больше и больше, а техническая атмосфера — все лучше и лучше.
5. Хороший доступ к карьере
Операционная среда - браузер, что естественно имеет свои преимущества.
С чего начать визуализацию
вводный этап
Запас знаний
-
Читайте связанные книги по визуализации и накапливайте базовые знания о визуализации, такие как обычное использование диаграмм, общие методы визуализации и т. д.
-
Базовые знания языков веб-разработки, svg, canvas, openGL и др.
-
Получите базовые знания по анализу данных. Например, сбор данных, очистка и т. д.
-
Буду использовать общие библиотеки, такие как D3.js, Three.js.
-
Научный доступ в интернет (это можно сказать самое главное 😂😂😂).
Достаточно будет заняться простым дизайном и общей визуальной проработкой.
Небольшое предложение: не используйте слишком много хорошо упакованной библиотеки Chart.
Сосредоточьтесь на аспектах
-
Сосредоточьтесь на реализации. Не думайте слишком много о принципах языка и методах визуального дизайна. Сначала освойте технику.
-
Начните сознательно строить свою собственную систему визуальных знаний.
-
Войдите в контакт с визуальной атмосферой, посещайте больше встреч и больше общайтесь. Через некоторое время вы обнаружите, что ваш круг друзей и общедоступные учетные записи постепенно начали сосредотачиваться на контенте, связанном с визуализацией, а затем продвигать его более подробно.
Самое главное на начальном этапе – это много практики. Если у компании есть соответствующий бизнес, то можно напрямую учиться у бизнеса. Если нет, найдите данные сами и сделайте свои собственные потребности. Вы также можете использовать некоторые экзаменационные вопросы с конференции по визуализации. НапримерChinaVis,IEEE VAST ChallengeГодовой задачей предоставляет основные данные и проблемы, выдающиеся работы, а некоторые также предлагают загрузки. Вы также можете войти в соревнование.
Реализация конкретной технологии будет подробно объяснена одна за другой в следующей серии отдельных статей.
Расширенное направление
Запас знаний
-
OpenGl
-
Игровой движок
-
Визуальный анализ
-
Визуальный дизайн (когнитивное восприятие, взаимодействие человека с компьютером, психология пользователя)
-
компьютерная графика, компьютерное зрение
-
Теория графов, алгоритмы графов
-
Математическая статистика
Не пугайтесь такого количества слов, степень понимания зависит от вас, ведь это промышленное применение, а не исследование. Узнайте, что подытожили другие, и если у вас будет немного вдохновения для себя, будет лучше. Лучше знать глубже, ведь когда вы достигаете более поздней стадии, то, что часто ограничивает ваше развитие, — это ваша самая короткая доска.
Сосредоточьтесь на аспектах
-
Лучше выбрать одно направление. См. больше статей и другой литературы в этом направлении.
-
Способность к достижению не вызывает сомнений.
-
Сосредоточьтесь на ценности, которую может создать визуализация.
-
Обладает навыками визуального дизайна.
-
Расширьте свои слабости.
Сомнения и ответы
В: Когда я впервые начал заниматься визуализацией, я всегда думал о том, что представляет собой инженер по визуализации. Основное внимание уделяется разработке или дизайну?
О: Если вы только начинаете, не думайте слишком много, вы должны хорошо разбираться в технологии разработки, а для общего дизайна есть специальные люди. Прежде всего, они должны в совершенстве реализовать свой разумный замысел. Когда вы освоите технологию, дизайн, естественно, станет вашим следующим направлением.
В: Означает ли визуализация, что вам не нужно изучать популярные на рынке библиотеки пользовательского интерфейса, такие как React?
A: Не только для того, чтобы использовать, но и для того, чтобы использовать лучше, ваши базовые знания о интерфейсе должны быть более прочными. Потому что большинство визуализаций интегрированы в продукт и содержат больше данных и взаимодействий. Иногда могут возникнуть проблемы с производительностью или другие проблемы, если вы недостаточно знаете о существующих платформах.
В: Почему моя визуализация недостаточно хороша?
О: В большинстве случаев процесс визуализации не соблюдается. Каждый шаг должен быть ровным, не торопитесь достигать. Думайте больше.
Место ограничено, и это все мои личные размышления, которые могут не относиться ко всем, поэтому больше писать не буду. Затем вы спросите Q, я подойду к A.
Некоторые рекомендуемые ресурсы
Я перечисляю лишь некоторые из рекомендуемых ресурсов. Эта статья не является информационным постом, и здесь слишком много вариантов, и легко потерять фокус. Приведенные ниже ресурсы охватывают каждый из них.
Книги по визуализации
-
«Визуализация данных» (профессор Чен Вэй) пятизвездочная рекомендация
-
Перевод "The Beauty of Data Visualization" сложно сказать, попробуйте прочитать на английском
-
«Восприятие визуализации информации для дизайна» (Колин Варли)
онлайн-курсы
-
Летняя школа Пекинского университета, Летняя школа Чжэцзянского университета (при наличии условий можно принять участие)
-
GAMES101Мой мужской бог, очень хорошо, пятизвездочная рекомендация
-
Облачный класс NetEaseВпечатляющий
Графический сайт
Конгрессы и организации
-
ChinaVis
-
IEEE VIS
-
Группа визуального анализа Пекинского университета, Группа визуального анализа Чжэцзянского университета
Периодика
-
Читайте больше журналов в своей области, смотрите, что другие исследуют весь день, и найдите собственное направление.
Нет публики
Некоторые визуальные самомедиа, хорошо работающие
-
Широкий кругозор и знание
-
имперская живопись
-
Просмотр данных
-
ДТ Финанс
-
Мастерская Пайке (их несколько)
-
Бумага
Подводить итоги
В этот раз наша команда также участвовала в ChinaVis Challenge и получила хорошие результаты.Я хотел написать здесь несколько идей и помочь некоторым друзьям попрактиковаться, но по разным причинам обязательно сделаю это в следующий раз.
Я не спал несколько дней, я написал эту статью, если она может вам помочь, пожалуйстаСтавь лайк и иди, позвольте мне быстро обновить мою учетную запись. будет моей величайшей честью. Спасибо вам всем.
Наконец, если у вас есть какие-либо сомнения в этой статье или вы нарушаете свои личные права, свяжитесь со мной, чтобы пересмотреть ее. Что касается информации, если вам нужны дополнительные ресурсы или ресурсы в указанном поле, вы можете написать мне лично или добавить меня в WeChat wang_xlv.