Popularity color indicator for Show HN for TamperMonkey

README.md

Visual Popularity Indicator 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.

Changes

0.7

• fix when multiple tables side by side

0.6

• only select the first table when using it with Hacker UX Chrome extension (somehow it didn't get fixed in 0.4)

0.5

• ability to use it for multiple websites (of course they need to add a @match in the UserScript metadata)

0.4

• select first table (to be compatible Hacker News UX Chrome extension)

0.3

• changed colors to be more defined and only using 5 colors in total
• changed skipcount to 10% to allow more differentiation between outliers

0.2

• also show on /shownew

0.1

• initial release

HNPopularityColors.user.js

// ==UserScript==
// @name         Show HN vote color identification
// @namespace    gist.github.com/Alber70g
// @version      0.7
// @description  HN votes colors (logarithmic)
// @author       Alber70g
// @match        https://news.ycombinator.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/e0bdad727189fd7ad66f61b609377686/raw/HNPopularityColors.user.js
// ==/UserScript==
(function(){

    function colorPopularity(href) {
        switch(true) {
            case !!href.match(/news\.ycombinator\.com\.*/):
                return hackerNews();
        }
    }

    function hackerNews() {
        waitForKeyElements('.itemlist', () => {
            const elements = Array.from(document.querySelector('.itemlist').querySelectorAll('.score')).map(x => x.parentElement.parentElement);
            const scoreFn = (el) => +el.querySelector('.score').innerText.split(' ')[0]
            const styleFn = (el, color) => {
                el.children[0].style = "background: linear-gradient(0deg, #f6f6ef 50%, " + color + " 50%);";
            }
            colorVoting(elements, scoreFn, styleFn)
        })
    }

    function colorVoting(elements, scoreFn, styleFn) {
        const arrayElements = Array.from(elements)

        const allScores = arrayElements.map(x => {
            return scoreFn(x);
        });

        const [high, low] = getHighLow(allScores);

        /**
        * 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
        */
        const getColor = chroma.scale(['lightgrey','lime','orange','Red']).domain([low, high], 5); // allColors.length/10);

        arrayElements.forEach(el => {
            styleFn(el, getColor(scoreFn(el)));
        });
    }

    function getHighLow(allVotes) {
        var sortedVotes = allVotes.sort((a,b) => a-b);
        var skipCount = allVotes.length / 100 * 5;
        var high = sortedVotes[Math.round(allVotes.length-skipCount)];
        var low = sortedVotes[Math.round(skipCount)];
        return [high, low];
    }

    colorPopularity(window.location.href);
})()