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

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

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

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

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

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

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

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

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

blog.matthen.com

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

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

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

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

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

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

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

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

Interstellar

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

visualgo.net

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

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

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

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

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