Ежедневно с открытым исходным кодом | Несколько крутых визуальных широкоэкранных проектов
Ежедневно с открытым исходным кодом | Несколько крутых визуальных широкоэкранных проектов

Всем привет!

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

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

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

1Визуализация данных на большом экране

Платформа с низким кодом для быстрого создания собственной визуализации с помощью перетаскивания.,внешний интерфейсиспользоватьVue.jsстек технологий,Внутренний майнингиспользоватьNode.js + Koa + MongoDB

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

Адрес GitHub

https://github.com/ddiu8081/ChartFun

2Визуализация данных на большом экране

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

Адрес GitHub

https://github.com/TurboWay/big_screen

3Байду Визуализация карты

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

Эта визуальная библиотека поддерживает GeoJSON и может быть настроена с помощью тем. Он поддерживает многопоточность и обладает такими преимуществами, как высокая производительность и удобство API.

Адрес GitHub

https://github.com/TalkingData/inmap

4Кейс для визуализации с большим экраном

В этом примере проекта используется вариант визуализации на большом экране, разработанный ECharts. Цель состоит в том, чтобы позволить пользователям понять уровни и взаимосвязи между данными на простой странице.

Как опытный технолог, который занимается визуальными проектами на больших экранах более 4 лет, я реализовал более десятка проектов на больших и малых экранах. Я хотел бы поделиться с вами реальным процессом работы. визуальный широкоэкранный проект онлайн, кстати, я его вам отсканирую. Недоразумения насчет больших экранов.

Наглядный процесс реализации проекта на большом экране

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

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

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

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

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

4. Реализация эффекта: нарисуйте демо на фронтенде согласно чертежу

5. Обработка данных. Обработка данных условно разделена на три этапа: базовая обработка данных, внешнее отображение данных и корректура данных. В зависимости от объема данных и потребностей в реальном времени

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

Объем данных большой (расчет сложный), выполняется в квазиреальном времени, требуется таблица результатов.

Объем данных небольшой (расчет простой), в режиме реального времени, таблица результатов не требуется.

Большой объем данных (сложный расчет) в режиме реального времени, требующий технических решений (например, kafka+flink)

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

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

Как реализовать технологию визуализации на большом экране?

Обычно существует три варианта разработки интерфейсных решений с большим экраном: ① Самостоятельная разработка с использованием пользовательских визуальных диаграмм с открытым исходным кодом. ② Использование для создания инструментов от поставщиков BI/отчетов. ③ Настройка с помощью интегратора, который можно интегрировать с программным обеспечением; и аппаратное обеспечение.

Разработано собственными силами. Например, в Интернете есть множество исходных кодов с открытым исходным кодом для создания шаблонов отображения на большом экране на основе фреймворков vue и Echart.

Он поставляется с некоторыми динамическими эффектами, такими как динамическое обновление данных, адаптация экрана, бесплатная замена внутренних диаграмм, внедрение миксинов и другие функции. Бэкэнду необходимо написать другую платформу для запроса данных, обычно Java.

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

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

Производитель настройки большого экрана: этот вид настройки — это не просто отображение диаграмм. Обычно это особые требования, например, 3D-моделирование, поэтому часто требуется, чтобы профессиональный производитель визуализации адаптировал его по требованию. Технически он основан на трехмерных движках, таких как ventuz или unity, для настройки эффекта большого экрана. Коммерческий эффект от настройки обычно оптимален, но затраты на внедрение и затраты после сопровождения также чрезвычайно высоки и варьируются от нескольких миллионов до внедрения.

BI/отчеты создаются на большом экране. Многие проекты с большим экраном сейчас разрабатываются с использованием инструментов бизнес-аналитики и отчетности, таких как FineReport.

Хотя это сам по себе инструмент отчетности, на самом деле на рынке существует платформа, которая может решить проблему внешнего отображения и подключения к внутреннему чтению данных. Кроме того, он предоставляет «холст» (называемый в FineReport дизайнером) для создания визуализаций, операций перетаскивания и набор эффективных и удобных шаблонов проектирования для больших экранов и мобильных устройств. Стоимость создания визуализаций относительно высока. низкий, и начать легко. Это относительно легко, и уже одно это может сэкономить неделю человеко-дней.

Что касается визуализации, мы предоставляем многоразовые шаблоны и компоненты специально для эффектов большого экрана, которые могут удовлетворить потребности большинства больших экранов. Когда дело доходит до специальных 3D-моделей, мы также можем интегрироваться с профессиональными производителями для предоставления решений по реализации моделирования.

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

Какие у вас есть недопонимания по поводу больших визуальных экранов?

Недоразумение 1. Визуализации — это всего лишь визуализации, которые на самом деле не могут быть созданы.

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

Недоразумение 2: Большой экран — это не просто интерфейсная технология

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

Что касается аппаратного обеспечения, вам нужно уточнить размер и тип большого экрана, а также хост, на котором работает большой экран? С точки зрения бизнеса, какие показатели и измерения будут отображаться на большом экране и кто будет поддерживать логику бизнес-анализа? Это все, что следует учитывать.

Недоразумение 3: Большие экраны дешевы и могут быть реализованы без кода? НЕТ!

Насколько я знаю, проект с большим экраном обычно стоит более 100 000 юаней. Я также видел проекты с большим экраном стоимостью десятки миллионов.

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

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

Адрес GitHub

https://github.com/yyhsong/iDataV

Панорамный обзор листинговых компаний

Визуализация карты

Отображение 3D-карты

Отображение тепловой карты

Пример расширения ECharts

солнечные лучи

Географические информационные данные

5GitHub Платформа визуализации больших данных

использовать Vue построен GitHub Платформа визуализации больших данные, благодаря которым вы сможете более интуитивно видеть, что вы делаете GitHub Некоторые данные здесь, источник данных isuse GitHub развитый API。

Адрес GitHub

https://github.com/HongqingCao/GitDataV

Адрес блога

https://juejin.cn/post/6844903664818061325

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

—END—

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода