Pros and Cons Percentage Chart on Canvas

A script was made showing the results of voting in one number, not only by the difference of “for” and “against”, but also by showing the ratio of the opposing forces. The forces are shown as a circular (ring) diagram, the upper part of which with a green color indicates the proportion of votes “for” (or absent), and the lower part - the proportion “against”, red. Thus, the ratio of forces is visually shown and how general the decision was controversial. The thickness of the ring and the saturation depend on the total number of votes, which shows the statistical stability of the result.

Easier to see and evaluate with examples. On the right - examples in the list of topics, taken from different announcements, a mouse is hovering over one assessment, which opens the arithmetic of the total assessment. Examples from the comments - below.

Examples of pie charts for rating comments. Even where there are zeros, the presence of rings shows that there was a battle of opinions, and the thickness of the rings indicates its intensity.


')
Normally selected mapping for Arial font for 1-, 2-, and 3-digit numbers. 4-digit ignored, because very few of them on the site (units).

Install the script in any of the browsers - userscripts.org/scripts/show/129371 (then click "Install").

How does the script

The presence under the title attribute of hidden data from direct viewing allows you to watch them by hovering the mouse, but the lack of visual viewing is a bit tiring. On the one hand, there is data, on the other hand, they require manipulations to view them one by one. Such inconvenience asks for corrections, therefore, a user script has been made to show visually the number of votes “for” and “against”, or the ratio of positive and negative ratings.

In the "Questions and Answers" section there is no such hidden information, therefore, it does not act and cannot act. In the comments - the same story. If in the remaining sections the data is not disclosed by a user’s click or expiration of the voting, they are not shown either.

PS Tested in Chrome, Firefox. There should be no problems with other modern browsers (not IE).
UPD : For the stylist Zen Comment , a similar script works with a slightly different set of constants. But since the stylist is not officially presented, I’m not going to upload a script for him anytime soon either. If anyone uses it and wants to connect this interest - write in a personal or in the comments request - lay out.
UPD2 : for Zen-Comment, an option ( view ) with ellipses is made (because the rings take up a lot of space and are closed).