Лаборатория данных

    Сложные данные всегда были моей страстью. В 2007 году с подачи Артёма Горбунова я прочитала все книги Тафти и открыла для себя информационный дизайн. Первая визуализация — пассажиропотоки в метро — стала для меня счастливым билетиком в бюро, тогда же появился псевдоним Инфотанька. С тех пор я работала над тигриным календарём и бюрошными инфограммами, мобильным приложением «Веб-наблюдатель» со статистикой нарушений и информативным логотипом, умными маркетинговыми графиками для Зептолаба, интерфейсами Oh my stats!.



    В июне этого года я, наконец, решила посвятить себя тому, что умею делать лучше всего, — визуализации данных. Так появилась лаборатория.

    Я люблю качественную познавательную и развлекательную инфографику. Но визуализация — это ещё и мощный инструмент работы со сложными данными и решения аналитических задач. Крупные компании отслеживают множество бизнес-показателей, но не знают, как извлечь из них пользу. Транспортные аналитики захлёбываются цифрами, но не видят общей картины, проблемных мест и возможных решений. В научных статьях суть исследования теряется за десятками графиков и диаграмм. Эти и другие проблемы решает продуманная визуализация.

    К сожалению, мало кто об этом знает. Зачастую компании, сталкиваясь со сложными данными, не догадываются о существовании «дизайнерского» решения. Поэтому я много времени и сил уделяю просвещению масс: выступаю на конференциях, устраиваю мастер-классы и готовлю практический учебный курс, по четвергам даю советы по визуализации данных на сайте бюро Горбунова, раз в месяц провожу живые советы в «Коворкафе». А вот теперь, благодаря Лёше boomburum и команде Хабра, буду писать о лабораторной работе здесь.

    В лаборатории кипит жизнь: мы создаём необычные и необычайно эффективные способы представления информации для марафонцев, маркетологов, удалённых команд, транспортных аналитиков, честных политиков, велолюбителей и других ребят. В хабраблоге я буду подробно разбирать лабораторные проекты, рассказывать о команде и организации труда, анонсировать выступления на конференциях, живые советы и учебные курсы, выкладывать видеозаписи с прошедших мероприятий.

    Советуйте, спрашивайте, критикуйте! Буду рада обратной связи от уважаемых хабравчан :-)
    Лаборатория данных
    43,00
    Создаём интерактивные визуализации на D3.js
    Поделиться публикацией

    Похожие публикации

    Комментарии 28

      +9
      Круто! Хоть кто-то в дизайне делом занят, а не синие тени рисует.
        +10
        20 минут разглядывал диаграмму пассажиропотока красной ветки московского метро. Потом случайно увидел приписку на полях, что данные на диаграмме вымышленные. :/
          0
          Скажите, пожалуйста, какие данные показывает график на КДПВ? Что мешает сделать ровный нижний край?
            +4
            Если в двух словах: когортный анализ эффективности источника в маркетинговых целях. Вся цветная колбаса — доход, который принёс Яндекс, разноцветные слои — недельные когорты. Каждую неделю доход от Яндекса складывается из доходов по когортам, стартовавшим ранее. Цвет показывеает эффективность (ROI) каждой когорты.

            Можно сделать ровный нижний край, но с ним большие перепады высот выглядят слишком резкими и хуже читаются.
              0
              То есть, положение нижнего края ничего не значит? Просто так кривуля по планшету прошла?
              Ещё у вас в первой отсчёте $2500, а в последней $2230, почему 2500 ниже? А, стоп, надо на ширину смотреть. Но там и снизу вроде горб большой, над цифрами 25%. Объясните, пожалуйста, ничего не понятно на графике.
                +1
                За исключением некоторых аномалий общая форма графика симметрична относительно горизонтальной оси. Так что, скорее всего, не просто так кривуля по планшету прошла, а просто графики разрастаются в обе стороны сразу — вверх и вниз. Для чего — Таня ответила.
                  +5
                  Это так называемый Streamgraph, который является разновидностью stacked area graph (это которые «диаграммы с областями с накоплением» в Excel), точнее, наоборот, stacked area graph — это частный случай Streamgraph.

                  Положение нижнего края выбирается специальным образом, чтобы улучшить читаемость графика, в данном случае использовался симметричный вариант, который сглаживает пики графа. Понятное дело, если бы данные были изначально пологими, как слоёный пирог, это не имело бы смысла. Для других случаев могут использоваться иные базовые уровни, если интересна математика и хотите больше подробностей, почитайте оригинальную статью изобретателя этого вида графика: Stacked Graphs – Geometry & Aesthetics.
                  +1
                  А как Вы такую красоту сделали?
              +1
              Интересно будет прочесть про работу в Лаборатории над большими массивами данных: подробненько от гипотез и сбора данных, до обработки и визуализации. И буду рад регулярному появлению на Хабре Infotanka, с почином!
                0
                Здорово! А что там у вас для марафонцев?
                  0
                  Как раз после доклада про марафон на 404fest решил пригласить её к нам на сайт :) Надеюсь, Татьяна расскажет об этом более подробно.
                    0
                    Визуализация результатов Московского марафона: moscowmarathon.datalaboratory.ru Подробности в следующих постах :-)
                      0
                      Супер, спасибо! Ещё было здорово иметь возможность сравнить себя с другими участниками.
                        0
                        Это в будущих планах.
                    0
                    Как вы совмещаете визуализацию данных и работу с этими данными? Cамый интуитивный способ модификации отображаемых на графике данных непосредственно во время их просмотра, но графики абсолютно не приспособлены к подобным WYSIWYG модификациям, приходится искать источник данных и править там. Есть решение?
                      +2
                      Есть решения, вот, например, я писал про dc.js. Raphaël.js, D3.js и другие инструменты помогают делать именно интерактивную инфографику, так что возможность динамически менять картинку есть, но в общем случае «дизайн» всё равно нужно создавать под конкретные данные.
                        +1
                        Как верно заметил KoGor, дизайн визуализации разрабатывается под конкретные данные и включает в себя интерфейс работы с ними. В качестве инструментов используем джаваскриптовые библиотеки, в основном D3.
                          0
                          Какие есть визуальные среды для работы, например, с D3.JS? Не только ручками же все прописывается?
                            0
                            Ручками.
                              0
                              Учитывая возможности современных текстовых редакторов (например, Sublime Text), всё не так уж и плохо, даже несмотря на то, что плагинов именно под D3.js на сегодняшний день нет. А вообще есть всевозможные надстройки над D3.js, вот, например, сервис в стиле drag'n'drop: Raw, правда возможности его пока весьма скромные.
                          +1
                          Таня, а вы интересуетесь визуализацией математики (как в пакетах типа Маткада) или только визуализацией данных?
                            +1
                            Звучит интересно, но ничего подобного мы пока не делали. Расскажешь подробнее?
                              0
                              MathCAD, Maple, Wolfram Mathematica — пакеты с многолетней историей и достичь уровня их возможностей при демонстрации результатов через интернет — задача более чем грандиозная. Пока что, кроме MathBox.js, вроде как, никто и не пытался сделать что-то подобное. С данными в этом плане ситуация много лучше.
                              +2
                              image
                              Интересная визуализация текстовых данных )
                                +1
                                Что поделать, если пинтерест не желает нормально отображать подписи на русском :-)
                                0
                                Очень крутой стартап. Желаю плотного потока заказчиков :)
                                  –2
                                  Ммм… Я один ничего не понимаю на графике из шапки топика?

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.