gullyn/render.html

## render.html
<!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>
	<!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>