Диаграмма процентовки «за и против» на canvas

    Сделан скрипт, показывающий результаты голосования одним числом не только разностью «за» и «против», но и с показом соотношения противоборствующих сил. Силы показываются в виде круговой (кольцевой) диаграммы, верхняя часть которой с зелёным цветом показывает долю голосов «за» (или отсутствует), а нижняя — долю «против», красного цвета. Таким образом, наглядно показано соотношение сил и насколько спорным было общее решение. От общего количества голосов зависит толщина кольца и насыщенность, что показывает статистическую устойчивость результата.

    Проще посмотреть и оценить на примерах. Справа — примеры в списке топиков, взяты из разных анонсов, на одну оценку наведена мышь, открывающая арифметику суммарной оценки. Примеры из комментариев — далее.

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



    Нормально подобрано отображение для шрифта Arial для 1-, 2-, и 3-значных чисел. 4-значные проигнорированы, т.к. их очень мало на сайте (единицы).

    Установить скрипт в любой из браузеров — userscripts.org/scripts/show/129371 (далее нажать «Install»).

    Как действует скрипт


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

    В разделе «Вопросы-Ответы» такой скрытой информации нет, поэтому ничего не действует и действовать не может. В своих комментариях — такая же история. Если в остальных разделах данные не раскрыты кликом пользователя или истечением срока голосования — они тоже не показаны.

    P.S. Проверялось в Хроме, Firefox. Не должно быть проблем с другими современными браузерами (не IE).
    UPD: Для стилизатора Zen Comment работает аналогичный скрипт с немного другим подобранным набором констант. Но так как стилизатор официально не представлен, скрипт под него выкладывать тоже не собираюсь в ближайшее время. Если кто его юзает и хочет подключить эту процентовку — пишите в личку или в комменты запрос — выложу.
    UPD2: для Zen-Comment же сделан вариант (вид) с эллипсами (потому что кольца занимают много места и смыкаются).
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 63
    • +68
      О, узнал что и у комментов есть количество плюсов и минусов, а не только итоговое значение.
      Здорово.
      • –49
        Вы потехун дня
        • +7
          Мне кажется Вы.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Ну так я специально для этого и написал комент ;)
        • +1
          Блин и правда ведь есть. Не знал.
          • +1
            Похоже, что это сделали в августе-сентябре. В оставшихся старыми QA это отсутствует.
            • 0
              Очень даже может быть. Но инфа есть и по более древним комментарием, так что в базе уже давно. А вообще странно, не думал что в QA другая система комментариев, нелогично как-то.
        • +1
          Для ситуации /[+-]\d/ я бы ставил центр кружка между знаком и цифрой.

          А так прикольна.
          • +1
            Отличный скрипт. Спасибо :)
            • 0
              C трех- и четырехзначными числами надо чё-та делать :)
              • +41
                Как вариант можно было бы выводить не кружок, а столбик сбоку или полоску под цифрой (по ширине самой цифры).

                Думаю вариант с полоской снизу получше будет…
                • –1
                  Мне кажется, что вариант с полоской нижу может быть самым оптимальным и жизненным.

                  В случае 3-х и 4-х значных чисел полоска получается длиннее, при этом разница в + и — может быть показана более точно, что добавит информативности данному блоку.

                  Если есть желание не отходить от круга, то можно рядом с цифрой (справа) дорисовать круг, в котором в виде дольки показывать положительные или отрицательные оценки (не могу к сожалению предоставить графическое подкрепление слов — ограничения хабра). К тому же в этом случае если долька достаточна большая — можно указать в ней еще и значение.
                  • +1
                    Вы опередили мои мысли — тоже подумал, что полоска это как раз лаконичнее и проще.
                  • +1
                    мне кажется, что достаточно, чтобы кружок был по центру относительно цифер. и цифры можно сделать чёрными и поверх кружка. Тогда будет отлично.
                    • –1
                      Не, когда одно перекрывает другое, это не есть хорошо…
                      • +6
                        А по-моему — классно и живенько:
                      • 0
                        Да, можно парой строк скорректировать, выложу исправление вечером. Если сами напишете, то идея — в проверке числа на диапазон 1...9 и сдвиге канваса для него (сразу после такого же места для нуля).
                        	if(o.parentNode.parentNode.className =='infopanel'){
                        		c.style.left = (Math.abs(aP - aM) >99 ? -14 +37 : -14 +30) +'px';
                        		oXS.style.position = 'relative';
                        	}else if(o.parentNode.parentNode.parentNode.className =='entry-info vote_holder'){
                        		c.style.left = (Math.abs(aP - aM) >99 ? -14 +45 : (aP == aM ? -14 +34 : -14 +39)) +'px';
                        		c.style.top ='0';
                        	}else{
                        		c.style.left = (Math.abs(aP - aM) >99 ? -14 +18 : (aP == aM ? -14 +3 : -14 +9 +3*(Math.abs(aP - aM) >9))) +'px';
                        		oXS.style.top ='-2px';
                        	}
                        

                        Здесь подобраны центровки для 1-2-3 значных чисел в комментариях и в анонсах. И добавлена старая вёрстка Хабра, которая есть в списке своих статей.
                        • 0
                          может использовать measureText?
                          • 0
                            Числа — не в канвасе, поэтому нет. Я их измеряю и без того, но для простоты не преобразую свойства в блочные и не центрую, поэтому приходится вручную подбирать центровку. Может поехать в ОС при отсутствии шрифта Arial/Helvetica.
                      • 0
                        Полоска по горизонтали — тоже неплохо, делается значительно проще, чем овал. Пока же, исходя, что 3-значных чисел немного, можно оставить так, чтению не очень мешает.

                        Из комментария ниже:
                        > достаточно, чтобы кружок был по центру относительно цифер…
                        --Тут проблема, что кружок должен быть ограничен высотой строки — мешают overflow: hidden и скрывают дугу, но если даже обойти, то налезал бы круг на соседние строки. Поэтому вариант — овал или полоска.
                        • 0
                          Горизонтальная полоска будет не очень смотреться для однозначных и двузначных чисел, коих большинство.
                          • 0
                            Я по большей части ориентировался на рейтинг статей, там в основном дву- и трёх- значные числа, там полоска смотрится хорошо. А с комментариями да, всё немного хуже) Ладно, чуть позже вернусь домой, попробую прорисовать разные варианты, может придумаю что-то универсальное)
                      • 0
                        С одной стороны — классная придумка, может оказаться полезной. С другой — обилие красно-зеленых пятен, сконцентрированных с одной стороны (справа)кардинально меняет баланс страницы, смещая визуальный центр существенно правее, что не может не сказываться на утомляемости глаз читателя и ухудшении восприятия прочитываемого текста. Очевидно, вывод таких кружков следовало бы сделать опциональным, скажем, при ролловере мышкой над самой оценкой коментария.
                        зы. Но итальянцам должно понравиться, исходя из цветов их флага :)
                        • +2
                          Можно сделать цвета не такими вычурными, посмотрите на Youtube — тоже такая система
                          • 0
                            Можно. Замените q.strokeStyle = "#1b1"; и q.strokeStyle = "#a24"; в коде скрипта на свои цвета по вкусу.
                        • +3
                          Гыыыы…
                          Почему-то сразу побежал по своим старым каментам глянуть на замусованные пункты

                          Знаете ли, убедиться — хоть кто-то был со мной согласен? =)))
                          • 0
                            в закладке «избранное» не работает
                          • –1
                            Все диаграммы будут как минимум с половиной зеленого, понятно почему.
                            Так что есть смысл отображать только минусовые голоса.
                            • 0
                              Реальность с вами несогласна :)
                            • +12
                              Отлично, следующий шаг очевиден:
                              • +2
                                это уже лишнее, так как очень будут против фигурирования ников в списках, а вот например написание обязательного комментария при повышении или понижении кармы, который сообщает причину данного решения (пусть даже без указания ника), было бы неплохо реализовать
                                • +3
                                  А вот это как раз не лучшая идея. Чем тебе поможет комментарий «kl;hjoiugtygfy!!11» или «фывапролдж»?
                                  Голосования за комменты, карму, топики, за всё — следует деанонимизировать. Тогда перед нажатием смешных плюсиков-минусиков %username% семь раз подумает, уверен ли он в своем мнении.
                                  • 0
                                    Вот как раз деанонимизация — это благодатная почва для ситуаций «Ах ты так? Мужики(обращаясь к друзьям), а давайте его в ответ заминусуем толпой» и начнется цепная реакция. А за такие комментарии по прошествию определенного времени следует принять некие меры, чтобы отбило охоту писать такие комментарии в будущем. Опять же, это всего лишь мое скромное имхо
                                    • +3
                                      Практика (моя личная) показывает, что деанонимизированный подход работает гораздо лучше, потому что все прозрачно и очевидно. А вот скрытный подход — благодатная почва для подлянок. Меня не раз подставляли так. Я никогда не минусую оппонента в дискуссии, если она ведется в рамках приличий, без мата и жестких оскорблений. А вот тихий сторонний наблюдатель спора может запросто пройтись в профиль моего оппонента и насрать по карме и по всем комментам. Оппонент делает скорополительный вывод, что это моих рук дело и тогда начинается: «Ах ты так? Мужики(обращаясь к друзьям), а давайте его в ответ заминусуем толпой». Но если в случае с неанонимными голосами такое поведение понятно (хотя происходит довольно редко, по моему опыту), то в случае с анонимными просто мимо, невиновный человек получает тонны говна.
                                      • +1
                                        Я тоже сторонних открытых голосований. Когда голосования анонимны, человек ни за что не отвечает, можно лепить направо и налево, просто по настроению.

                                        «Заминусуем толпой» — ну может быть разово поначалу такие акции и будут случаться, но они же будут становиться фатальными для их авторов. «Мужики», которым поступит такое обращение, тоже подумают — а че я ради Петькиного детского сада буду своим акком рисковать?
                                        Это как ядерное сдерживание между США и СССР, когда «просто так» никто не мог стрельнуть, понимая, что ответ последует незамедлительно.
                                • 0
                                  > Я никогда не минусую оппонента в дискуссии, если она ведется в рамках приличий, без мата и жестких оскорблений.

                                  Я тоже, но многие поступают с точностью до наоборот. Если бы все поступали так, то и проблемы такой не существовало. В любом случае, какую бы систему не ввели, найдутся толпы недовольных, потому как всем угодить никогда не получится. Возможный выход — надо найти некую золотую середину, дабы минимизировать количество бунтующих
                                  • 0
                                    простите, промахулся по «ответить»
                                    • 0
                                      Середина — это миф.
                                      многие поступают с точностью до наоборот.
                                      Вот с деанонимизацией перестанут, я гарантирую это. Высший пилотаж будет в привлечении сторонних минусов и плюсов своими доводами и аргументами.
                                      • 0
                                        а мне видится такой сценарий — человек поставил минус заслуженно, тот, кому поставили, обиделся и наговорил в личку поставившему всяких грубых и не совсем приличных слов, тот сделал это достоянием общественности, аудитория поделилась на два лагеря — те, кто не любит ябедничество, и те, кто не любит грубость — и снова приходим к холивару, только уже спонтанному
                                        • 0
                                          Это уже никак не связано с анонимностью голосований.
                                          • 0
                                            Связано чуть меньше, чем напрямую. Если минус ставится анонимно, то наговорить в ответ гадостей человек уже не сможет
                                            • 0
                                              Поверь мне, я столько писем получал в личку хабра с обвинениями, что закачаешься.
                                              • 0
                                                я тоже получал, только щекотливость в том, что как раз тут могут быть ситуации, когда человек точно знает, что это ты поставил минус, и ситуации с подставами, как ты же и описывал
                                                • +1
                                                  Я совсем не против получить гневное письмо от человека, которому я действительно ставил минусы, будет повод спокойно все обсудить. Но я решительно против получать гнойные изливания от людей, которых даже не знаю и кого и пальцем не трогал.
                                    • 0
                                      Не работает в списке собственных постов.
                                      • 0
                                        Патч habrahabr.ru/blogs/canvas/131818/#comment_4375992
                                      • 0
                                        При поиске по тэгам выскакивает баг ↓

                                        • +1
                                          Это той же природы, что и свои статьи, и избранное — старая вёрстка Хабра. Сейчас исправьте вручную этой заменой определённого места — habrahabr.ru/blogs/canvas/131818/#comment_4375992, и будет работать, а завтра дополненный скрипт просто сможете скачать и установить с хостинга (в приведённом коде есть ещё один небольшой недочёт с показом подсказок).
                                        • 0
                                          1. Сделан апдейт файла spmbt.kodingen.com/habrahabr/perceRing.user.js в сети (до версии 0.3). Теперь при загрузке по ссылке корректно работают все кольца на всех видах страниц (конечно, если есть что показывать). Нет информации на страницах собственных комментариев, в QA, поэтому там колец не будет.
                                          2. По 4-значным числам. Их на самом деле очень мало, поэтому некорректное кольцо на 1 или нескольких страницах не сыграет никакой роли. Все 1-2-3-значные числа показываются корректно (при шрифтах Arial ил Helvetica, второе не тестировал).
                                          3. Желающим модифицировать цвета и насыщенность — имейте в виду, что прозрачность канваса тоже вычисляется в функции по логарифмическому закону, им тоже можно регулировать насыщенность цвета.
                                          4. Не появляется кольцо при клике на числе. Теоретически сделать можно, но не хочется заморачиваться такой задачей. И будут громоздко решаемые проблемы выполнения юзерскрипта по клику в Хроме.
                                          • 0
                                            криво работает мерцание кольца при ховере на отрицательный каммент. его нижняя полусфера меняет прозрачность рывками.
                                            • 0
                                              так же на сильнозаплюсованном камменте кольцо на столько жирное, что обрезается снаружи и круг не такой уж и круглый становится ;)
                                              • 0
                                                Я это сознательно сделал, чтобы квадрат, на котором круг, не занимал лишние пиксели, поскольку он наезжает на соседние строки и может закрывать ссылки — скорее, это не для классического Хабра, а для стиля Zen-Comment. Увеличие переменную r2 = 14 и константы 14 в скрипте — они снова станут кругами.
                                              • +1
                                                Исправил мерцание кольца установкой zIndex =1;, выложил исправленную версию на хостинг. (Видел это и раньше, но не придавал значения.) Это посветление на нижней полусфере видно и на скриншоте на оценке "-1", сейчас его нет.
                                              • +2
                                                Сделал себе на основе этого скрипта такую вот штуку, как предлагалось выше:



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

                                                Кстати, получилось похоже на хелсбар в какой-нибудь mmorpg :)
                                                • 0
                                                  Взгляд, действительно, больше обращает внимание на окружности или полоски с цветами. Поэтому для себя я в исходном виде делал этот механизм в комплекте с Zen-Comment -стилем, в котором оценки вообще скрываются, пока на блок с комментарием не наведёшь мышь. Поэтому без наведения мыши я не вижу ни оценок, ни кругов (только полупрозрачность текста для отрицательных оценок).
                                                  Ваш вариант легко сделать и без Canvas, чтобы работал кроссбраузерно в IE — это замечание для разработок вообще.
                                                  • 0
                                                    И ещё, чтобы и в обычном варианте круги или полоски были незаметны, можно отрегулировать прозрачность двумя параметрами (значение нуля и показатель логарифма) до уровня комфорта. Сейчас эти параметры — 0.25 и 1.6. 1.6 — это логарифм по основанию 5. При увеличении суммарной оценки в 5 раз не-прозрачность увеличивается на 0.1, а при 1 оценке не-прозрачность 0.35. Значит, при 25 она — 55, при 125 — 65. Хотите, чтобы opacity росло меньше — увеличьте показатель логарифма.
                                                    • 0
                                                      Прозрачность я вообще убрал — напрягает сильно. Оставил только толщину как показатель интенсивности голосования. По сути два эти параметра (прозрачность и толщина) показывают одно и то же.
                                                      • 0
                                                        Ну тогда надо сделать сильно бледными и светлыми цвета. Мне для Zen-Comment нужна была именно прозрачность, т.к. круги налезают на соседние строки.
                                                  • 0
                                                    Поделитесь, а то даже ссылка в посте 404?
                                                  • +1
                                                    Ещё вариант: из кругов несложно сделать эллипсы применением команд q.scale(1, ell); Вид:
                                                    image
                                                    • 0
                                                      Сделано обновление для версии, работающей со стилизатором Zen-Comment, чтобы правильно показывать 3-значные числа в комментариях, как здесь: habrahabr.ru/blogs/infosecurity/132233/
                                                      Устанавливать отсюда: spmbt.kodingen.com/habrahabr/perceRingZenComment.user.js
                                                      Вид:

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.