Javascript 3d графика: 8 лучших JavaScript библиотек для 3D графики / jQuery плагины и JavaScript решения / Постовой

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

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

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

1. D3

Пожалуй, опенсорсную библиотеку D3 (её ещё называют D3.js) можно назвать самой популярной из существующих JS-библиотек для визуализации данных. Этот проект, в частности, собрал почти 80 тысяч звёзд на GitHub. Библиотека создана для визуализации данных с использованием таких технологий, как HTML, SVG и CSS.

Благодаря вниманию создателей библиотеки к веб-стандартам, D3 даёт разработчикам целостную, подходящую для использования в современных браузерах среду для визуализации данных, избавляющую их от необходимости поиска неких платных решений. Библиотека D3 объединяет в себе компоненты для визуализации данных и подход к работе с DOM, в основе которого лежат, опять же, данные. D3 позволяет выводить в DOM произвольные данные, а затем применять к документу подходящие трансформации. Вот отличная галерея примеров использования этой библиотеки.

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

2. Chart.js

Библиотека Chart.js, собравшая примерно 40 тысяч звёзд на GitHub, является весьма популярным решением для создания HTML5-графиков и диаграмм, основанных на элементе <canvas>, предназначенных для разработки отзывчивых веб-приложений. Актуальная на данный момент вторая версия библиотеки поддерживает комбинирование графиков различных типов (существует 8 базовых типов графиков), различные системы координат. Chart.js можно использовать совместно с библиотекой moment.js. Библиотеку, при необходимости, можно загрузить с cdnjs.

3. Three.js

Библиотека Three.js представляет собой весьма популярное решение (около 45 тысяч звёзд на GitHub; вклад в проект сделали более 1000 человек) для создания 3D-анимации средствами WebGL. Гибкость и абстрактность проекта означают возможность использования Three.js для визуализации данных в 2-х и 3-х измерениях. Например, вот специализированный модуль для Three.js, предназначенный для создания трёхмерных графиков. Вот онлайн-песочница для экспериментов по визуализации данных. Если вы подумываете о визуализации данных средствами WebGL — уверены, вам будет полезно взглянуть на Three.js.

4. ECharts и Highcharts JS

ECharts — проект Baidu, собравший около 30 тысяч звёзд на GitHub, представляет собой библиотеку для визуализации данных и построения графиков в браузере. Она написана на чистом JavaScript с использованием библиотеки zrender, предназначенной для работы с элементом <canvas>.

Библиотека поддерживает вывод графиков с использованием <canvas>, SVG (4.0+) и VML. ECharts можно использовать не только при разработке страниц, рассчитанных на настольные или мобильные браузеры, но и для организации эффективного серверного рендеринга. Вот галерея примеров использования этой библиотеки, с которыми можно поэкспериментировать в интерактивной среде.

Библиотека Highcharts JS довольно широко используется, она собрала примерно 8 тысяч звёзд на GitHub. Основным применяемым ей механизмом для визуализации данных является технология SVG, с возможностью перехода на VML и на <canvas> для устаревших версий браузеров. Заявлено, что этой библиотекой пользуются 72 из 100 крупнейших мировых компаний, что, если это действительно так, делает эту библиотеку самым популярным решением для построения графиков среди крупных компаний, таких, как Facebook и Twitter.

5. MetricsGraphics.js

Библиотека MetricsGraphics.js (примерно 7 тысяч звёзд на GitHub) представляет собой решение, оптимизированное в расчёте на визуализацию временных рядов. Она отличается сравнительно маленьким размером (80 Кб в минифицированном виде) и даёт разработчику небольшой, но продуманный набор узкоспециализированных инструментов, среди которых — средства для построения линейных графиков, диаграмм рассеяния, гистограмм, столбчатых графиков, таблиц с данными. Вот интерактивная галерея примеров работы с этой библиотекой.

6. Recharts

Библиотека Recharts, набравшая почти 10000 звёзд на GitHub — это решение для построения графиков, основанное на React и D3, использование которого выглядит как работа с декларативными React-компонентами. Библиотека даёт в распоряжение разработчика поддержку SVG. Её легковесное дерево зависимостей (основанное на подмодулях D3) поддаётся тонкой настройке через свойства компонентов. Здесь можно найти примеры её использования.

7. Raphaël

«Векторная» библиотека Raphaël (около 10 тысяч звёзд на GitHub) предназначена для работы с векторной графикой в веб-среде. Она, в качестве базовых технологий для создания графических объектов, использует SVG и VML. В результате графические объекты являются ещё и DOM-объектами, к которым можно подключать, средствами JavaScript, обработчики событий. В настоящее время библиотека поддерживает такие браузеры, как Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.

7. C3

Библиотека C3 (примерно 8 тысяч звёзд на GitHub) основана на D3, она предоставляет разработчику возможность пользоваться классами для всех своих элементов, что позволяет определять собственные стили средствами классов и пользоваться возможностями D3. Кроме того, она поддерживает различные API и коллбэки для организации интерактивного взаимодействия с графиками. Используя их, можно обновлять графики даже после их вывода на страницу. Вот примеры использования этой библиотеки.

8. React-Vis, React Virtualized, Victory

Набор компонентов React-Vis (около 4 тысяч звёзд на GitHub) разработан компанией Uber и предназначен для организации единообразной системы визуализации данных в React-приложениях. Это решение поддерживает представление данных в различных видах, в частности, в виде тепловых карт и диаграмм рассеяния. Для работы с этой библиотекой не требуется предварительное знакомство, скажем, с чем-то вроде D3. Она предоставляет разработчику низкоуровневые модульные строительные блоки вроде осей X/Y.

Набор компонентов React virtualized (около 12 тысяч звёзд на GitHub) предназначен для организации эффективного рендеринга больших наборов табличных данных. Доступны ES6, CommonJS и UMD-сборки React virtualized, проект поддерживает Webpack 4. Если вы собираетесь воспользоваться этим набором компонентов, обратите внимание на раздел Dependencies в его документации.

Victory — это коллекция React-компонентов, предназначенных для визуализации данных с поддержкой интерактивных возможностей. Проект создан силами Formidable Labs, он собрал около 6 тысяч звёзд на GitHub. Victory использует одинаковые API и для обычных React-приложений, и для среды React Native, что облегчает разработку кросс-платформенных решений. Victory предлагает разработчику гибкие и красивые способы использования возможностей React-компонентов для визуализации данных.

9. CartoDB

Платформа Carto (около 2 тысяч звёзд на GitHub), предназначена для визуализации и анализа геоданных. На эту платформу можно загрузить геоданные (например, в форматах Shapefiles или GeoJSON), визуализировать их, наложить на карту, стилизовать средствами CartoCSS, можно осуществлять поиск по ним с использованием SQL. Здесь имеются видеоруководства по работе с этой платформой.

10. RAWGraphs

Библиотека RAWGraphs с примерно 5 тысячами звёзд на GitHub, предоставляет собой средство, которое позволяет связывать таблицы, содержащие данные, со средствами визуализации. RAWGraphs основана на D3, она позволяет разработчикам создавать собственные векторные визуализации данных. Она работает с табличными данными в разных форматах, поддерживает и данные, которые можно просто скопировать из других приложений. Результаты работы RAWGraphs представлены в формате SVG, их можно редактировать, используя соответствующие приложения, либо использовать на веб-страницах в неизменном виде. Вот примеры использования этой библиотеки.

11. Metabase

Библиотека Metabase, которая собрала более 11 тысяч звёзд на GitHub, предлагает довольно быстрый и простой способ создания панелей управления, содержащих визуализированные данные, не требующий знания SQL. При этом у библиотеки есть специальный SQL-режим, предназначенный для аналитиков и для людей, профессионально занимающихся обработкой данных. Metabase позволяет сегментировать данные, создавая фильтры или наборы фильтров, библиотека поддерживает создание метрик — вычисляемых показателей, к которым приходится достаточно часто обращаться. Среди других возможностей Metabase можно отметить поддержку отправки данных в Slack и обеспечение возможности работы с ними в этой среде с использованием MetaBot. Эту библиотеку, пожалуй, можно считать отличным инструментом для визуализации данных внутри компаний, хотя надо отметить, что для того, чтобы её освоить, понадобятся некоторые усилия.

Бонусная библиотека: Taucharts

Библиотека для визуализации данных Taucharts (около 2 тысяч звёзд на GitHub) основана на библиотеке D3. Она предоставляет разработчику декларативный интерфейс для быстрой организации связи полей данных с визуальными свойствами. Её архитектура позволяет создавать диаграммы, на которых переменные группируются с использованием координат X и Y (facet charts). Taucharts позволяет расширять поведение диаграмм благодаря плагинам, подходящим для повторного использования.

Итоги

Примитивы Three.js

Эта статья является частью серии статей о three.js. Первая была об основах. Если вы её еще не читали, советую вам сделать это.

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

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

Прямоугольный параллелепипед

Круг

Конус

Цилиндр

Додекаэдр (12 граней)

Выдавленная 2d фигура с скругленными краями. Здесь мы выдавливаем форму сердца. Обратите внимание, это основа для TextBufferGeometry и TextGeometry соответственно.

Икосаэдр (20 граней)

Форма, созданная вращением линии. Например, лампы, кегли для боулинга, свечи, подсвечники, бокалы для вина, стаканы для питья и т. Д. Вы указываете 2-мерный силуэт в виде серии точек, а затем указываете three.js , сколько секций нужно сделать, когда он вращает силуэт вокруг оси.

Октаэдр (8 граней)

Поверхность, созданная путем предоставления функции, которая берет 2d точку из сетки и возвращает соответствующую 3d точку.

2D плоскость

Берет набор треугольников с центром вокруг точки и проецирует их на сферу

2D диск с отверстием в центре

2D контур, который строится из треугольников

Сфера

Тераэдр (4 грани)

3D-текст, сгенерированный из 3D-шрифта и строки

Тор (пончик)

Торический узел

Труба — круг проходящий путь

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

Создает геометрию, которая содержит один отрезок (2 точки) на ребро в заданной геометрии. Без этого вы часто теряете ребра или получаете дополнительные ребра, поскольку WebGL обычно требует 2 точки на отрезок. Например, если бы у вас был только один треугольник, было бы только 3 очка. Если вы попытаетесь нарисовать его, используя материал с wireframe: true вы получите только одну линию. А передача этой triangle geometry в WireframeGeometry создаст новую геометрию, которая имеет 3 отрезка линий, используя 6 точек..

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

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

Geometry основанные на примитивах являются более гибкими, легче манипулировать типом. Они построены на основе классов JavaScript, таких как Vector3 для 3D-точки, Face3 для треугольников. Они занимают немного памяти, и прежде чем их можно будет отобразить, нужно будет преобразовать их во что-то похожее на соответствующее BufferGeometry представление.

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

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

Галерея графиков в D3.js

Галерея графиков в D3.js представляет собой инструмент для создания визуализации данных.

Работа в ней отнимает больше времени, чем работа в R или Python. Однако, именно галерея графиков в D3.js станет полезным инструментом для прорисовки интерактивных графиков.

Что такое галерея графиков в D3.js?

Создателями галереи D3.j3 являются два друга из Франции – Ян Хольц (аналитик данных) и Конор Хили (дизайнер).

D3.js — это обширная библиотека JavaScript, созданная для управления документами на основе данных. Но здесь не получится просто нажать на функцию, которая построит график. D3.js — это целый набор полезных инструментов для визуализации. В библиотеку входят десятки небольших модулей и каждый из них создан для решения конкретной задачи.

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

Проект построен на двух основах:

1. Большая часть анализа имеющихся данных может быть представлена в 20 разных форматах наборов данных.
2. Соответствующая диаграмма определяется в зависимости от контекста и данных.

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

Как работать с галереей D3.js?

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

«Дерево решений» предоставляет 20 основных форматов с наиболее распространенными наборами данных. График составляется при помощи языка программирования R с воспроизводимым фрагментом кода.

Типы графиков

В галерее собраны следующие типы графиков:

• часть целого;
• поток;
• карта;
• эволюция;
• распределение;
• ранжирование;
• корреляция.

В каждом типе графиков еще от 4 до 7 видов, помогающих создать подходящую визуализацию данных.

Все виды сопровождаются кратким описанием и рекомендациями по использованию.

Особенно полезными являются указанные в каждом разделе распространенные ошибки. Для удобства пользователей создатели сайта собрали все ошибки в отдельный раздел. Каждая из них имеет подробное описание.

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

three.js — JavaScript 3D библиотека

Learn

• документация
• примеров
• редактор

Сообщество

• вопросов
• форум
• раздор
• провисание
• твиттер

код

• GitHub
• скачать

Ресурсы

• Chrome DevTools
• Firefox DevTools
• Три.Основы JS

Книги

• Откройте для себя Three.js
• Learn Three.js
• の め て の Three.js

изображений: 3d-графика — javaScripting.com

Окончательный источник лучших библиотек, фреймворков и плагинов JavaScript
.

• Aframe

  : a: веб-платформа для создания опыта виртуальной реальности.

  90%

• Filament

  Filament — это физический движок реального времени для Android, iOS, Windows, Linux, macOS и WASM / WebGL

  83%

• Gl Matrix

  Javascript Matrix и Векторная библиотека для высокопроизводительных приложений WebGL

  72%

• Regl

  👑 Функциональный WebGL

  68%

• Cannon.js

  Легкий 3D физический движок, написанный на JavaScript.

  59%

• Claygl

  Графическая библиотека WebGL для создания масштабируемых приложений Web3D

  58%

• Открыть Jscad.org

  OpenSCAD + JavaScript = OpenJSCAD, редактировать локально или удаленно онлайн, предварительный просмотр в браузере напрямую через WebGL.

  57%

• Shader School

  Мастерская для шейдеров GLSL и графического программирования

  56%

• Ejecta

  Быстрая реализация JavaScript, Canvas & Audio с открытым исходным кодом для iOS

  56%

• Оймо.js

  Легкий физический движок 3d для javascript

  55%

• Twgl.js

  Tiny WebGL вспомогательная библиотека

  53%

• Glslify

  Модульная система в стиле node.js для GLSL!

  48%

• X3dom

  X3DOM. Среда для интеграции и управления сценами X3D в качестве элементов HTML5 / DOM.

  46%

• Xeogl

  Трехмерный движок для технической визуализации на основе WebGL.

  46%

• Math Box.js

  MathBox (библиотека в процессе разработки) для создания математических диаграмм качества представления в WebGL.

  45%