russelllim22’s gists

russelllim22 / ProgressBar-index.svelte

Last active September 7, 2021 10:21

	<script>
	import { fade } from 'svelte/transition';
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';
	export let currentScore;

	const progress = tweened(0, {
	duration: 400,
	easing: cubicOut
	});

russelllim22 / star-animation.svelte

Last active September 7, 2021 10:41

	{#if currentScore === 20}
	<svg class="icon-thumbs-up" in:fade="{{delay: 100, duration: 400}}" width="30px" fill="goldenrod" x=-120 y="calc(-50% - 20px)" viewBox="0 0 1000 1000"><use href="#thumbs-up-path"></use></svg>

	{#each starArray as star,i}
	<g class="star {(i % 3 === 0) ? "twinkle" : "" }" in:fade="{{delay: 100*i, duration: 200}}" style="transform-origin: {-star.x + 80}px {star.y - 30}px;">
	<line x1={-star.x +80} y1={star.y - 30 + 2 + (i % 20) /20 3} x2={-star.x +80} y2={star.y - 30 - 2 - (i % 20) /20 3} stroke-width=1></line>
	<line x1={-star.x + 80 + 2 + (i % 20) /20 3} y1={star.y - 30} x2={-star.x + 80 - 2 - (i % 20) /20 3} y2={star.y - 30} stroke-width=1 ></line>
	<circle r="{(i % 20) /20 *2 + 1}" cx={-star.x + 80} cy={star.y - 30}></circle>
	</g>
	{/each}

russelllim22 / bar-chart-with-word-clouds.html

Last active December 3, 2021 13:32

	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<svg id="chartSVG" viewBox="0,0,1600,3200" width="1600"
	style=" max-width: 100%;
	font-family: Nunito, sans-serif;
	border: 1px solid black;
	background: radial-gradient(ellipse at bottom right, rgba(137,207,240,1) 20%, rgba(244,194,194,1) 70%);">
	<image width="1600px" height="3200px" style="opacity:0.2;" href="babies-pixabay.png">
	</image>

russelllim22 / bar-chart-with-word-clouds.js

Last active December 3, 2021 13:07

	const nameData = d3.csvParse("word,gender,count\n" + textFile).map(d => ({
	text: d.word,
	size: +d.count
	})).sort((a,b) => d3.descending(a.size,b.size))

	const letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
	const letterNames = {"other":[]};
	const letterCounts = [];

	letters.forEach((letter)=>{

russelllim22 / nameData.js

Created December 3, 2021 13:28

russelllim22 / bar-chart-with-word-clouds-2.js

Last active December 3, 2021 20:49

	const chartSVG = d3.select("#chartSVG")

	const yScale = d3.scaleBand()
	.domain(letterCounts.map(d => d.letter))
	.range([0, 3200]) // my chart is 3200px high
	.paddingInner(0.1)
	.paddingOuter(0.1);

	const xScale = d3.scaleLinear()
	.domain([0,450000]) // the most popular letter (A) has about 450000 babies

russelllim22 / bar-chart-with-word-clouds-3.js

Last active December 3, 2021 21:20

	// Adapted from https://observablehq.com/@pixnwave/word-cloud-with-counts
	function makeCloud(letter, width) {

	const words = [...letterNames[letter]].filter(d=>d.size>99); // only render names with at least 100 babies
	const height = yScale.bandwidth();
	const cat10 = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];

	var layout = d3.layout.cloud()
	.size([width + 10, height])
	.words(words)

russelllim22 / bar-chart-with-word-clouds-4.js

Created December 3, 2021 21:18

	const totalBabies = letterCounts.reduce((a, b) => a + b.count, 0);
	const smallCounts = {letter: "other", count: 0, otherLetters: ""}
	for(let i = 25; i>=0; i--){
	if(letterCounts[i].count < 0.015*totalBabies){
	smallCounts.otherLetters += `${letterCounts[i].letter},`;
	smallCounts.count += letterCounts[i].count;
	letterNames["other"] = letterNames["other"].concat(letterNames[letterCounts[i].letter])
	letterCounts.splice(i,1)
	}
	}

russelllim22 / bar-chart-with-word-clouds-complete.html

Created December 3, 2021 21:30

	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<svg id="chartSVG" viewBox="0,0,1600,3200" width="1600"
	style=" max-width: 100%;
	font-family: Nunito, sans-serif;
	border: 1px solid black;
	background: radial-gradient(ellipse at bottom right, rgba(137,207,240,1) 20%, rgba(244,194,194,1) 70%);">
	<image width="1600px" height="3200px" style="opacity:0.2;" href="babies-pixabay.png">
	</image>

russelllim22 / bar-chart-with-word-clouds-1.svelte

Last active December 27, 2021 19:59

	<svg id="chartSVG" viewBox="0,0,1000,2000">
	<image width="1000px" height="2000px" style="opacity:0.2;" href="/babies-pixabay.png">
	</image>
	{#if letterCounts.length > 0}
	{#each letterCounts as d, i}
	<rect x = 0 y = {yScale(d.letter)} width = {xScale(d.count)} height = {yScale.bandwidth()}
	in:fly="{{ x: -1000, duration: 1000, delay: 1000*i}}"></rect>
	<text class="bar-label" x = {xScale(d.count) + 15} y = {yScale(d.letter) + yScale.bandwidth()/2}
	in:fly="{{ x: -1000, duration: 1000, delay: 1000 * i }}">
	{d.letter}: ({Math.round(d.count / totalBabies * 100)}%)