antoniokov Dec 27 2016 at 12:44

Интерактивная таблица результатов

2 min

16K

JavaScript*Open source*Data visualization*Website development*

From sandbox

+27

Comments 25

Smi1e Dec 27 2016 at 13:29

Мне нравится очень информативная графика изменения позиций пилотов на протяжении гонки в той же F1. Легко проследить динамику конкретного пилота.

maxzuber Dec 28 2016 at 17:35

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

antoniokov Dec 28 2016 at 22:49

Чехарды в начале меньше, если расставить команды по результатам прошлого сезона. Но всё равно «обгонов» будет в разы больше, чем в любой формульной гонке.

Smi1e Dec 29 2016 at 15:05

Можно сделать побольше горизонтальный масштаб (расстояние между турами) и читаемость значительно повысится.
Да и брать за отсечку не обязательно начало чемпионата. Расставить можно сразу по результатам 1-го тура, там даже будет правильнее.

Writerim Dec 27 2016 at 13:51

Идея хорошая, но я запомнил положение участников, потом они «сбрасываются» вниз и… я не помню кто куда переместился. Сделать бы изменения только тех позиций, которые реально менялись.

antoniokov Dec 28 2016 at 22:51

Не совсем понял. Можете привести пример или прикрепить гифку, пожалуйста?
Сортировка в таблицах устойчивая, команды перемещаются только при изменении позиции.

m_z Dec 27 2016 at 15:03

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

antoniokov Dec 28 2016 at 22:55

Добавил MIT

ConceptDesigner Dec 28 2016 at 14:53

Идея хорошая. На мой взгляд, интерактивность должна подразумевать большую вовлеченность пользователя в процесс взаимодействия. Еще было бы интересно, если бы таблица позволяла делать прогноз на следующий тур.

UFO landed and left these words here

Aw55 Dec 28 2016 at 14:53

Такие таблицы очень легко делаются с помощью d3.js, если вдруг кому понадобится.

antoniokov Dec 28 2016 at 22:56

Вполне вероятно, что и я перепишу анимацию на d3.js вместо React Flip Move.

UFO landed and left these words here

MOTORIST Dec 28 2016 at 14:53

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

antoniokov Dec 28 2016 at 22:58

Можно сфокусироваться на одной или нескольких командах через параметр data-focused-items.

maxzuber Dec 28 2016 at 14:54

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

В самой анимации смущает изменение номера места до перемещения. Может, лучше разбить на три этапа? Начисление очков, сортировка, обновление номера.

antoniokov Dec 28 2016 at 23:03

Всё так. Скорее всего, для начала добавлю параметр data-tie-breaking с заготовками для дополнительных показателей количество побед, забитые голы и т.п. Если будет не хватать, добавлю опцию конфигурационного JSON-файла.

Я пробовал сделать обновление в несколько этапов — интуитивно казалось, что так хуже.

1ax Jan 3 2017 at 12:36

Неплохо было бы разделать css на тот что относится именно к таблице и общий, относящийся к странице. Потому что если подключить все по инструкции в существующий сайт будет конфликт определения заголовков h2 и некоторых других общеупотребимых тегов.
Так же идет ссылка на локально расположенные шрифты, про которых в инструкции ничего нет, что выдает ошибку валидатора.

antoniokov Jan 3 2017 at 12:42

Это очень хорошие замечания, спасибо.

Мы сделали ошибку, не разделив скрипт и демонстрационный сайт, из-за чего вылезли проблемы с CSS и шрифтами. Сайт в новогоднюю ночь сел на Jekyll и переехал в отдельный репозиторий: https://github.com/TargetProcess/replayTable.com. В ближайшее время вычистим лишнее из файлов самого скрипта — и всё станет хорошо.

Shvedov Jan 4 2017 at 05:28

Такая задача как раз для OLAP кубов… Вот либа есть для отображения на js

1ax Jan 4 2017 at 10:55

сформировал вот такой файлик исходных данных — чо-то не работает.

2 Дивизион Центр

Date,HomeTeam,FTHG,AwayTeam,FTAG
20.07.2016, Арсенал-2,0, Зенит Пз,0
20.07.2016, Торпедо М,2, Чертаново,1
20.07.2016, Авангард К,2, Энергомаш,0
20.07.2016, Сатурн,1, Металлург Лп,1
20.07.2016, Орёл,1, Калуга,0
20.07.2016, Витязь,1, Рязань,0
28.07.2016, Торпедо М,2, Витязь,1
28.07.2016, Зенит Пз,0, Орёл,0
28.07.2016, Металлург Лп,2, Рязань,2
28.07.2016, Сатурн,1, Авангард К,1
28.07.2016, Энергомаш,1, Динамо Бр,0
29.07.2016, Калуга,2, Чертаново,0
04.08.2016, Арсенал-2,0, Энергомаш,6
04.08.2016, Чертаново,1, Зенит Пз,1
04.08.2016, Авангард К,1, Металлург Лп,0
04.08.2016, Динамо Бр,0, Сатурн,1
04.08.2016, Рязань,2, Торпедо М,1
04.08.2016, Витязь,1, Калуга,0
11.08.2016, Зенит Пз,0, Витязь,5
11.08.2016, Металлург Лп,0, Торпедо М,2
11.08.2016, Авангард К,1, Динамо Бр,0
11.08.2016, Сатурн,1, Арсенал-2,1
11.08.2016, Энергомаш,4, Орёл,0
12.08.2016, Калуга,1, Рязань,0
18.08.2016, Арсенал-2,1, Авангард К,2
18.08.2016, Орёл,1, Сатурн,0
18.08.2016, Чертаново,1, Энергомаш,4
18.08.2016, Торпедо М,1, Калуга,1
18.08.2016, Динамо Бр,1, Металлург Лп,0
18.08.2016, Рязань,2, Зенит Пз,0
25.08.2016, Авангард К,0, Орёл,0
25.08.2016, Динамо Бр,5, Арсенал-2,0
25.08.2016, Сатурн,1, Чертаново,2
28.08.2016, Металлург Лп,1, Калуга,0
28.08.2016, Зенит Пз,1, Торпедо М,1
28.08.2016, Энергомаш,2, Витязь,0
02.09.2016, Чертаново,0, Авангард К,1
02.09.2016, Арсенал-2,1, Металлург Лп,3
02.09.2016, Орёл,0, Динамо Бр,1
02.09.2016, Рязань,1, Энергомаш,3
02.09.2016, Витязь,2, Сатурн,1
03.09.2016, Калуга,2, Зенит Пз,2
09.09.2016, Арсенал-2,2, Орёл,2
10.09.2016, Энергомаш,0, Торпедо М,0
10.09.2016, Сатурн,1, Рязань,0
10.09.2016, Динамо Бр,0, Чертаново,2
10.09.2016, Металлург Лп,2, Зенит Пз,4
11.09.2016, Авангард К,3, Витязь,0
16.09.2016, Чертаново,0, Арсенал-2,1
17.09.2016, Калуга,1, Энергомаш,1
17.09.2016, Орёл,0, Металлург Лп,1
17.09.2016, Витязь,1, Динамо Бр,0
17.09.2016, Рязань,1, Авангард К,1
18.09.2016, Торпедо М,1, Сатурн,2
25.09.2016, Сатурн,1, Калуга,1
25.09.2016, Динамо Бр,0, Рязань,0
25.09.2016, Арсенал-2,1, Витязь,2
25.09.2016, Орёл,1, Чертаново,3
25.09.2016, Авангард К,0, Торпедо М,1
26.09.2016, Энергомаш,5, Зенит Пз,1
01.10.2016, Калуга,2, Авангард К,0
01.10.2016, Торпедо М,1, Динамо Бр,1
02.10.2016, Витязь,3, Орёл,2
02.10.2016, Зенит Пз,0, Сатурн,1
02.10.2016, Чертаново,1, Металлург Лп,2
02.10.2016, Рязань,2, Арсенал-2,1
09.10.2016, Арсенал-2,1, Торпедо М,2
09.10.2016, Чертаново,3, Витязь,3
09.10.2016, Динамо Бр,0, Калуга,0
09.10.2016, Орёл,1, Рязань,1
09.10.2016, Металлург Лп,0, Энергомаш,4
09.10.2016, Авангард К,1, Зенит Пз,0
15.10.2016, Калуга,1, Арсенал-2,0
16.10.2016, Торпедо М,1, Орёл,1
16.10.2016, Зенит Пз,1, Динамо Бр,3
16.10.2016, Металлург Лп,0, Витязь,0
16.10.2016, Рязань,2, Чертаново,2
16.10.2016, Энергомаш,0, Сатурн,1
23.10.2016, Чертаново,4, Калуга,0
23.10.2016, Динамо Бр,1, Энергомаш,0
23.10.2016, Авангард К,2, Сатурн,2
23.10.2016, Витязь,1, Торпедо М,3
23.10.2016, Орёл,3, Зенит Пз,1
23.10.2016, Рязань,1, Металлург Лп,1
29.10.2016, Калуга,2, Витязь,1
30.10.2016, Торпедо М,1, Рязань,1
30.10.2016, Металлург Лп,1, Авангард К,0
30.10.2016, Энергомаш,4, Арсенал-2,0
30.10.2016, Зенит Пз,3, Чертаново,0
30.10.2016, Сатурн,1, Динамо Бр,0
06.11.2016, Витязь,3, Зенит Пз,1
06.11.2016, Арсенал-2,1, Сатурн,3
06.11.2016, Динамо Бр,0, Авангард К,1
06.11.2016, Торпедо М,1, Металлург Лп,0
06.11.2016, Рязань,1, Калуга,2
06.11.2016, Орёл,1, Энергомаш,1

antoniokov Jan 6 2017 at 00:00

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

Выпустил новый релиз с фиксом и протестировал вашу таблицу: https://replaytable.com/tables/requests/2016/1ax-russian-second-division-centre.html. Кстати, локализировал её и добавил общее количество туров, чтобы прогресс-бар показывал правду — загляните в исходный код.

В следующем релизе поправим стили, про которые вы писали сверху.

1ax Jan 8 2017 at 19:20

да, заработало. но появились другие проблемы
добавил еще 2 игры, для полного соответствия реальности — выявилась еще одна проблема (а может 2), в исходных данных Чертаново сыграло 14 игр, а табличка генерит что 15, это идет из 4 тура, который Чертаново пропускало, таблица добавляет проигранную игру, видимо из следующего тура (кстати, проверил — такая ситуация во всех случаях пропуска тура, то есть динамика неверно отражена, в каждом туре присутствует результат из другого тура). А вот откуда берет лишнюю игру в итоге — непонятно, в разбивке В/П/Н идет верно 4/7/3=14

2 Дивизион Центр

antoniokov Jan 9 2017 at 22:04

Интересно. Обновил csv из вашего комментария — Replay Table показывает у Чертаново 14 игр (таблица):

1ax Jan 9 2017 at 22:14

В 15 туре действительно 14, но есть уже 1 игра из 16 тура.
И хотя его Чертаново не играло, +1 игру оно получает.
самый первый тур с этой проблемой — 4, там где Чертаново пропускает тур.
Или можно взять любой тур, найти команду которая его пропускает и там будет проблема влияние результатов игры из следующего тура, просто все остальные команды потом выравниваются, а Чертаново еще и на 1 игру больше.