Красивые и наглядные анимации и диаграммы

Лучший способ объяснить что-то — нарисовать диаграмму, картинку или, лучше всего, создать интерактивную. Кроме того, красивые и подробные диаграммы или занимательные анимации просто интересно рассматривать.

Мы подобрали для вас самые интересные и красивые диаграммы и анимации (все заголовки кликабельны).

Краткая история веб-дизайна

HistoryOfWebDesign-2

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

Разложение в ряды Фурье

Fourier series visualisation with d3.js.

Интерактивная визуализация рядов Фурье с помощью библиотеки D3.js. Это одновременно и отличная демонстрация способностей библиотеки, и хорошее наглядное пособие для изучающих математику.

Визуализация алгоритмов

starry-night-detail

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

blog.matthen.com

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

tumblr_mzgbnwvyTe1qfg7o3o1_400

Или треугольник Серпинского:

tumblr_n53y89g7nQ1qfg7o3o1_400

Что такое цепи Маркова

Markov Chains

Наглядное объяснение цепей Маркова с анимированными и интерактивными иллюстрациями.

Официальный сайт D3.js

D3.js   Data Driven Documents

Многие красивые анимации на HTML создаются с помощью библиотеки D3.js. И, конечно, что может быть лучшим источником вдохновения, как не официальный сайт библиотеки? На главной странице вы уивидите множество шестиугольников: каждый из них является ссылкой на соответствующую диаграмму или анимацию.

Из чего состоит QR-код

lXnxcwK

Небольшая анимация, показывающая, из каких элементов состоит QR-код и как он считывается.

Interstellar

Interstellar   Interactive wormhole   black hole

Хотите повторить путь, пройденный Endurance в фильме Interstellsar? Теперь у вас есть такая возможность прямо в браузере.

visualgo.net

VisuAlgo   Segment Tree

Сайт с пошаговым объяснением работы основных алгоритмов и структур данных — от работы со стеком до хеширования.

Что происходит при звонке модема

dialup final.png  2500×1301

Диаграмма, наглядно показывающая, из каких этапов состоит процесс соединения по dial-up.

3D-модель Солнечной системы

CSS 3D Solar System

Трехмерная анимированная модель Солнечной системы, созданнная с помощью HTML и CSS.