Пользователь
0,2
рейтинг
3 ноября 2011 в 08:54

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

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

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

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



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

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

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


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

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

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

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (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
    Вид:

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