![](https://habrastorage.org/getpro/habr/post_images/59a/20f/f33/59a20ff338c07ad706e0e949fd26ebbc.jpg)
Михаил Дунаев ( war_hol )
С визуализацией данных и с различными диаграммами мы сталкиваемся каждый день, это какие-то Google Analitics, Интернет-банки, это Excel и т.д.
![](https://habrastorage.org/getpro/habr/post_images/d7d/c44/7bf/d7dc447bfc5f7e378fffb0a7915f3ce9.png)
На самом деле графики преследуют человечество всю нашу историю. Одна из первых визуализаций данных — это Х век н.э. Неизвестный астроном изобразил с помощью диаграмм движение небесных тел:
![](https://habrastorage.org/getpro/habr/post_images/951/ed8/f22/951ed8f22e165ec10d8a16eac1643110.png)
Следующая интересная работа — это движение пятен по солнцу, XVII век:
![](https://habrastorage.org/getpro/habr/post_images/0a6/fc5/532/0a6fc5532847bdc0f7320969f8397e8f.png)
Тут уже виден некоторый таймлайн, он появляется от зарождения инфографики.
Следующий. В XVIII веке появились такие устройства, которые позволяли делать механический таймлайн, т.е. прокручивая ручки слева и справа, вы можете разворачивать свиток в левую и правую сторону, и смотреть, узнавая историю из этого документа. Эдакая альтернатива книге:
![](https://habrastorage.org/getpro/habr/post_images/5a2/1d3/52c/5a21d352cf48e72d7a22242e3110f5ef.png)
В это же время появляется такой прекрасный экземпляр визуализации данных:
![](https://habrastorage.org/getpro/habr/post_images/903/d4b/50d/903d4b50d17c7ae15d75178c3ee749a8.png)
Это история человеческих империй. Тоже таймлайн, первый качественный цветной таймлайн, который появился у людей.
А это самая известная историческая инфографика:
![](https://habrastorage.org/getpro/habr/post_images/4ea/15b/64a/4ea15b64a8bd94679eb5593348201f52.png)
На ней показывается движение войск Наполеона от Франции до Москвы и обратно. Соответственно, бежевый цвет — это движение до Москвы, черный цвет — это движение обратно. Толщина линий показывает количество войск у Наполеона. Обозначены специально реки и можем увидеть, как при переходе через реку Наполеон потерял часть своего войска. Такой вид представления данных, который позволяет нам наглядно «видеть» историю.
Это уже наше время:
![](https://habrastorage.org/getpro/habr/post_images/f3f/f48/bd1/f3ff48bd166aab41378a7f1c09ef2159.png)
Это визуализация, которая показывает места рождений и смерти носителей культуры — синим цветом обозначено место, где человек родился, красным — где он умер. Это ребята собрали всех исторических каких-то важных деятелей для культуры, ученых, артистов. И видно, что процесс урбанизации происходил во все время существования человечества, т.е. с самых ранних времен, люди-носители культуры стремились в культурные центры, и при всем при этом рождались на окраинах. Т.е. как сейчас со всей России люди едут в Москву. Это началось не сейчас, это было всегда.
![](https://habrastorage.org/getpro/habr/post_images/a90/4ec/538/a904ec5387f531c4675f0dac7e527f1a.png)
К сожалению, при всем развитии современных технологий и развитии инфографики большая часть населения нашей планеты использует стандартные графики из EXCEL, и дальше никто не идет.
На самом деле, графиков гораздо больше, есть такая красивая диаграмма, которая показывает, какой график вам нужно выбрать, в зависимости от ваших данных, т.е. если вам надо показать взаимосвязь, распределение, сравнение, композицию:
![](https://habrastorage.org/getpro/habr/post_images/0e6/335/11c/0e633511c87549a6f3d8ed3549b2b90a.png)
Вот хороший пример, как можно красиво представить классический график:
![](https://habrastorage.org/getpro/habr/post_images/d29/34e/f13/d2934ef13c14fee5621ad6c12f5afd89.png)
Это уже не Excel. Это количество смертей в войне в Ираке — «New York Times» с помощью таких кровоподтеков показывает бар чарт. Во-первых, это красиво, во-вторых, сразу наглядно, сколько и когда людей погибало.
Точно так же мои бывшие коллеги из студии инфографики «РИА Новости» что-то тут изобразили:
![](https://habrastorage.org/getpro/habr/post_images/a02/65f/62b/a0265f62b36482014e6c7b47e3c6305b.png)
Видно, как это красиво. Т.е. если мы не ограничиваемся графиками из Excel, то у нас сразу начинает получаться красиво и модно.
Еще хороший пример:
![](https://habrastorage.org/getpro/habr/post_images/bbf/76e/342/bbf76e3422ae46ef39af6483b355f61d.png)
Это Флоренс Найтингейл, основательница медицинского движения в XIX веке изобразила причины смертей в английской армии. Видите, XIX век, а уже какая красивая графика.
А это уже наше время, количество и популярность онлайн игр:
![](https://habrastorage.org/getpro/habr/post_images/2d1/961/dd0/2d1961dd0ec8fa181d58a845248c5bb3.png)
И мой любимый пример, это мой жесткий диск:
![](https://habrastorage.org/getpro/habr/post_images/f36/533/043/f36533043e0716bfb6878f8d8adc993d.png)
Этот вид графика называется treemap. Есть программа для Mac ОС и Windows, которая показывает нам площадь каждого прямоугольника — размер файла. Это все файлы на моем жестком диске. Видно, что зеленый — это сериальчик, который я смотрю, красный — это папка Applications, синий — это swap-файлы… Когда вы видите свой жесткий диск в таком виде, вы сразу можете понять, куда делось ваше место, какой файл много места занимает, — очень удобно и наглядно.
Это о том, как надо представлять данные, и зачем это нужно. Однако когда появляется интерактив, интерактив в вебе, то все дело меняется. Количество графиков и диаграмм резко возросло, и они не поддаются никакой классификации.
Вот хороший пример на D3, в нем совмещены сразу несколько типов диаграмм и результат, конечно, фантастический:
![](https://habrastorage.org/getpro/habr/post_images/271/d63/9de/271d639dee581645187ddb55076993c2.png)
На самом деле, инфографика и визуализация данных под веб имеет очень короткую историю. Все началось в 90-х годах с программы «Macromedia Director».
![](https://habrastorage.org/getpro/habr/post_images/891/cca/05b/891cca05bc0523481822b49cad467714.png)
Это предвестник flash’а, на ней начали появляться первые какие-то типы визуализации данных под веб. Естественно, после «Macromedia Director» пришла нам в помощь «Adobe Flash Platform», она была прекрасной. На самом деле визуализировать данные, стоить графики на flash’е — не придумать лучше инструмента.
![](https://habrastorage.org/getpro/habr/post_images/9d1/bfe/859/9d1bfe85933b37c4d172a9b1703016b5.png)
«РИА Новости» использовала flash как основной инструмент для инфографики. Два года назад они полностью отказались от flash’а, а до этого времени использовали, потому что удобно.
Естественно, на смену пришли эти трое парней — html, javascript, css:
![](https://habrastorage.org/getpro/habr/post_images/f76/10f/54c/f7610f54ca7a62bdfc592bf6d892b366.png)
И привели за собой svg и WebGL, которые позволили нам делать под веб почти все то же самое, что мы могли делать на flash’е.
![](https://habrastorage.org/getpro/habr/post_images/f84/df8/b38/f84df8b384c9eb42a48c779e4909968b.png)
Многое позволяет нам делать D3. В сети можно найти примеры того, как это работает онлайн — все работает быстро (это вектор), красиво и без каких-то тормозов. D3 — одна из лучших библиотек на данный момент для визуализации данных. Мы можем посмотреть скриншот с Github:
![](https://habrastorage.org/getpro/habr/post_images/fd4/fd8/b2f/fd4fd8b2f786e14a42e3ed34d46bb867.png)
Эта библиотека начала свое развитие в 2010-ом году, она последние пять лет динамично развивается, в последнее время, правда, не так сильно, но это, скорее, связано с тем, что ход как бы устоялся и новых фич не так много нужно придумывать. Мы можем увидеть, что 37 тыс. звездочек и почти 10 тыс. форков говорят о том, что библиотека действительно хороша. Она входит в 20-ку самых популярных библиотек на JavaScript для Github.
![](https://habrastorage.org/getpro/habr/post_images/527/d43/c45/527d43c45c33b61967f6f02956174345.png)
Вот хороший пример. Использование непосредственно библиотеки D3 в наше время. «New York Times» не важно, что показывают, а важно то, как они это показывают:
![](https://habrastorage.org/getpro/habr/post_images/034/4a2/ebb/0344a2ebb67b6a0af29507b81aac9e7c.png)
Здесь очень хорошо виден дата-драйвинг подход — каждый DOM элемент хранит в себе какой-то элемент, часть данных, и мы каждый раз, когда выбираем тот или иной способ отображения, просто говорим, как нам надо эти данные отобразить. Эти данные хранятся в элементе, и можно посмотреть, как D3 красиво делает анимацию, как это все работает качественно, быстро и, главное, что в продакшне нет никаких проблем.
Вот тоже хороший пример, тоже D3:
![](https://habrastorage.org/getpro/habr/post_images/d7d/f10/a81/d7df10a81aa61706542435db5e6cd4e1.png)
Это визуализация температуры в США в разные годы. Видно, что меняются месяцы, зациклено, и можно прям наглядно увидеть, в каком году была засуха, в какой год было много дождей. Во-первых, это реально красиво, на это можно просто долго смотреть, залипать, и это работает, и работает хорошо.
Или же третий пример:
![](https://habrastorage.org/getpro/habr/post_images/46b/522/123/46b522123f63c94297abf23d6e46ffbc.png)
Это «Tokyo Wind Speed». Вы можете прямо сейчас найти и посмотреть в реальном времени — визуализируется скорость ветра в Токио. Очень красиво, каждый раз вы можете посмотреть, где, как, зачем… Очень популярный сервис. У нас Gismeteo не знаю, скоро ли до такого додумается.
Или же вот тоже пример:
![](https://habrastorage.org/getpro/habr/post_images/c82/1f8/8fe/c821f88fe784e852dab621227f2d1c52.png)
Это тоже «New York Times». Визуализация, которая управляется с помощью скролла, т.е. в момент, когда я снимал этот ролик, я скроллил мышкой. Страница статическая, но меняются графики — все наглядно, красиво и быстро. Это способ, который позволяет нам уйти от тупых Excel-табличек, от обычных графиков и сделать какой-то проект, который имеет большой «вау» эффект — тот эффект, когда пользователь смотрит и думает: «Вау, как это круто!».
Что же у нас в России? В России все тоже достаточно хорошо.
Расскажу про несколько своих проектов, и как они собираются. Проект мы начинаем каждый раз примерно вот с такого вот Excel-файла:
![](https://habrastorage.org/getpro/habr/post_images/38d/6dd/1c5/38d6dd1c51ddd5da49052ce89c220b88.png)
Редактор дает какие-то данные, и мы вместе с редактором начинаем решать, что мы хотим с этими данными делать.
Что это за данные? Это численность населения России в разные годы, которая разбита по возрастам, т.е. по оси Y — разные года, по оси Х — возраст. Соответственно, на пересечении — сколько людей того или иного возраста проживало в России в разные годы. В конечном итоге мы хотим получить диаграмму, где по оси Х будет показываться возраст, а по оси Y — население.
![](https://habrastorage.org/getpro/habr/post_images/285/eb3/2d0/285eb32d03739f57edce650c583263c0.png)
В разные цвета будем «красить» мужское и женское население. Уже даже на статическом слайде, не на интерактивном, мы можем разглядеть какую-то историю. Главное, зачем заниматься визуализацией данных — это показать людям историю, которую они не могут увидеть в Excel-таблицах. Здесь мы уже видим, такую штуку как «эхо войны»:
![](https://habrastorage.org/getpro/habr/post_images/9c7/d71/6b1/9c7d716b1c9a5592a7ab9b0401e18749.png)
Видите этот провал? Это дети, которые не родились во время Второй мировой войны, и соответственно, бэби-бум — это дети, которые родились после Второй мировой войны.
Также на этой диаграмме мы пометили возраст трудоспособного населения, т.е. от 16 до 55-60 лет, и посчитали, сколько на одного пенсионера приходится работоспособного населения:
![](https://habrastorage.org/getpro/habr/post_images/26b/8bb/c0d/26b8bbc0d534e95ae3f1f1be54ac737c.png)
Это на самом деле очень важные цифры. Я покажу, зачем они.
![](https://habrastorage.org/getpro/habr/post_images/65b/ac4/a7d/65bac4a7dcac35171e61cc6f30a0a679.png)
Мы видим, что в 1990-ом году приходилось на одного пенсионера три работающих человека. Еще мы добавили таймлайн, который вы можете таскать влево и вправо, чтобы менять год:
![](https://habrastorage.org/getpro/habr/post_images/5f4/da3/313/5f4da3313e25064fa82324ca58a48f71.png)
Работает это так: мы нажимаем на кнопку «Play», и года начинают меняться, D3 анимирует наши графики. Мы видим, как «Эхо войны» ползет, уходит на пенсию, и что у нас сейчас примерно три работающих человека на одного пенсионера. Но что происходит за этим? За этим происходит такая интересная штука: дети, которые родились во время бэби-бума, уходят на пенсию и количество пенсионеров в России резко возрастает, а количество работающих на людей на одного пенсионера резко падает. Фактически у нас такая ситуация в стране, что каждый работающий человек получает зарплату за себя и за одного пенсионера. Вы понимаете, что у нас получается, что в 2025-м году будет меньше двух человек на одного пенсионера, и это будет реальный пенсионный кризис?
Это такая штука, которая показывает нам, как из данных можно получить историю. Для журналистики это очень важно.
А сначала это была просто «каша» из цифр:
![](https://habrastorage.org/getpro/habr/post_images/fab/f90/a97/fabf90a97bd473b69e9bb84459b1c650.png)
Следующий проект. Мы в открытых источниках нашли информацию о депутатах Государственной Думы:
![](https://habrastorage.org/getpro/habr/post_images/eec/35c/1b7/eec35c1b72908886a5dafaf74c672abd.png)
Все депутаты Государственной Думы всех шести созывов. Мы видим имя, фамилию депутата, партийную принадлежность и годы — когда он пришел в Госдуму и когда он из Госдумы ушел.
Что мы можем с этими данными сделать? Мы попробуем их визуализировать. Первым делом мы возьмем первый созыв, «покрасим» всех депутатов в цвет, соответствующий их партийной принадлежности, и построим от меньшей партии к большей:
![](https://habrastorage.org/getpro/habr/post_images/2eb/e74/cc1/2ebe74cc13d81216df20b3173944cbe2.png)
Уже красиво, но что-то не то, истории никакой нет. Давайте дальше. Визуализируем все шесть созывов:
![](https://habrastorage.org/getpro/habr/post_images/648/cb9/b29/648cb9b2967bf6174daec0f4c674331b.png)
Это достаточно просто сделать. Шесть созывов Госдумы. Мы видим, как появилась «Единая Россия», и как КПРФ теряет свои позиции из-за этого.
Тоже очень интересно, но чего-то истории никакой нет. Давайте добавим историю.
Мы знаем, что депутаты переходили от одного созыва в другой. Давайте прочертим линии, если депутат перешел из I-го созыва, например, во II-ой, и получается у нас такая диаграмма, уже красиво:
![](https://habrastorage.org/getpro/habr/post_images/653/6c2/2cd/6536c22cd8d1c2047e5e69e217a544e3.png)
Мы видим, как депутаты переходили из созыва в созыв, что, действительно, каждый созыв — это не какие-то новые депутаты, это старые депутаты из прошлых созывов.
Добавим в эту схему немного интерактива, и получится такая штука, когда мы можем выделять отдельные партии, мы можем тыкать в каждого депутата, и мы можем проследить историю какого-то депутата. Историю КПРФ, допустим, посмотреть, как люди переходили из одной партии в другую. Мы сможем увидеть людей, которые пропускали какие-то созывы, — их линия обходит какой-то конкретный созыв.
![](https://habrastorage.org/getpro/habr/post_images/97c/a78/baf/97ca78bafcf25f5c06f8bea7b44cd6a4.png)
Уже очень интересно, пользователь может зайти на сайт, потыкать… Это работает, это вектор, это svg, это работает хорошо даже на медленных браузерах. На самом деле мы изначально хотели делать png-подложки, отрендерить их на быстром браузере, а потом, когда я увидел, как это хорошо работает в сыром виде в svg, решили оставить так, и я нисколько не жалею.
Какие истории мы можем здесь найти? Здесь мы можем найти депутатов, которые были во всех шести созывах, т.е. людей «с историей».
![](https://habrastorage.org/getpro/habr/post_images/468/542/dbf/468542dbf96713225c974fbc9a40e46c.png)
И мы можем увидеть, что большая часть таких депутатов из КПРФ. КПРФ «держит» своих людей, никуда их не пускает, потому что, наверное, новых нет.
![](https://habrastorage.org/getpro/habr/post_images/303/97b/146/30397b146a7f420552df4a1c23ac50c5.png)
Точно так же мы можем выделить всех депутатов, которые пропускали какие-то созывы. Тоже интересно, но не понятно, зачем.
А вот мой любимый слайд — депутаты, которые меняли свою политическую принадлежность четыре и более раз:
![](https://habrastorage.org/getpro/habr/post_images/8ee/d3a/89c/8eed3a89cf0497b9286f940e15308d22.png)
Это люди, которые находятся в Госдуме не по политическим соображениям, а по каким-то иным. Потому что человек не может четыре раза поменять свои политические убеждения. Хотя, кто знает…
Больше примеров вы можете найти на сайте Майка Бостока (это автор библиотеки D3):
![](https://habrastorage.org/getpro/habr/post_images/6f3/ba7/09c/6f3ba709caf3e8d7d378b2fb15ab1133.png)
Надо сказать, что Майк Босток — большой фанат примеров, он их собирает в огромном количестве, и вы прокручиваете страницу с примерами, а они все не кончаются и не кончаются. Я ни разу не докручивал до «дна», потому что их там столько… И примеры есть на каждый день. Примеры с кодом, и все хорошо написано, т.е. можете найти все, что вам понадобиться.
Итак, немного кода.
![](https://habrastorage.org/getpro/habr/post_images/c4d/748/2a9/c4d7482a9e40ca4cc5dc6f3c50f7c34d.png)
D3 библиотека — как любая другая библиотека для работы с DOM элементами. Начинается все с selector’ов. Селекторы работают d3.select(«div») или d3.selectAll(«div»). Можно выделить либо только первый элемент, либо все. Используется W3C селектор API, либо Sizzle.
Sizzle — это селектор engine, который использует jQuery, т.е. если у вас параллельно подключен jQuery, то селекторы будут работать быстрее, либо вы можете просто подключить Sizzle отдельно.
Точно так же, как в D3, работает Chaining, вы по очереди можете вызывать методы.
![](https://habrastorage.org/getpro/habr/post_images/27a/d6d/d3b/27ad6dd3b985724c6a71d3d15feec2cb.png)
Давайте сделаем какой-то проект, посмотрим, как он делается, от начала до конца. Вернемся к моим любимым депутатам. Почему я так люблю депутатов? Не из-за того, что я какой-то политически активный чувак, просто Госдума в России — это прекрасный источник данных, потому что все данные про депутатов открыты, и мы можем про каждого депутата на сайте Госдумы узнать его имя, партийную принадлежность, зарплату, недвижимость в России, зарплату и недвижимость жены, машины — его и жены… Мы можем про каждого депутата узнать все вдоль и поперек.
Как пример, мы можем узнать количество выступлений депутата, количество законопроектов, который этот депутат привнес в Госдуму. Очень хороший пример:
![](https://habrastorage.org/getpro/habr/post_images/411/24d/49c/41124d49c330a98a1d8efab46d7d876c.png)
Давайте сделаем такое предположение, что чем больше депутат зарабатывает, тем меньше он выступает. И проверим, так ли это, или нет.
![](https://habrastorage.org/getpro/habr/post_images/dad/770/97c/dad77097c425092c2bbb3c33d0e78a8c.png)
Внесем в наш svg таким образом каждого депутата. Каждый депутат будет отображаться с помощью квадратика. Еще покрасим каждого депутата в цвет его партии. Представим, что мы распарсили сайт Госдумы.
![](https://habrastorage.org/getpro/habr/post_images/c85/0d9/c26/c850d9c262fc80f6de0b8ff413b6031f.png)
Сейчас я просто вбил ручками, первых трех депутатов, мы в Json сохранили его имя, его зарплату, количество речей и партийную принадлежность. Пока нам больше ничего не надо.
![](https://habrastorage.org/getpro/habr/post_images/3fb/25a/0d3/3fb25a0d3d6b8eb0cc14c0c8ba8744c3.png)
D3 подключается как обычная библиотека.
![](https://habrastorage.org/getpro/habr/post_images/08d/d32/c64/08dd32c64d0d3f53a9b138f2577bc5fb.png)
Первое, что мы делаем, — нам надо эти данные загрузить. Всем, кто знаком с jQuery, тем все понятно. d3.json('datajson) и callback, который обрабатывает ошибку и возвращает объект Json для работы.
![](https://habrastorage.org/getpro/habr/post_images/92a/10c/bd7/92a10cbd70a6de0e1c69dea629044a05.png)
Следующее, что нам надо создать, — это svg в нашем DOM дереве, мы пишем d3.select('body'), append('svg'), ничего нового.
![](https://habrastorage.org/getpro/habr/post_images/438/ef2/015/438ef2015cbea32cbb8da13bb1da26cb.png)
Точно так же нам нужно задать дополнительные атрибуты ширины и высоты — attr('width'), attr('height'). Все просто, понятно, знакомо.
![](https://habrastorage.org/getpro/habr/post_images/853/a84/706/853a847060309ea0363719887fa116be.png)
И мы видим, что после выполнения этого кода у нас появляется svg элемент с нужными нам атрибутами.
![](https://habrastorage.org/getpro/habr/post_images/59b/7ac/b37/59b7acb37d0db5df79a5fd38e7fbb480.png)
Следующее, что мы делаем, это очень важно. Что такое библиотека D3? Главная задача D3 — это data binding. Это когда вы привязываете данные к вашим DOM элементам. Это тип приложения, называемый data-driven приложение, которым управляют с помощью поступающих данных. Что нам надо сделать? Нам надо наши данные привязать к прямоугольникам. Мы делаем svg.selectAll('rect'), в ответ нам возвращается пустой массив, потому что svg мы только что создали, rect’ов там нет, и мы по отношению к нашему пустому D3 массиву делаем такую странную манипуляцию.
![](https://habrastorage.org/getpro/habr/post_images/280/63a/f41/28063af4136fd3ab5379d467ca73d8c9.png)
Так работает D3, и когда вы начинаете с ним очень долго работать, этот путь становится очевидным. Мы с помощью метода .data присваиваем этому пустому массиву наши данные json.deputates. И получается такая схема:
![](https://habrastorage.org/getpro/habr/post_images/be0/901/141/be090114189dcdf4fda56b2789010e7c.png)
Когда у нас есть готовый проект, у нас каждому DOM элементу соответствует какой-то элемент данных, и они вместе связаны. В нашем проекте, сейчас что есть?
![](https://habrastorage.org/getpro/habr/post_images/9b4/58b/fe4/9b458bfe40e4e4dda57915519c3f59a5.png)
У нас есть данные, но для каждого из них не назначено никакого DOM элемента.
![](https://habrastorage.org/getpro/habr/post_images/5f5/d13/1e5/5f5d131e53168123f63dd0da8ab16f99.png)
И мы делаем следующее.
![](https://habrastorage.org/getpro/habr/post_images/ec1/a08/a26/ec1a08a26c0734b3135710aa93b9da12.png)
Мы используем метод .enter(), он возвращает нам элементы данных, для которых не назначен никакой DOM элемент. Нам возвращаются все данные, у которых нет DOM элемента, и он как бы итерирует по этим элементам. Для них мы вызываем метод append('rect'). Т.е. мы говорим: «Для каждого элемента данных, для которого нет DOM элемента, назначь новый элемент rect». Он, мало того, что его назначит, свяжет их вместе, он его еще и отрисует в нашем DOM дереве.
![](https://habrastorage.org/getpro/habr/post_images/7b0/2f7/056/7b02f70569917b7c830b87b738851f5c.png)
Смотрите, у нас уже внутри svg появилось 3 элемента <rect>. На самом деле, это самая важная часть библиотеки D3.
![](https://habrastorage.org/getpro/habr/post_images/f86/be9/039/f86be90396c5a0a2dab4d6e2ab790c0a.png)
Если вы понимаете эту часть, если вы понимаете, как она работает, все остальное работает очень просто. И точно так же для каждого rect, мы зададим width и height.
В чем смысл этого всего? Зачем мы это все делали?
![](https://habrastorage.org/getpro/habr/post_images/5b7/81b/be3/5b781bbe33e6e71fee34cdbb74275672.png)
Если мы сейчас на это посмотрим, то увидим на экране один маленький черный прямоугольник 10x10 пикселей, который состоит из трех — один на другом. Нам надо изменить у каждого координаты (X, Y), в зависимости от зарплат депутата и в зависимости от количества его речей.
![](https://habrastorage.org/getpro/habr/post_images/6ba/5dd/eec/6ba5ddeecd9177ab2b51726b582864ba.png)
И мы берем метод .attr и передаем первый атрибут 'x', а потом передаем функцию, в которой будет передано два параметра: d — это элемент данных, который соответствует этому DOM элементу, а второй — это итерационный номер. Итерационный номер почти никогда не нужен, но элемент данных нам нужен всегда, и мы возвращаем в этой функции обработанные данные таким образом, которые должны привязаться к нашему атрибуту 'x'.
Есть небольшая напоминалка, как выглядят наши элементы данных. Т.е. к 'x' мы привязываем количество speeches, количество речей.
![](https://habrastorage.org/getpro/habr/post_images/2d4/1b9/293/2d41b92933426fd610a859feda2de812.png)
Точно так же мы поступаем с координатой Y — к ней мы привязываем размер зарплаты нашего депутата и делим ее на 10 000. Я взял 10 тыс. абстрактно, потому что, понимаете, зарплаты у депутатов такие, что ни в один экран никогда не влезут. И вот у нас получаются в браузере три наших волшебных квадратика, которые мы нарисовали с помощью D3. Ништяк, очень красиво.
![](https://habrastorage.org/getpro/habr/post_images/78b/0b9/8f0/78b0b98f0f4d2675f18653a0e46cc27e.png)
Дальше. Естественно, нам это не нравится. А если мы добавим немного цвета? Мы «покрасим» депутатов в цвет их партии, добавим атрибут fill и в функцию на основании того, в какой он партии, вернем тот или иной цвет.
![](https://habrastorage.org/getpro/habr/post_images/764/10b/62b/76410b62bd9437f2bac96ebf9032eb22.png)
Все элементарно. Такая штука у нас получилась.
![](https://habrastorage.org/getpro/habr/post_images/021/993/a43/021993a43926f2e0ed54be6eb2e0d014.png)
Давайте представим, что мы все-таки нормально написали скрипт на Python’е, обошли весь сайт Госдумы, все оттуда сохранили и вот, что получилось:
![](https://habrastorage.org/getpro/habr/post_images/e13/460/456/e13460456a2fb3b23744c6be42fecc45.png)
Это реальная инфографика, основанная на реальных данных, как раз то, что мы с вами делали. И мы видим, что по оси Х у нас зарплата, по оси Y у нас количество выступлений. Эта шкала не честная, мы не видим, но это логарифмическая шкала, здесь от 0 до первого значения так, т.е. она растянута, и мы видим, что зависимость есть. Чем депутат больше зарабатывает, тем меньше у него речей. Т.е. есть, конечно, какие-то странные люди, но большая часть депутатов, которые выступают в Госдуме, зарабатывают не так уж и много, а та часть, которая много зарабатывает, они как раз сидят и молчат. Поймал мыша, ешь не спеша…
Это базовое представление D3, все остальное мелочи.
![](https://habrastorage.org/getpro/habr/post_images/1a4/85c/56b/1a485c56bb2383a73c69a87778038c07.png)
Анимация производится с помощью метода .transition(), т.е. изначально мы назначаем какой-то стиль, вызываем метод .transition() и следующий стиль. Если мы это запустим, то наш body плавно, по дефолту в течение одной секунды покрасится из одного цвета в другой.
![](https://habrastorage.org/getpro/habr/post_images/da5/dd6/16f/da5dd616f69861df7849dadccd3fd6c6.png)
Поддерживаются все традиционные easings. Easings — это то, как ваша анимация будет происходить, т.е. будет она идти линейно, или сначала будет идти с замедлением, потом с ускорением, либо наоборот. Очень советую вам на этот сайт зайти и посмотреть, как работают easings. Easings — это такая штука, что даже самая простая анимация, если вы добавляете в нее какое-то ускорение, замедление, начинает сразу выглядеть богато, красиво и т.д. и т.п.
![](https://habrastorage.org/getpro/habr/post_images/620/caa/0aa/620caa0aa9a46751d3ad495bac496268.png)
Еще в D3 есть большое количество layouts. Layouts — это готовые шаблоны для основных визуализаций данных.
Покажу свои самые любимые. Вот допустим, Streamgraph:
![](https://habrastorage.org/getpro/habr/post_images/3b4/755/fa9/3b4755fa9ac46af4e0e0bf18bc9ac14b.png)
Он показывает в форме потока различные данные, тут они рандомно меняются. Это снятый ролик с браузера, это работает везде и вот так. Т.е. это работает быстро, качественно, и мне очень нравится. Я как человек, который перешел во фронтенд из флеша, который любит вектор, графику, что все это так хорошо работает, мне это очень понравилось.
![](https://habrastorage.org/getpro/habr/post_images/0c4/e97/575/0c4e9757596d881c7aacb1a1c2b1f874.png)
Или, допустим, такой лэйаут, который математически вы запаритесь обсчитывать, как вам надо соединять все потоки, потому что они непросто сужаются, а они соединяются в группки, и вы можете натяжение это контролировать. В D3 это есть по дефолту.
![](https://habrastorage.org/getpro/habr/post_images/4a8/ff2/2db/4a8ff22db8648c3d00b0bd71f662cf19.png)
Или мой любимый Treemap. Посмотрите, как красиво с easing перестраиваются treemap онлайн в прямом режиме.
Итого: быстро, просто и главное, что красиво.
![](https://habrastorage.org/getpro/habr/post_images/63e/3ce/77a/63e3ce77a1a94c66b2fbf079677c4d1a.png)
Контакты
» war_hol
» Блог компании Rambler&Co
Этот доклад — расшифровка одного из лучших выступлений на профессиональной конференции фронтенд-разработчиков FrontendConf.
На сайте конференции вы можете подписаться на список рассылки, в котором мы публикуем подобные расшифровки лучших докладов прошлых лет. Конечно, в этот же список идут новости о подготовке Frontend Conf — если это ваш профиль, то подписаться будет полезно.
Ну и главная новость — мы начали подготовку весеннего фестиваля "Российские интернет-технологии", в который входит восемь конференций, включая FrontendConf.
Комментарии (11)
netcitizen
31.01.2017 16:34+1Прекрасную инфографику от РИА в статье отрейскелили так, что смотреть без слез нельзя.
Mingun
31.01.2017 19:03И даже ссылки не потрудились привести, хотя в тексте постоянно мелькает «посмотрите сюда и увидите это...» Куда сюда-то, блин?
rodial
31.01.2017 19:44Спасибо за статью, на хабре про неё не очень много рассказывают, хотя библиотека очень мощная, имел с ней небольшой опыт.
streetturtle
31.01.2017 19:44Очень интересная статья, data science на JS =). Небольшое замечание, хотелось бы код видеть как код, а не как скришоты.
saluev
01.02.2017 10:16«Стоимость размещения предвыборного агитационного материала» довольно вырвиглазная, как мне кажется. И непонятно, что ей хотели сказать. Что в прайм-тайм дороже? Какая неожиданность.
FreeMind2000
01.02.2017 13:51Отличная статья, все описано идеально.
Жаль только, что не привели примеры с использованием шаблонов обычных Bar/line графиков, чтоб можно было сразу попробовать без заглядывания в документацию.
icWasya
01.02.2017 17:03По поводу карты ветров
https://earth.nullschool.net/#current/wind/surface/level/
Кликабельно, можно покрутить, изменить масштаб, узнать данные в конкретной точке.
John_Minority
А где ящик с усами?
ИМХО, король всех графиков.