• Агентство
  • ← Блог

infographer

  • Теория
  • Примеры
    • Примеры
    • Критический взгляд
  • События
    • Текущие события
    • Прошлые события
  • Инструменты
  • Книги
    • Книги
    • Книжный магазин
  • Новости
Примеры визуализации

Трёхмерная инфографика в браузере — Chrome Experiments WebGL 1

1
Comments
Linkedin
1
ВКонтакте
0
Pocket

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

Вот пример: трёхмерная визуализация статистики населения, в рамках проекта  Chrome Experiments. Почему Chrome? Потому что он поддерживает стандарт Web-GL по работе с графикой в JavaScript-программировании, позволяющий создавать интерактивную трёхмерную графику прямо внутри браузера. Этот стандарт поддерживается пока ещё не всеми браузерами, и Chrome выступает лейтмотивом (windows, mac — неважно).

Ребята из Google Arts team под предводительством Дага Фритца, использовали массив общедоступных данных по населению, и по объёму поискового трафика Google. И получилось вот что:

Трёхмерная инфографика плотности населения Земли (ссылка):

Для реализации задачи был выбрана JS-библиотека Three.js, предназначенная для разработки лёгких трёхмерных сцен. Каждая точка стала основой для параллелепипеда, при этом для каждого было построено 5 граней (кроме нижней, ненужной). Направление каждого параллелепипеда высчитывалось в соответствии с положением точки на земной поверхности, и продолжением вектора идущего из центра. Для скорости обработки и построения, затем весь массив полигонов был соединён в единый графический объект. Много математики и расчётов, но в итоге получилось интересно.

А вот так выглядит инфографика по поисковому трафику (ссылка):

Непосредственно за само управление объектом в трёхмере отвечает как раз WebGL, перенося обработку картинки с сервера на процессор самого пользователя.

Так что теперь можно взять и построить глобус любой страны. Хоть глобус Никарагуа рисуйте:) Разработчики открыли доступ к данным (доступно по ссылке), в формате JSON. Если кто будет играться — покажите, что получилось.

Сен 9, 2011Максим Горбачевский
Статья была интересной?
  • Поделюсь (0)
  • Полезно (1)
  • Бесполезно (0)
  • Банально (0)
Tableau Mobile - дэшборды на iPadСанкей построить несложно
Главная Книги Трёхмерная инфографика в браузере — Chrome Experiments WebGL
Изображение13 г. назад 1 Примеры визуализацииchrome experiments, Google, Javascript, WebGL, плотность населения, поисковый трафик, столбиковая диаграмма/bar chart
facebook-profile-picture
Максим Горбачевский

Основатель и руководитель агентства Infographer

Сайт Фейсбук Instagram Твиттер Pinterest
  • dmitryz

    Обалденно! Очень наглядно! Особенно клево что шарик можно крутить!

  См. также  
Примеры визуализации

Отправка открыток. Вклад инфографики

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

Примеры визуализации

Bar Chart – жертва инфографики

Похоже, что самая простая столбчатая диаграмма (Bar Chart) — это наилучшая основа для дизайна, она позволяет сохранить структуру данных... 0

Примеры визуализации

Визуализация: Кто чаще помогает детям делать уроки?

Еще один пример визуализации данных с сайта DSA Insights Кто из родителей чаще помогает детям делать школьные задания? 0

Инструменты

Нано-чарты и Микро-графики

На конференции DD4D Mark Palmer (VizMetrics Inc.) рассказывал, как ловко они перерабатывают стопки бизнес отчетов В концентрированный... 0

Книги

Книга про D3 — популярную JS библиотеку для интерактивных визуализаций (+скачать)

Эта книга позиционируется как руководство для специалистов любого уровня подготовки, и даже и даже обладая практически полным отсутствием... 0

Инструменты

Mekko Graphics

прорисовали порядка 20 видов графиков, необходимых для бизнес презентаций. 0

Теория

Моя любовь к горизонтальным столбиковым диаграммам

Автор статьи вовсе не считает, что горизонтальные столбиковые диаграммы всегда будут предпочтительнее их вертикальных двойников, но скорее... 0

Примеры визуализации, События

Визуализация «Отчета о доступности сервисов и данных Google»

Визуализация «Отчета о доступности сервисов и данных Google»: победители конкурса на лучшую... 0

Мы в Facebook, ежедневно

Unable to display Facebook posts.
Show error

Error: Server configuration issue
Please refer to our Error Message Reference.
Для авторов
Приглашаем авторов по теме инфографики к сотрудничеству. Политика обработки персональных данных и пользовательское соглашение.
Контакты

Infographer – это агентство инфографики и образовательный ресурс об инфографике. Офисы в Москве и Гааге, работаем для клиентов со всего мира (контакты).

Адрес: Москва, Ленинский просп. 30А

Телефон: +7 916 628 47 64

Имейл: mg@infographer.ru

Пишем для вас с 2009 года © Infographer, при перепечатке ссылка обязательна. 16+