Всем привет! Вы наверное думали, ну вот, обещал писать «еще один блог» и пропал.
А я не пропал. Точнее пропал, но в другом смысле 🙂
Копался я тут «недавно» в Pinterest и увидел прекрасное:
Вот тут я и пропал (тот самый другой смысл). Вот захотелось мне сделать такую же красоту в R. Ну, тогда у меня в руках будет не только красота, но и полная функциональность R, то есть я смогу не только «котиков в Pinterest выкладывать», но и сделать совершенно красивый, рабочий Dashbord. А самое главное — появится МОРЕ ОПЫТА !!!
Сказано сделано. Начал делать. И вот поэтому и пропал на три недели (или около того).
По этой картинке сделал поиск, и выяснил, что это разработка Erik K (Сооснователь и креативный директор Truth Labs in Chicago).
На Медиум натолкнулся на интересную статью, которую попутно прочитал: Designing Data-Driven Interfaces
Но самое главное — на этой странице я нашел полный вид этого отчета… Пусть в плохоньком разрешении, но общий вид представить можно (левая картинка):
Ну, заодно можно посмотреть другие примеры этого стиля.
В процессе разработки я столкнулся со многими сложностями, которые сейчас можно назвать «выученными уроками»:
Ладно, хватит воды, показываю что получилось:
В живую можно посмотреть тут: 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 🙂
з.ы. Вот похожий вариант — http://alstatr.blogspot.com/2015/02/r-how-to-layout-and-design-infographic.html
Первый посчитан 🙂
Красиво!
Даже не ожидал, что на shiny можно так красиво оформить,
наверное в css еще залезали?
Я-то в основном по-топорнее делаю,
от кода мы не отказался, взглянуть.
Ну, как будто в css не лазил. Сам не думал что получится… Просто брал и решал маленькими кусочками. Больше всего опыта получил (читай «затрахался») с тем, что иной раз очень неожиданно и неприятно бьет разметку… Ну и есть куда расти, потому что это совсем не fluid-дизайн
И я хочу код посмотреть! Очень красиво!
Итак, уже трое… Ещё пару желающих-и код будет доступен!!!
Поддерживаю!!!
Четвёртый!
Хочу так же, дайте код поглядеть!
Пятый!!! Ок, выложу код скоро 🙂
Откуда данные и что они описывают ?
Данные от балды. Цель была сделать похоже картинку… Судя по названияем в оригинале-это описывает какую-то ситуацию в больнице