Reddit Quick Popularity Identification with Colors based on Vote Count

README.md

Reddit Quick Popularity Identification with Colors based on Vote Count

How to install

• Install Tampermonkey for Chrome or Greasemonkey for Firefox.
• Go to the raw url of this page and Tampermonkey will catch it as a userscript.

RedditVotesColors.user.js

// ==UserScript==
// @name         Reddit vote color identification
// @namespace    gist.github.com/Alber70g
// @version      0.12
// @description  Reddit votes colors (logarithmic)
// @author       Alber70g
// @match        https://www.reddit.com/r/*
// @exclude      https://www.reddit.com/r/*/comments*
// @include      https://www.reddit.com/
// @require      https://unpkg.com/chroma-js@1.3.7/chroma.js
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// @updateURL    https://gist.github.com/Alber70g/682620e3615f71a332a9/raw/RedditVotesColors.user.js
// ==/UserScript==

waitForKeyElements('[data-click-id="upvote"]', () => {
    var allColorElements = Array.from(document.querySelectorAll('[data-click-id="upvote"]')).map(x => {
        return x.parentElement.children[1];
    });

    var allColors = allColorElements.map(x => +parseVoteK(x.innerText));

    var sortedColors = allColors.sort((a,b) => a-b);
    var skipCount = allColors.length / 100 * 5;
    var high = sortedColors[Math.round(allColors.length-skipCount)];
    var low = 0;

    /**
     * Color pallet being used
     * http://gka.github.io/palettes/#diverging|c0=lightgrey,lime,yellow|c1=yellow,Red|steps=12|bez0=0|bez1=0|coL0=1|coL1=1
     */
    var getColor = chroma.scale(['lightgrey','lime','yellow','Red']).domain([low, high], 10); // allColors.length/10);

    allColorElements.forEach(x => {
        x.style.borderBottomStyle = 'solid';
        x.style.borderBottomColor = getColor(+parseVoteK(x.innerText)).hex();
        x.style.borderBottomWidth = '3px';
        x.style.width = '20px';
        x.style.textAlign = 'center';
    });
});

function parseVoteK(vote) {
    return vote.replace('.', '').replace('k', '000');
}