TGViewer
LEFT JOIN LEFT JOIN @leftjoin · 41.8K subscribers
Post #694 10.5K
📈 Grammar of graphics in a nutshell 📖
Вас когда-нибудь интересовало как работают такие фреймворки, как Observable Plot, ggplot2 или Vega-Lite? Автора этой статьи всерьез заинтересовал этот вопрос, поэтому он посмотрел множество реализаций, прочитал кучу статей, и кое-что придумал.
Пересказывать изучение визуализации целиком было бы глупо (важную чсть исследования составляют примеры и код), поэтому мы вкратце пройдемся по самым важным моментам, а полную цепочку преобразований лучше увидеть своими глазами на сайте.

🤔 Что вообще такое грамматика графики (GoG)?
Грамматика графики (GoG) — это язык для определения статистической графики, такой как гистограммы, диаграммы рассеяния и линейные графики из составных частей. Возможно, вы слышали или даже использовали библиотеку, построенную на GoG, такую ​​как Observable Plot, ggplot2, Vega-Lite и Swift Charts.

🔗 Конвейер GoG
Грубо говоря, GoG разделяет визуализацию данных на два отдельных этапа: данные - кодировки + метки -> абстрактное пространство - масштабы-> экранное пространство.

⚪ Все начинается с формы
Прежде чем мы сможем перейти к реальным компонентам GoG, нам нужен способ рендеринга элемнтов на экране. Для этого используется SVG и создается несколько простых основных элементов: прямоугольник и круг. С помощью этих элементов, впоследствии, будет выстроена вся визуализация. Кстати, некоторое время назад я частично рассказывал про d3.js и даже делился примером.

⚖️ Веса и абстрактное пространство
Чтобы сопоставить абстрактное визуальное пространство и пространство пикселей экрана, используются шкалирование.
В чем разница между абстрактным и экранным пространством? Экранное пространство — (во всех смыслах и целях) декартова система координат, а абстрактное пространство не обязательно должно быть таковым. Шкалы используются для построения отображений из абстрактного пространства в пространство экрана, чтобы точно передавать информацию, которая заключается в данных.

⏭ Затем в статье объясняются нюансы меток, кодировок, осей и легенды графика, но тут без визуальных объяснений не обойтись, поэтому переходите на сайт.

🚀 В целом, это, конечно, маленькая и неполная версия грамматики графики. Тем не менее, она позволяет рассмотреть весь путь создания визуализации: от исходных данных до графика на экране.
  • 👍 20
  • 🔥 4
More from @leftjoin
  1. Oct 14, 2026Claude помог обнаружить новую планету Наверное. Пользователь reddit проанализировал данные…
  2. Oct 12, 20264 уровня ИИ-осведомленности Еще в апреле Андрей Карпаты (автор термина «вайбкодинг», если…
  3. Oct 9, 2026Anthropic представила Claude Dashboards и Claude Motion И вот опять ИИ отбирает работу у а…
  4. Oct 7, 2026Состоялся релиз Polars 2.0 Polars — Python-библиотека для работы с данными и популярная ал…
  5. Oct 5, 2026Physical AI: следующий этап развития ИИ Рано или поздно ИИ выйдет за пределы интернета в р…
  6. Sep 30, 2026Что было на OpenAI Dev Day? Вообще-то много чего — больше 20 релизов и анонсов. Пройдемся…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →