Код и искусство
Миша скинул мне сегодня очень классную лекцию The Art of Code. Она про использование кода для создания бесполезных на первый взгляд вещей, про написание кода как вид искусства, не ради результата, а ради самого процесса. Это не совсем техническая лекция, если что, хотя там есть код в виде сонетов Шекспира, например.
А вот несколько особенно интересных и классных мест в видео:
4:36 — знаменитая игра «Жизнь» Джона Конвея (Conway's Game of Life). Это клеточный автомат, живущий по нескольким простым правилам. С его помощью можно создавать паттерны, живущие вечно, повторяющиеся во времени или генерирующие новые паттерны.
20:00 — как работает распознавание изображений и какие безумные картинки можно получить, если поиграться с ним.
25:43 — про написание программ, где сам текст программы выглядит как произведение искусства. Например, код в виде фрактала Мандельброта.
36:41 — можете представить себе язык в стиле сонетов Шекспира? А такой есть — Shakespeare Programming Language! Или язык, где программы — реальные рецепты, по которым можно приготовить шоколадный торт, например.
39:42 — язык Piet (назван в честь Пита Мондриана). Программы на нём пишутся с помощью цветных блоков и похожи скорее на абстрактные картины. Можно писать картины, в которых будут зашифрованы стихи (написанные на языке из сонетов Шекспира, ага).
43:27 — язык Sonic Pi, придуманный для создания электронной музыки.
46:40 — а это прям самая офигенная часть! В 2018 году автор лекции придумал на салфетке в баре свой язык Rockstar, где весь код похож на тексты песен из heavy metal. Например:
Сегодня у меня появилась новая цель в жизни: теперь я хочу стать certified rockstar developer!
#ссылки
Миша скинул мне сегодня очень классную лекцию The Art of Code. Она про использование кода для создания бесполезных на первый взгляд вещей, про написание кода как вид искусства, не ради результата, а ради самого процесса. Это не совсем техническая лекция, если что, хотя там есть код в виде сонетов Шекспира, например.
А вот несколько особенно интересных и классных мест в видео:
4:36 — знаменитая игра «Жизнь» Джона Конвея (Conway's Game of Life). Это клеточный автомат, живущий по нескольким простым правилам. С его помощью можно создавать паттерны, живущие вечно, повторяющиеся во времени или генерирующие новые паттерны.
20:00 — как работает распознавание изображений и какие безумные картинки можно получить, если поиграться с ним.
25:43 — про написание программ, где сам текст программы выглядит как произведение искусства. Например, код в виде фрактала Мандельброта.
36:41 — можете представить себе язык в стиле сонетов Шекспира? А такой есть — Shakespeare Programming Language! Или язык, где программы — реальные рецепты, по которым можно приготовить шоколадный торт, например.
39:42 — язык Piet (назван в честь Пита Мондриана). Программы на нём пишутся с помощью цветных блоков и похожи скорее на абстрактные картины. Можно писать картины, в которых будут зашифрованы стихи (написанные на языке из сонетов Шекспира, ага).
43:27 — язык Sonic Pi, придуманный для создания электронной музыки.
46:40 — а это прям самая офигенная часть! В 2018 году автор лекции придумал на салфетке в баре свой язык Rockstar, где весь код похож на тексты песен из heavy metal. Например:
Rockstar is a big bad monster — присвоение переменной Rockstar значения 1337.Сегодня у меня появилась новая цель в жизни: теперь я хочу стать certified rockstar developer!
#ссылки
Видеоподкаст про визуализации
Рома Бунин, автор канала Reveal the Data, запустил видеоподкаст про визуализации данных и позвал меня во второй выпуск.
Мы там говорим про программирование, визуализации в вебе, разные инструменты и технологии. А ещё я рассказываю, как я вообще дошла до жизни такой и как делала аналог D3 в 2010 году, когда это всё ещё не было мейнстримом!
#подкаст
Рома Бунин, автор канала Reveal the Data, запустил видеоподкаст про визуализации данных и позвал меня во второй выпуск.
Мы там говорим про программирование, визуализации в вебе, разные инструменты и технологии. А ещё я рассказываю, как я вообще дошла до жизни такой и как делала аналог D3 в 2010 году, когда это всё ещё не было мейнстримом!
#подкаст
YouTube
Наташа Степанова — Фронт-энд программистка
Видеоподкаст с программисткой Наташей Степановой: про карьерный путь, примеры проектов и технический стэк для визуализации данных.
1:02 — Карьерный путь
5:39 — Примеры проектов
24:38 — Про визуализацию в вебе
29:20 — SVG vs Canvas
35:30 — Стек для проектов…
1:02 — Карьерный путь
5:39 — Примеры проектов
24:38 — Про визуализацию в вебе
29:20 — SVG vs Canvas
35:30 — Стек для проектов…
DataFest Tbilisi
В прошедшие выходные я участвовала в онлайн конференции DataFest Tbilisi. Вернее, я скорее следила за ней, чем полноценно участвовала, но что-то интересное почерпнула.
Понравился второй день, особенно вокршоп Valentina D'Efilippo про карты (Maps in the Time of Corona). Задание было забавное: сначала нужно было по памяти от руки нарисовать карту мира, а потом на ней нарисовать визуализацию чего-то повседневного из жизни. Я в итоге показала все свои чаты и созвоны за май, аж 10 разных городов набралось.
Мне это показалось похожим на проект Dear Data — две девушки из разных стран каждую неделю в течении года рисовали друг другу открытки с визуализациями из своей жизни. Сколько раз за неделю здоровались и прощались, сколько смотрели на часы или сколько дверей открыли и закрыли.
Ещё из запомнившегося: Gabrielle Merite показывала примеры красивых обработки и совмещения графиков, фотографий и рисунков и рассказывала о том, как можно оживить данные и придать им эмоциональную окраску.
#ссылки #визуализация
В прошедшие выходные я участвовала в онлайн конференции DataFest Tbilisi. Вернее, я скорее следила за ней, чем полноценно участвовала, но что-то интересное почерпнула.
Понравился второй день, особенно вокршоп Valentina D'Efilippo про карты (Maps in the Time of Corona). Задание было забавное: сначала нужно было по памяти от руки нарисовать карту мира, а потом на ней нарисовать визуализацию чего-то повседневного из жизни. Я в итоге показала все свои чаты и созвоны за май, аж 10 разных городов набралось.
Мне это показалось похожим на проект Dear Data — две девушки из разных стран каждую неделю в течении года рисовали друг другу открытки с визуализациями из своей жизни. Сколько раз за неделю здоровались и прощались, сколько смотрели на часы или сколько дверей открыли и закрыли.
Ещё из запомнившегося: Gabrielle Merite показывала примеры красивых обработки и совмещения графиков, фотографий и рисунков и рассказывала о том, как можно оживить данные и придать им эмоциональную окраску.
#ссылки #визуализация
👍1
SVG анимации
Последние 2 недели я активно делала проект для Парка Интуиции. О нём я пока молчу до публичной публикации, но расскажу про некоторые особенности разработки. Я делала для него много noscript анимаций в том числе зависящих от скролла. Решила собрать несколько небольших примеров и поделиться ими.
1. https://codepen.io/gnykka/pen/KKVVXMv
Самый простой способ сделать анимацию — нативный, в самом noscript. Наряду со стандартными и привычными всем элементами типа path, circle и т.д. в noscript есть элемент animation. Можно сделать автоматическую анимацию какого-то свойства (например, прозрачности) или запускать анимацию из кода. Можно взять элемент animateMotion и сделать анимацию движения по траектории.
2. https://codepen.io/gnykka/pen/QWyyqJQ
Второй простой и стандартный способ — анимация в css с помощью keyframes. Тут уже noscript ничем не отличается от любого другого html элемента. Удобство в том, что можно делать сложные анимации относительно просто без написания кода. Здесь, кстати, может помочь отличная шпаргалка про easing functions.
3. https://codepen.io/gnykka/pen/ZEbqraW
Ну и сложный способ для ценителей — через код можно сделать практически всё, что угодно. Например, морфинг объектов. Или можно привязывать изменение свойств элементов к положению скролла. Или объединить и делать морфинг по скроллу (как раз наш случай). В примере выше я тестировала плагин Greensock, но потом выяснила, что он доступен только по подписке. Ещё я попробовала KUTE.js, но там морфинг какой-то ограниченный и не очень красивый. Так и не нашла удобного инструмента, посоветуйте мне, если знаете такой!
А то, что у нас получилось, покажу на следующей неделе.
#практика #noscript #анимации
Последние 2 недели я активно делала проект для Парка Интуиции. О нём я пока молчу до публичной публикации, но расскажу про некоторые особенности разработки. Я делала для него много noscript анимаций в том числе зависящих от скролла. Решила собрать несколько небольших примеров и поделиться ими.
1. https://codepen.io/gnykka/pen/KKVVXMv
Самый простой способ сделать анимацию — нативный, в самом noscript. Наряду со стандартными и привычными всем элементами типа path, circle и т.д. в noscript есть элемент animation. Можно сделать автоматическую анимацию какого-то свойства (например, прозрачности) или запускать анимацию из кода. Можно взять элемент animateMotion и сделать анимацию движения по траектории.
2. https://codepen.io/gnykka/pen/QWyyqJQ
Второй простой и стандартный способ — анимация в css с помощью keyframes. Тут уже noscript ничем не отличается от любого другого html элемента. Удобство в том, что можно делать сложные анимации относительно просто без написания кода. Здесь, кстати, может помочь отличная шпаргалка про easing functions.
3. https://codepen.io/gnykka/pen/ZEbqraW
Ну и сложный способ для ценителей — через код можно сделать практически всё, что угодно. Например, морфинг объектов. Или можно привязывать изменение свойств элементов к положению скролла. Или объединить и делать морфинг по скроллу (как раз наш случай). В примере выше я тестировала плагин Greensock, но потом выяснила, что он доступен только по подписке. Ещё я попробовала KUTE.js, но там морфинг какой-то ограниченный и не очень красивый. Так и не нашла удобного инструмента, посоветуйте мне, если знаете такой!
А то, что у нас получилось, покажу на следующей неделе.
#практика #noscript #анимации
Проект «Искажения»
Неделю назад я обещала рассказать про проект в Парке Интуиции. Мы делали его целый месяц и сегодня наконец-то опубликовали. Это рассказ про когнитивные искажения и человеческие заблуждения с анимированными иллюстрациями и интерактивными задачками.
bias.slaylines.io
Началась история с моего желания сделать что-то со скроллителлингом. У ребят из нашей команды в свою очередь было желание рассказать про разные обманки мозга. На этом мы объединились и сузили тему до реализуемой за месяц. Вова Тупикин и Никита Ларионов нашли материал и придумали весь текст. Даша Колесникова нарисовала иллюстрации, связанные визуально и по смыслу с разными абзацами текста. А я всё это собрала в единую штуковину.
Неделю назад я обещала рассказать про проект в Парке Интуиции. Мы делали его целый месяц и сегодня наконец-то опубликовали. Это рассказ про когнитивные искажения и человеческие заблуждения с анимированными иллюстрациями и интерактивными задачками.
bias.slaylines.io
Началась история с моего желания сделать что-то со скроллителлингом. У ребят из нашей команды в свою очередь было желание рассказать про разные обманки мозга. На этом мы объединились и сузили тему до реализуемой за месяц. Вова Тупикин и Никита Ларионов нашли материал и придумали весь текст. Даша Колесникова нарисовала иллюстрации, связанные визуально и по смыслу с разными абзацами текста. А я всё это собрала в единую штуковину.
Искажения — ищем у себя ошибки мышления
Когнитивные искажения есть у каждого, они заставляют неправильно воспринимать новую информацию и делать ошибочные выводы. Проверьте, легко ли вас обмануть.
Steamgraph
Давненько не брала я в руки шашек! То есть не кодила красивых и бессмысленных графиков на d3. Вчера мне внезапно захотелось сделать steamgraph. Получился такой динамический пример:
https://codepen.io/gnykka/pen/ZEQJOmG
#практика #d3
Давненько не брала я в руки шашек! То есть не кодила красивых и бессмысленных графиков на d3. Вчера мне внезапно захотелось сделать steamgraph. Получился такой динамический пример:
https://codepen.io/gnykka/pen/ZEQJOmG
#практика #d3
CodePen
Dynamic Steamgraph
Dynamic steam chart with randomized data....
Моё главное развлечение последней недели — генерация лабиринтов. Уже полгода у меня на ноуте лежит книга Mazes for Programmers, но добралась я до неё только сейчас.
Книга оказалась интересной, в ней объясняются алгоритмы построения и решения лабиринтов. Объясняются просто, в картинках и описаниях без лишних математических формул. Пока я освоила первую главу из четырёх. Там рассматриваются основные 6 алгоритмов для генерации идеальных (perfect) лабиринтов. Это в которых нет недоступных клеток, то есть из любой выбранной клетки можно попасть в любую другую.
Самые простые алгоритмы это Binary Tree и Sidewinder. Они создаются абсолютно случайно (фактически подбросом монетки в каждой клетке), поэтому имеют очень предсказуемую структуру. Противоположны им Aldous-Broder и Wilson's. С их помощью лабиринты получаются сложными и без угадываемой структуры, но создаются очень долго из-за большого числа случайных блужданий. Два последних алгоритма, Hunt and Kill и Recursive Backtracker, ограничивают блуждания, поэтому работают быстрее и эффективнее. А ещё у них меньше всего тупиков.
В следующих главах рассматриваются другие алгоритмы, лабиринты сложной или необычной формы, трёхмерные лабиринты и прочее. Буду ещё рассказывать. А это лабиринт, созданный методом Hunt and Kill
#алгоритмы #лабиринты
Книга оказалась интересной, в ней объясняются алгоритмы построения и решения лабиринтов. Объясняются просто, в картинках и описаниях без лишних математических формул. Пока я освоила первую главу из четырёх. Там рассматриваются основные 6 алгоритмов для генерации идеальных (perfect) лабиринтов. Это в которых нет недоступных клеток, то есть из любой выбранной клетки можно попасть в любую другую.
Самые простые алгоритмы это Binary Tree и Sidewinder. Они создаются абсолютно случайно (фактически подбросом монетки в каждой клетке), поэтому имеют очень предсказуемую структуру. Противоположны им Aldous-Broder и Wilson's. С их помощью лабиринты получаются сложными и без угадываемой структуры, но создаются очень долго из-за большого числа случайных блужданий. Два последних алгоритма, Hunt and Kill и Recursive Backtracker, ограничивают блуждания, поэтому работают быстрее и эффективнее. А ещё у них меньше всего тупиков.
В следующих главах рассматриваются другие алгоритмы, лабиринты сложной или необычной формы, трёхмерные лабиринты и прочее. Буду ещё рассказывать. А это лабиринт, созданный методом Hunt and Kill
#алгоритмы #лабиринты
Hunt and Kill алгоритм
Продолжаю изучать алгоритмы генерации лабиринтов. И чтобы уж точно закрепить новые знания, я решила сделать визуализацию работы hunt and kill алгоритма:
https://codepen.io/gnykka/pen/qBbMrxK
#алгоритмы #лабиринты
Продолжаю изучать алгоритмы генерации лабиринтов. И чтобы уж точно закрепить новые знания, я решила сделать визуализацию работы hunt and kill алгоритма:
https://codepen.io/gnykka/pen/qBbMrxK
#алгоритмы #лабиринты
Пара ссылок в копилочку
Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.
А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.
#ссылки
Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.
А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.
#ссылки
Generativeartistry
Generative Artistry
Generative art tutorials, news and love.
Генератор супрематизма
В последнем Парке Интуиции во время обсуждений возможных проектов прозвучала идея сделать генератор картин Кандинского. Мне, как большому любителю абстрактного и современного искусства, эта идея сразу приглянулась.
Спустя два месяца я внезапно к этой идее вернулась и сделала на выходных небольшой генератор супрематических картин:
https://codepen.io/gnykka/pen/bGEJddK
Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.
А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.
#практика #generativeart
В последнем Парке Интуиции во время обсуждений возможных проектов прозвучала идея сделать генератор картин Кандинского. Мне, как большому любителю абстрактного и современного искусства, эта идея сразу приглянулась.
Спустя два месяца я внезапно к этой идее вернулась и сделала на выходных небольшой генератор супрематических картин:
https://codepen.io/gnykka/pen/bGEJddK
Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.
А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.
#практика #generativeart
codepen.io
Suprematism Art Generator v1
...
Картографические проекции
Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e
А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.
#карты #ссылки
Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e
А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.
#карты #ссылки
Gist
Comparing Map Projections
Comparing Map Projections. GitHub Gist: instantly share code, notes, and snippets.
Про доступность приложений
Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
https://twitter.com/Kristy_Viers/status/1287189581926981634
А на днях Сбербанк опубликовал подробный гайд по доступности интерфейсов:
http://specialbank.ru/guide/
Это важная тема, которой часто пренебрегают. Я регулярно наталкиваюсь на формы, которые не работают с клавиатуры, кнопки, которые завёрстаны обычными span элементами или ссылки, которые не ссылки, а просто текст, клик на который обрабатывается в коде. А ещё стоит помнить про цвета: до 8% людей в мире имеют разные нарушения восприятия цвета.
Ещё полезные ссылки по теме:
• W3C стандарты и гайдлайны
• Lighthouse — встроенный инструмент Chrome для аудита страницы (проверяет скорость загрузки, доступность, сео и т.д.)
#ссылки
Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
https://twitter.com/Kristy_Viers/status/1287189581926981634
А на днях Сбербанк опубликовал подробный гайд по доступности интерфейсов:
http://specialbank.ru/guide/
Это важная тема, которой часто пренебрегают. Я регулярно наталкиваюсь на формы, которые не работают с клавиатуры, кнопки, которые завёрстаны обычными span элементами или ссылки, которые не ссылки, а просто текст, клик на который обрабатывается в коде. А ещё стоит помнить про цвета: до 8% людей в мире имеют разные нарушения восприятия цвета.
Ещё полезные ссылки по теме:
• W3C стандарты и гайдлайны
• Lighthouse — встроенный инструмент Chrome для аудита страницы (проверяет скорость загрузки, доступность, сео и т.д.)
#ссылки
Возвращаюсь с несколькими потенциально полезными ссылками в копилочку.
1. https://riccardoscalco.it/textures — JavaScript библиотека для создания SVG паттернов. Если хотели следующую карту залить не цветом, а узорами в полоску или клетку, то это как раз оно!
2. http://sergeychikin.ru/365 — огромный набор иконок и пиктограмм. Автор добавляет по одной каждый день, пользоваться можно бесплатно, если вы не юр. лицо или не зарабатываете, их используя.
3. http://histography.io — красивая и интересная визуализация статей Википедии с момента Большого взрыва до наших дней. Кстати, сделана на PIXI.js с использованием WebGL.
#ссылки
1. https://riccardoscalco.it/textures — JavaScript библиотека для создания SVG паттернов. Если хотели следующую карту залить не цветом, а узорами в полоску или клетку, то это как раз оно!
2. http://sergeychikin.ru/365 — огромный набор иконок и пиктограмм. Автор добавляет по одной каждый день, пользоваться можно бесплатно, если вы не юр. лицо или не зарабатываете, их используя.
3. http://histography.io — красивая и интересная визуализация статей Википедии с момента Большого взрыва до наших дней. Кстати, сделана на PIXI.js с использованием WebGL.
#ссылки
Временная ось на D3js
Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.
Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.
В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL
У этой оси есть 4 типа отображения (в зависимости от размера и уровня зума) — года, кварталы, месяцы и дни. Полупрозрачным красным обозначены выходные.
Здесь всего 2 зависимости: D3js (для модификаций noscript элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).
#практика #d3
Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.
Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.
В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL
У этой оси есть 4 типа отображения (в зависимости от размера и уровня зума) — года, кварталы, месяцы и дни. Полупрозрачным красным обозначены выходные.
Здесь всего 2 зависимости: D3js (для модификаций noscript элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).
#практика #d3
Как создавать лабиринты
На днях я наконец-то дочитала книгу Mazes for Programmers и теперь знаю аж 12 разных алгоритмов для генерации лабиринтов, несколько методов для их решения и даже умею адаптировать эти методы под разные формы и поверхности.
Я не очень представляю, где мне это может пригодиться, разве что я когда-нибудь осуществлю свою старую идею сделать небольшую браузерную игру. Но пока, чтобы закрепить знания, я решила написать небольшой обзор прочитанного:
https://teletype.in/@gnykka/mazes
Если вам будет интересно, код можно найти у меня на github. Все примеры написаны на Ruby, но в будущем я хочу переписать их на JS и снабдить визуализациями.
#алгоритмы #лабиринты
На днях я наконец-то дочитала книгу Mazes for Programmers и теперь знаю аж 12 разных алгоритмов для генерации лабиринтов, несколько методов для их решения и даже умею адаптировать эти методы под разные формы и поверхности.
Я не очень представляю, где мне это может пригодиться, разве что я когда-нибудь осуществлю свою старую идею сделать небольшую браузерную игру. Но пока, чтобы закрепить знания, я решила написать небольшой обзор прочитанного:
https://teletype.in/@gnykka/mazes
Если вам будет интересно, код можно найти у меня на github. Все примеры написаны на Ruby, но в будущем я хочу переписать их на JS и снабдить визуализациями.
#алгоритмы #лабиринты
Последние месяцы, как вы могли заметить, я не очень часто здесь писала. Во-первых, было много работы, не очень связанной с визуализациями, а во-вторых, я взяла мини-паузу на размышления, о чём я вообще хотела бы писать.
Так, некоторое время назад у меня возникла идея создать цикл небольших статей-туториалов по D3.js. Пока я вижу это как нечто похожее на «как сделать такой-то график» или «как работает такая-то функция». То есть не просто пример кода, а подробное пошаговое объяcнение. Возможно, в будущем из этого могут вырасти почтовая рассылка или даже курс.
Но пока что я хочу понять, куда мне имеет смысл в этом деле двигаться. Поэтому я прикрутила к каналу комментарии, и под этим постом вы можете написать, было бы вам интересно читать технические детали про D3, что именно и насколько глубоко. Или вдруг вы хотите у меня что-нибудь спросить?
Так, некоторое время назад у меня возникла идея создать цикл небольших статей-туториалов по D3.js. Пока я вижу это как нечто похожее на «как сделать такой-то график» или «как работает такая-то функция». То есть не просто пример кода, а подробное пошаговое объяcнение. Возможно, в будущем из этого могут вырасти почтовая рассылка или даже курс.
Но пока что я хочу понять, куда мне имеет смысл в этом деле двигаться. Поэтому я прикрутила к каналу комментарии, и под этим постом вы можете написать, было бы вам интересно читать технические детали про D3, что именно и насколько глубоко. Или вдруг вы хотите у меня что-нибудь спросить?
И чтобы далеко не ходить — опрос! Делать цикл статей по D3?
Anonymous Poll
63%
Да, но нужно больше статей для новичков.
27%
Да, и больше рассказывай про технические нюансы.
10%
Нет, лучше просто примеры показывай.
Сегодняшняя партия ссылок про красоту и пользу:
1. Список современных веб API и технологий, сделанный в виде периодической таблицы. Задизайнено немного странно, поэтому смотреть лучше на компьютере. Будет полезно, чтобы понять, что, насколько и в каких браузерах поддерживается.
2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.
3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.
#ссылки
1. Список современных веб API и технологий, сделанный в виде периодической таблицы. Задизайнено немного странно, поэтому смотреть лучше на компьютере. Будет полезно, чтобы понять, что, насколько и в каких браузерах поддерживается.
2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.
3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.
#ссылки
Туториал как делать простые D3 графики
Я думала, с чего начать, и решила в первой статье разобрать создание line и scatter графиков. А ещё немного углубиться в код D3 и понять, зачем нужны те или иные функции.
Я часто натыкаюсь на разные гайды, как что-то сделать с помощью D3, и меня смущает, что там почти нет объяснений. Большинство статей содержат алгоритм, что, куда и откуда надо скопировать, чтобы благодаря какой-то неведомой магии в результате получилась картинка. Иногда этого достаточно, но часто непонимание, зачем что-то делается в коде, может приводить к странным ошибкам.
Мне хочется больше уделять внимание разбору кода, а не командам формата «скопируйте следующие строчки». Пока что я пытаюсь нащупать баланс в сложности и глубине объяснений. Оставьте мне комментарий, если что-то непонятно или хочется чего-то ещё, и лайкните статью, если всё понравилось!
https://teletype.in/@gnykka/d3-line-scatter
#d3 #статья
Я думала, с чего начать, и решила в первой статье разобрать создание line и scatter графиков. А ещё немного углубиться в код D3 и понять, зачем нужны те или иные функции.
Я часто натыкаюсь на разные гайды, как что-то сделать с помощью D3, и меня смущает, что там почти нет объяснений. Большинство статей содержат алгоритм, что, куда и откуда надо скопировать, чтобы благодаря какой-то неведомой магии в результате получилась картинка. Иногда этого достаточно, но часто непонимание, зачем что-то делается в коде, может приводить к странным ошибкам.
Мне хочется больше уделять внимание разбору кода, а не командам формата «скопируйте следующие строчки». Пока что я пытаюсь нащупать баланс в сложности и глубине объяснений. Оставьте мне комментарий, если что-то непонятно или хочется чего-то ещё, и лайкните статью, если всё понравилось!
https://teletype.in/@gnykka/d3-line-scatter
#d3 #статья
Ссылки в этот раз не столько полезные, сколько залипательные.
1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.
2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)
3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.
#ссылки
1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.
2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)
3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.
#ссылки
Хотела успеть написать второй туториал до Нового Года, но не успела. Будет уже в следующем году. Планирую разобрать бар чарты.
А пока принесу вам немного новогоднего настроения! На выходных Миша (@ohblog) написал небольшой скрипт с WebGL, который позволяет добавить снежинки на любой сайт. Это мы вспоминали девяностые и двухтысячные, когда подобные снежинки появлялись почти везде.
Демо можно увидеть тут: https://codepen.io/mkalygin/pen/ZEpveZp
Код тут: https://github.com/mkalygin/snowflakes
И если вы вдруг захотите, чтобы всё вокруг было в снегу, то я сделала небольшое расширение для хрома, которое включает снежинки абсолютно везде на уровне браузера! Немного грузит видеокарту, но можно отключать. Возможно, сделаю апдейт сегодня-завтра и добавлю настройки снега и списка сайтов.
А пока принесу вам немного новогоднего настроения! На выходных Миша (@ohblog) написал небольшой скрипт с WebGL, который позволяет добавить снежинки на любой сайт. Это мы вспоминали девяностые и двухтысячные, когда подобные снежинки появлялись почти везде.
Демо можно увидеть тут: https://codepen.io/mkalygin/pen/ZEpveZp
Код тут: https://github.com/mkalygin/snowflakes
И если вы вдруг захотите, чтобы всё вокруг было в снегу, то я сделала небольшое расширение для хрома, которое включает снежинки абсолютно везде на уровне браузера! Немного грузит видеокарту, но можно отключать. Возможно, сделаю апдейт сегодня-завтра и добавлю настройки снега и списка сайтов.