Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 35
Шикарная задумка! Прямо как назад в будущее. Новые технологии для просмотра старых схем. С удовольствием поигрался с временной шкалой.
Я джва года думал о создании интерактивной анимированной карты московского метро, которая бы показавала, как оно росло. Спасибо, что исполнили мою мечту:)
Есть маленький баг. На хроме.
Если взять верхний ползунок опустить его вниз. ТО он окажется под ползунком, отвечающим за дату старта и его двигать нельзя.
Если взять верхний ползунок опустить его вниз. ТО он окажется под ползунком, отвечающим за дату старта и его двигать нельзя.
Дело не в хроме, но оснований спорить с вами у меня нет, как, к сожалению, и решения.
Тешит, что создатели jquery слайдера и популярного noUiSlider выхода из ситуации тоже не нашли.
Как в модели слоёв определить, какой ползунок вы ходите потянуть, если тянуть можно оба?
Тешит, что создатели jquery слайдера и популярного noUiSlider выхода из ситуации тоже не нашли.
Как в модели слоёв определить, какой ползунок вы ходите потянуть, если тянуть можно оба?
Не давать опускать верхний ползунок ниже нижнего.
Формально и так не даём; но думаю, вы имели в виду небольшое смещение каждого ползунка.
Так, пожалуй, и правда можно. Но нужно будет добавить каждому ещё один элемент.
Так, пожалуй, и правда можно. Но нужно будет добавить каждому ещё один элемент.
Я бы изобразил ползунки по другому вообще, чтобы избежать этого. Вот как-то так: docs.google.com/drawings/d/1Wp8z9Ao8MXxd4-tIErp6d-PXztKrdefpRwuIkfSNpzo/edit?usp=sharing (UX-дизайнер из меня аховый, но идея такова). Тогда они никогда не сольются, хотя интервал между ними может быть нулевой, если юзеру это надо. Идея @Aingix тоже недурна, можно совместить.
Сделать выносные элементы у контролов слайдера — у верхнего «гребешок» вверх, у нижнего — вниз. С одной стороны, это уменьшит точность слайдера — но и так огромные контролы делают точность маленькой. Можно пойти дальше и превратить их из квадратов, где точное значение где-то посередине — в «клюв» (КПДВ), где только кончик указывает на точное значение. Таким образом, они не всегда будут перекрывать друг друга на 100%.
Альтернативно — можно выставлять z-index больший у того контрола, что перемещался последним.
Перетаскивание перестает работать, если случайно зажал кнопку мыши, когда курсор был на тексте — от этого легко избавиться. Контрол зума расположен не в самом логичном месте. Если вынести его слева от карты, переместить шаринг вниз к информации, а переключатель типов данных сделать переключателем (для этого достаточно добавить стрелочку, которая покажет, что там выпдайка, и показывать две разные иконки в случае «времени постройки» и «глубины заложения»), то этого будет достаточно для того, чтобы появилась внутрення логика.
Ну и сразу, как улучшить слайдер дальше:
1) Отметить на нем год,
2) Дать возможность уменьшать-увеличивать дату не неточным дрег-н-дропом мыши, а стрелочками «след.дата» — «пред.дата». Как они должны выглядеть, надо, окнечно, подумать,
3) Цветным маркером отметить даты ввода в строй линий этого цвета
4) Похожим маркером отметить дату «соединения» линии для тех случаев, когда она строилась «раздельно»
5) Маркерами меньшего приоритета можно отметить даты ввода в строй и количество станций, при этом делать их светлее (неактивнее), если они выпадают за пределы текущего значения,
6) Не хватает проектных и строящихся линий и станций — в любом случае, при первой загрузке лучше выставить верхнюю дату не 01.01.2016, а текущую.
7) Не учтены переименования станций, что тоже весьма интересная информация, которую хорошо бы как-то визуализировать,
8) Названия веток и их изменения?
9) Возможно, стоит выделять добавленное на последнем перемещении слайдера,
10) Еще, возможно, интереснее, чем вообще убирать линии и станции с экрана, было бы их «засветлять».
11) Можно увеличить количество информации по каждой станции :)
12) На слайдере глубины заложения (странно, что искусственные объекты заложены, а грунтовые воды залегают :) тоже не хватает ориентиров — промежуточных рисок, отметок станций, которые могут сформировать мини-карту распределения глубин.
13) Ну и для тех казуалов, кто воспринимает информацию в «футбольных стадионах», можно около слайдера схематично набросать что-то высотой в 80 метров (или, лучше, что умещается в выбранный диапазон — считать в «попугаях» :)
14) Для карты залегания дополнительная инфа — наличие рек, как минимум (вроде на лебедевской карте должна быть).
Ну т.е. слайдер двигать-то интересно, но даже в интерактивной графике всегда хочется, чтобы несколько слоев информации всегда было видно на экране.
Из этого вытекает необходимость в непрерывном, а не дискретном слайдере — точнее говоря, он должен быть непрерывным в плане того, что расстояния между датами должны быть пропорциональны количествам дней между ними, а вот «переключать» контрол можно только между датами изменений в метро (т.е. дискретно).
Все равно, хорошая работа, сразу приходят в голову идеи посмотреть на фоне роста метро, как росла Москва за это время и популяция в некоторых районах, как появлялись культурные и т.п. объекты, обуславливающие необходимость новых станций метро, возможно, сравнить с изменением сети наземного общественного транспорта.
Альтернативно — можно выставлять z-index больший у того контрола, что перемещался последним.
Перетаскивание перестает работать, если случайно зажал кнопку мыши, когда курсор был на тексте — от этого легко избавиться. Контрол зума расположен не в самом логичном месте. Если вынести его слева от карты, переместить шаринг вниз к информации, а переключатель типов данных сделать переключателем (для этого достаточно добавить стрелочку, которая покажет, что там выпдайка, и показывать две разные иконки в случае «времени постройки» и «глубины заложения»), то этого будет достаточно для того, чтобы появилась внутрення логика.
Ну и сразу, как улучшить слайдер дальше:
1) Отметить на нем год,
2) Дать возможность уменьшать-увеличивать дату не неточным дрег-н-дропом мыши, а стрелочками «след.дата» — «пред.дата». Как они должны выглядеть, надо, окнечно, подумать,
3) Цветным маркером отметить даты ввода в строй линий этого цвета
4) Похожим маркером отметить дату «соединения» линии для тех случаев, когда она строилась «раздельно»
5) Маркерами меньшего приоритета можно отметить даты ввода в строй и количество станций, при этом делать их светлее (неактивнее), если они выпадают за пределы текущего значения,
6) Не хватает проектных и строящихся линий и станций — в любом случае, при первой загрузке лучше выставить верхнюю дату не 01.01.2016, а текущую.
7) Не учтены переименования станций, что тоже весьма интересная информация, которую хорошо бы как-то визуализировать,
8) Названия веток и их изменения?
9) Возможно, стоит выделять добавленное на последнем перемещении слайдера,
10) Еще, возможно, интереснее, чем вообще убирать линии и станции с экрана, было бы их «засветлять».
11) Можно увеличить количество информации по каждой станции :)
12) На слайдере глубины заложения (странно, что искусственные объекты заложены, а грунтовые воды залегают :) тоже не хватает ориентиров — промежуточных рисок, отметок станций, которые могут сформировать мини-карту распределения глубин.
13) Ну и для тех казуалов, кто воспринимает информацию в «футбольных стадионах», можно около слайдера схематично набросать что-то высотой в 80 метров (или, лучше, что умещается в выбранный диапазон — считать в «попугаях» :)
14) Для карты залегания дополнительная инфа — наличие рек, как минимум (вроде на лебедевской карте должна быть).
Ну т.е. слайдер двигать-то интересно, но даже в интерактивной графике всегда хочется, чтобы несколько слоев информации всегда было видно на экране.
Из этого вытекает необходимость в непрерывном, а не дискретном слайдере — точнее говоря, он должен быть непрерывным в плане того, что расстояния между датами должны быть пропорциональны количествам дней между ними, а вот «переключать» контрол можно только между датами изменений в метро (т.е. дискретно).
Все равно, хорошая работа, сразу приходят в голову идеи посмотреть на фоне роста метро, как росла Москва за это время и популяция в некоторых районах, как появлялись культурные и т.п. объекты, обуславливающие необходимость новых станций метро, возможно, сравнить с изменением сети наземного общественного транспорта.
Ого! Масштабный комментарий, спасибо за него :)
Думаю, большую часть пунктов я сниму, напомнив что это просто доказательство работоспособности :)
Для меня и этот результат оказался непростым — ведь столько ещё можно доделать и поправить, а «заказчика» и дедлайна нет.
Прокомментирую пару пунктов:
2. Проект подразумевает возможность загружать больше выборок. Например, помимо глубины заложения, можно добавить статистику инцидентов, чтобы посмотреть наиболее проблемные станции и участки. То есть над каждым конкретным случаем нужно будет думать о «шаге» для стрелки
3, 4, 5, 8, 9, 10, 13, 14. Всё сводится к дизайну. Я бы, например, был рад реализации в привязке к наземной карте (парки, достопримечательности и т.д.), — но ведь это уже просто огромный объём работ.
6, 7. Дата выставляется из соображений экстремумных значений. Я поленился добавлять дизайн и функционал для строящихся и ремонтируемых станций. Тот же «Технопарк» у меня предварительно открыт :)
Думаю, большую часть пунктов я сниму, напомнив что это просто доказательство работоспособности :)
Для меня и этот результат оказался непростым — ведь столько ещё можно доделать и поправить, а «заказчика» и дедлайна нет.
Прокомментирую пару пунктов:
2. Проект подразумевает возможность загружать больше выборок. Например, помимо глубины заложения, можно добавить статистику инцидентов, чтобы посмотреть наиболее проблемные станции и участки. То есть над каждым конкретным случаем нужно будет думать о «шаге» для стрелки
3, 4, 5, 8, 9, 10, 13, 14. Всё сводится к дизайну. Я бы, например, был рад реализации в привязке к наземной карте (парки, достопримечательности и т.д.), — но ведь это уже просто огромный объём работ.
6, 7. Дата выставляется из соображений экстремумных значений. Я поленился добавлять дизайн и функционал для строящихся и ремонтируемых станций. Тот же «Технопарк» у меня предварительно открыт :)
На гитхаб планируете? :)
Не планировал. Из-за жесткой привязки данных не представляю, как его кто-то сможет использовать :(
Думаю, такие вещи проще писать самому, чем разбираться в чудом «полёте мысли» и модифицировать под свои нужды.
P.S. Возможно, окажется полезным «вектор» — координаты и кривые. Хотя хема в pdf и в свободном доступе, разобрать её на составляющие не получится.
Думаю, такие вещи проще писать самому, чем разбираться в чудом «полёте мысли» и модифицировать под свои нужды.
P.S. Возможно, окажется полезным «вектор» — координаты и кривые. Хотя хема в pdf и в свободном доступе, разобрать её на составляющие не получится.
Жаль, что доделывать не планируете — очень уж наглядно получилось.
На всякий случай напишу одно замечание по схеме — вдруг исправите.
С момента ввода станции Курская-радиальная и до ввода станций Арбатская, Смоленская и Киевская глубокого залегания поезда ходили от Киевской-мелкой до Курской и дальше, то есть использовался (существующий до сих пор) перегон между Александровским садом и Площадью Революции.
На всякий случай напишу одно замечание по схеме — вдруг исправите.
С момента ввода станции Курская-радиальная и до ввода станций Арбатская, Смоленская и Киевская глубокого залегания поезда ходили от Киевской-мелкой до Курской и дальше, то есть использовался (существующий до сих пор) перегон между Александровским садом и Площадью Революции.
Спасибо, интересный факт.
Кто знает, может пройдёт немного времени и действительно приведу код в порядок и выложу на гитхаб, чтобы коллективно поддерживать. В конце концов, я и логику на сервер переводить не хотел, а всё же нашёл время.
Сейчас останавливает то же отсутствие времени, а так же гарантий, что присоединятся энтузиасты и перевод не будет впустую. Второй волны интереса добиться будет в разы труднее.
Кто знает, может пройдёт немного времени и действительно приведу код в порядок и выложу на гитхаб, чтобы коллективно поддерживать. В конце концов, я и логику на сервер переводить не хотел, а всё же нашёл время.
Сейчас останавливает то же отсутствие времени, а так же гарантий, что присоединятся энтузиасты и перевод не будет впустую. Второй волны интереса добиться будет в разы труднее.
Очень хорошая работа!
пользователям мобильных устройств ребята предпочитают показывать ссылки на приложения.Приложение может работать в оффлайне.
Задумка неплохая, но это действительно proof-of-concept. Схема метро менялась довольно сильно со временем. Не просто линии достраивались, но происходили разные другие изменения. Например в 43м году схема показывает отдельно живущую станцию «Автозавдская» что вряд ли соотвествует действительности: вряд ли её открыли как «действующий музей»…
И еще со станцией Тверская какое-то безобразие.
Открыта 20 июля 1979 года на действующем перегоне «Маяковская» — «Театральная».
Это один из самых старых перегонов Московского метро, открыт 11 сентября 1938 года! А на схеме появляется только в 1979 году, на 40 лет позже! Нужно сделать так же как со станцией Спартак. А так все очень круто. Если все эти исторические недочеты убрать (мне кажется их там намного больше чем 2) — то будет шикарнейшая схема) Спасибо
Открыта 20 июля 1979 года на действующем перегоне «Маяковская» — «Театральная».
Это один из самых старых перегонов Московского метро, открыт 11 сентября 1938 года! А на схеме появляется только в 1979 году, на 40 лет позже! Нужно сделать так же как со станцией Спартак. А так все очень круто. Если все эти исторические недочеты убрать (мне кажется их там намного больше чем 2) — то будет шикарнейшая схема) Спасибо
Отличный проект.
Некоторые пожелания (помимо тех, что уже упомянуты в комментариях):
1) Добавить изменения названий станций.
2) Приблизить внешний вид к схеме, которую брали как пример
3) Взять генплан строительства метро до 2020 года (гуглится на раз-два), и добавить его в шкалу
4) Ползунок логичнее сделать с отметками только на реальных изменениях (сейчас там просто календарь)
5) Потом уже можно и другие города добавить)
Некоторые пожелания (помимо тех, что уже упомянуты в комментариях):
1) Добавить изменения названий станций.
2) Приблизить внешний вид к схеме, которую брали как пример
3) Взять генплан строительства метро до 2020 года (гуглится на раз-два), и добавить его в шкалу
4) Ползунок логичнее сделать с отметками только на реальных изменениях (сейчас там просто календарь)
5) Потом уже можно и другие города добавить)
Спасибо.
Не хочу вас расстраивать, но шансов, что буду реализовывать пожелания из комментариев, очень мало.
В свободное время уже работаю над своим «долгостроем», если доделаю — будет на порядок больше пользы.
Плюс, по моему мнению, такими вещами должен всё же департамент транспорта заниматься или московский метрополитен. Поддерживать в актуальном состоянии схему «извне» очень сложно.
Ребята планируют очередное повышение цен и раздают бесплатные газеты, в то время как сайтом пользоваться откровенно сложно, а существующая схема на флеше. И ладно бы умела что-то, но нет, просто ссылки :)
Не хочу вас расстраивать, но шансов, что буду реализовывать пожелания из комментариев, очень мало.
В свободное время уже работаю над своим «долгостроем», если доделаю — будет на порядок больше пользы.
Плюс, по моему мнению, такими вещами должен всё же департамент транспорта заниматься или московский метрополитен. Поддерживать в актуальном состоянии схему «извне» очень сложно.
Ребята планируют очередное повышение цен и раздают бесплатные газеты, в то время как сайтом пользоваться откровенно сложно, а существующая схема на флеше. И ладно бы умела что-то, но нет, просто ссылки :)
github? :)
Ответил выше :)
Судя по статье — это, что-то крутое, вот только ссылка, к сожалению, уже не работает.
Это где-нибудь сейчас работает?
Это где-нибудь сейчас работает?
Уже нет, извините. Актуализация требовала ручной работы, а сам сайт посещали пара человек в день. Если вам больше, чем «поиграться», можете посмотреть какие-то моменты здесь.
.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создаём интерактивную векторную схему московского метро