Дизайнерский dashboard

Опубликовано Опубликовано в рубрике Интересное, Основная

Всем привет! Вы наверное думали, ну вот, обещал писать «еще один блог» и пропал.
А я не пропал. Точнее пропал, но в другом смысле 🙂

Копался я тут «недавно» в Pinterest и увидел прекрасное:

Вот тут я и пропал (тот самый другой смысл). Вот захотелось мне сделать такую же красоту в R. Ну, тогда у меня в руках будет не только красота, но и полная функциональность R, то есть я смогу не только «котиков в Pinterest выкладывать», но и сделать совершенно красивый, рабочий Dashbord. А самое главное — появится МОРЕ ОПЫТА !!!
Сказано сделано. Начал делать. И вот поэтому и пропал на три недели (или около того).
По этой картинке сделал поиск, и выяснил, что это разработка Erik K (Сооснователь и креативный директор Truth Labs in Chicago).
На Медиум натолкнулся на интересную статью, которую попутно прочитал: Designing Data-Driven Interfaces
Но самое главное — на этой странице я нашел полный вид этого отчета… Пусть в плохоньком разрешении, но общий вид представить можно (левая картинка):

Ну, заодно можно посмотреть другие примеры этого стиля.

В процессе разработки я столкнулся со многими сложностями, которые сейчас можно назвать «выученными уроками»:

  • ggplot2 периодически ужасно бьет разметку shinydashboard. Пришлось делать через *.png
  • Классика — прямые линии в полярных координатах.
  • Очередное свежее погружение в ggplot2. Иногда думаешь, что все знаешь, все умеешь — но на реальной нестандартной задаче все как заново….
  • Ладно, хватит воды, показываю что получилось:

    В живую можно посмотреть тут: https://aarrow.shinyapps.io/CoolDashboard

    Зачем-то использовал адаптивный(?-fluid) дизайн. Делался под конкретный монитор. Поэтому — на desktop скорее всего будет ок, на iPad — более-менее (можно сделать вообще супер — но уже тошнит от этого этюда). На iPhone — верстку рвет не по детски, поэтому дорабатывать/перерабатывать под него при необходимости немало надо будет.

    PS. Постойте, а где же код ? Ладно, ладно, договорились. Пять комментариев с просьбой дать кода под этим постом — выложу код…

    UPDATED. Ссылку на код искать тут: http://ru-datascience.ru/2016/01/12/dizajnerskij-dashboard-ishodnyj-kod/

    Дизайнерский dashboard: 14 комментариев

    1. Красиво!
      Даже не ожидал, что на shiny можно так красиво оформить,
      наверное в css еще залезали?
      Я-то в основном по-топорнее делаю,
      от кода мы не отказался, взглянуть.

      1. Ну, как будто в css не лазил. Сам не думал что получится… Просто брал и решал маленькими кусочками. Больше всего опыта получил (читай «затрахался») с тем, что иной раз очень неожиданно и неприятно бьет разметку… Ну и есть куда расти, потому что это совсем не fluid-дизайн

      1. Данные от балды. Цель была сделать похоже картинку… Судя по названияем в оригинале-это описывает какую-то ситуацию в больнице

    Добавить комментарий