Турнирная таблица на SVG

[DerSpinner]

А можно расшифровку таблицу (как её читать?), пожалуйста. А то вроде понял, что все это означает, но ощущение — что что-то не понял)
Спасибо_

[whiskey]

Места по турам. :) Например, выделенные Крылья Советов в первом туре были на четвертом месте, во втором — на втором, в третьем туре — опять на четвертом, в четвертом туре — опять на втором и так далее, до десятого места после 30го тура.

Он, конечно, больше не информативен, а нагляден.

[whiskey]

Тур — это вертикальная линия. Номер тура сверху. Положение команды в определенном туре — это позиция соответствующей линии на вертикали с номером тура. По итогам пятого тура КС были третьими — их линия третья сверху на вертикали пятого тура.

Это выглядит несколько путано, но графически дает неплохое представление о турнирном пути команды. Если выделить, например, Рубин, то видно, что у него было несколько скачков в начале чемпионата, но потом он стабильно шел на первом месте. В то же время борьба за четвертое место шла почти до самого конца чемпионата.

[whiskey]

Да.

[whiskey]

Ага, я думал об этом. С одной стороны, добавить их проще простого — дополнительные текстовые метки в цикле «Create text labels — teams», а с другой стороны, боюсь перегружать график. Он больше для чисто визуального восприятия движения команд по турниру.

В любом случае, код открыт, лицензия свободная — если нужно, меняйте и используйте. :)

[whiskey]

Даже как-то не задумывался. Но вряд ли — читать что-то по технологии, ориентированной на одно семейство браузеров (пусть даже доминирующее), мне попросту лень. Я не вэб-разработчик, это больше как мини-развлечение было. :)

[Aux]

Развлечением пусть станет XSLT фильтр, который преобразует SVG в VML — там всё довольно просто, плюс есть готовые реализации. В конце концов VML — это папа SVG.

[hohams]

было бы классно это все визуализировать, и добавит некторые параметры столбцы: кол-во голов, очков и т.п.

[whiskey]

Это сложно даже не в техническом плане, а с точки зрения юзабилити — как добавить все это и не перегрузить график.

[hohams]

я как раз имел ввиду, что сделать не график, а визуальный ряд

[Inquirer]

Пожалуй, это можно сделать в виде всплывающих по удержанию фокуса подсказках.

[whiskey]

Кстати, насчет допинформации на графиках — на самом деле, было бы интересно добавить в график ключевые события типа тренерских отставок, переходов игроков и каких-либо скандалов. :)

[infom]

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

[whiskey]

Можно, но есть один минус: например, Химки в 2009 году набрали ничтожно мало очков, в то время, как наверху шла довольно плотная борьба. В итоге сверху граф превратился бы в месиво.

Хотя попробовать можно, конечно. :)

[infom]

Если в реальности у команд было месиво, то график это должен как-то показывать это ведь отражает действительность, попробуйте обязательно.

[tosick]

Посмотрите в сторону raphaeljs.com. Возможно пригодится.

[piumosso]

Пробовал использовать — работает хорошо (в опере глючило, но причина так и не установлено).
Посмотрите тут: spokoino.ru/filter Если прокрутить до конца вниз произойдёт дозагрузка контента и логотип анимируется)

[medvedi]

автор забыл добавить: «сине-бело-голубые хэй хэй» :)

[Shvonder]

>> табличка для браузера — значит, что-нибудь из вэб-технологий;
Хороший вывод :)

[Mew]

Вам нехватает слева от участников квадратика с их цветом, а то неясно в конечно итоге кто же там лидирует.

[whiskey]

Тут я сделал несколько иначе — раскрасил в цвета названия команд.

[infom]

Начальное расположение команд должно соответствовать итогам прошлого сезона, а то такая чехарда в первых турах.

[whiskey]

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

[DnV]

Ещё хорошо бы подобрать хороший шрифт без засечек.

[ShpuntiK]

Достаточно просто и удобно, спасибо))

[loader]

если ваш проект не коммерческий я бы воспользовался highcharts.com/ и не исключал IE, а так интересно было почитать про работу с svg

[whiskey]

Это вообще не проект — так, в рамках хобби. :) Но за ссылку спасибо, если вдруг где понадобится — учту.

[pxx]

С точки зрения практики использования SVG — отлично. Но такое месиво разноцветных колбас читать просто невозможно.
Почитайте Артема Горбунова, он один из лучших дизайнеров инфографики на постсоветском пространстве и дает много дельных советов на вопросы читателей. Более-менее по вашей теме: тыц, тыц.
На вскидку:
— убрать жир с линий.
— добавить чекбоксы, которые включают-выключают отображение определенных линий. Сомневаюсь, что кому-то необходимо видеть их сразу. Скорее всего в область интересов входит 2-3-5 команд.
— подпишите оси, в первую очередь вертикальную. Я не футбольный болельщик и я совсем не понимаю этот график, но думаю что и для тех, кто в теме тут не все доступно сразу.

[whiskey]

Спасибо большое за ссылку.

Насчет мессива — согласен, особенно в первых турах (в начале графика). Кое-что удается исправить сортировкой команд по позиции в первом туре, но не всегда это работает, так что я по-прежнему в размышлениях. :)

По поводу остальных изменений — это график больше для меня самого и еще какого-то круга людей, которые знают, о чем идет речь. Я попробую и эти вещи, и некоторые другие, понравится — оставлю. А для того, чтоб остальные тоже тоже могли свободно пробовать и при желании использовать — выложен исходный код. :)