Skip to content

Instantly share code, notes, and snippets.

@gullyn
Created January 21, 2021 13:09
Show Gist options
  • Save gullyn/ef66539a9579dd9914247e7edaffca2d to your computer and use it in GitHub Desktop.
Save gullyn/ef66539a9579dd9914247e7edaffca2d to your computer and use it in GitHub Desktop.
render
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1080;
canvas.height = 1000;
const center = canvas.width / 2;
let data = `AskReddit,0.088,3825
funny,0.22,5383
aww,0.41,8081
dataisbeautiful,0.175,3856
news,-0.18,3069
politics,-0.144,4435
gaming,0.201,4821
pics,0.198,3779
science,0.056,2824
worldnews,-0.016,2912
Jokes,0.128,3871
food,0.411,4430
PublicFreakout,-0.034,3968
todayilearned,0.117,2868
iamapieceofshit,-0.222,2015
conspiracy,-0.023,5148
rage,-0.242,5063`.replace(/\t/g, "").split("\n");
data.sort((b, a) => {return Number(a.split(",")[1]) - Number(b.split(",")[1])})
function render()
{
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = "30px Helvetica";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Sentiment Analysis of Major Subreddits", center, 65);
for (let item = 0; item < data.length; item++)
{
let yOffset = item * ((canvas.height - 125) / data.length) + 100;
let parsed = data[item].split(",");
let isNegative = Number(parsed[1]) < 0;
let size = Math.abs(Number(parsed[1]) / (isNegative ? 0.242 : 0.411)) * (center - 150);
ctx.fillStyle = isNegative ? "rgb(209, 55, 38)" : "rgb(24, 115, 153)";
ctx.fillRect(
center + (isNegative ? -55 : 55) + (isNegative ? -size : 0),
yOffset - 7.5,
size,
40
);
ctx.fillStyle = "black";
ctx.font = "15px Helvetica";
ctx.textAlign = "center";
ctx.fillText(parsed[0], center, yOffset + 8);
ctx.fillStyle = "grey";
ctx.font = "10px Helvetica";
ctx.fillText(parsed[2] + " comments", center, yOffset + 25);
ctx.textAlign = isNegative ? "right" : "left";
ctx.fillStyle = "black";
ctx.font = "15px Helvetica";
ctx.fillText(parsed[1], center + (isNegative ? -size - 60 : size + 60), yOffset + 17);
}
ctx.fillStyle = "grey";
ctx.font = "15px Helvetica";
ctx.textAlign = "center";
ctx.fillText("The number of comments is the amount of comments analyzed to get the result.", center, canvas.height - 15);
}
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment