russelllim22’s gists

russelllim22 / Gameboard-index.svelte

Last active September 7, 2021 06:16

	<div id="game-board" >
	<UnitCircle {currentAngle} {showAngle} {showLength}/>
	<ProgressBar {currentScore}/>
	<ToolBar {toolBarOpen}
	bind:trigFunctions
	bind:angleTypes
	bind:angleQuadrants
	bind:settingChanged
	bind:gameTimer
	/>

russelllim22 / D3-select-x-vars.js

Created September 4, 2021 22:23

	let xVar = document.getElementById("select-x-var").value;

	document.getElementById("select-x-var").addEventListener("change", (e)=>{

	// update the x-variable based on the user selection
	xVar = e.target.value

	// rescale the x-axis
	xScale = d3.scaleLinear()
	.domain([0, d3.max(articleData, d => d[xVar]) ])

russelllim22 / D3-select-axis-vars.html

Created September 4, 2021 22:09

	<div id="plot-wrapper" style="position: relative;">
	<svg id="plotSVG" width=700 height=500></svg>
	<select id="select-y-var" style="position: absolute; top:0px; left:0px;">
	<option value="reads" selected>reads</option>
	<option value="claps">claps</option>
	<option value="upvotes">fans</option>
	<option value="views">views</option>
	<option value="internalReferrerViews">internal views</option>
	</select>
	<select id="select-x-var" style="position: absolute; bottom:0px; left: 600px;">

russelllim22 / apply-scales.js

Created September 4, 2021 21:47

	svg.selectAll(".bubble")
	.data(articleData) // bind each element of the data array to one SVG circle
	.join("circle")
	.attr("class", "bubble")
	.attr("cx", d => xScale(d.views)) // set the x position based on the number of claps
	.attr("cy", d => yScale(d.reads)) // set the y position based on the number of views
	.attr("r", d => d.readingTime) // set the radius based on the article reading time
	.attr("stroke", "darkblue")
	.attr("fill", d => "lightblue")

russelllim22 / D3-axes

Created September 4, 2021 21:27

	svg.append("g") // the axis will be contained in an SVG group element
	.attr("id","yAxis")
	.call(d3.axisLeft(yScale))

	svg.append("g")
	.attr("transform", "translate(0,400)") // translate x-axis to bottom of chart
	.attr("id","xAxis")
	.call(d3.axisBottom(xScale))

russelllim22 / d3-scales.js

Last active September 4, 2021 21:36

	let xScale = d3.scaleLinear()
	.domain([0, 3000]) // my x-variable has a max of 3000
	.range([0, 600]); // my x-axis is 600px wide

	let yScale = d3.scaleLinear()
	.domain([0, 1000]) // my y-variable has a max of 1000
	.range([400, 0]); // my y-axis is 400px high
	// (the max and min are reversed because the
	// SVG y-value is measured from the top)

russelllim22 / D3-data-bind

Last active September 4, 2021 12:19

	let svg = d3.select("#plotSVG")

	svg.selectAll(".bubble")
	.data(articleData) // bind each element of the data array to one SVG circle
	.join("circle")
	.attr("class", "bubble")
	.attr("cx", d => d.views) // set the x position based on the number of claps
	.attr("cy", d => d.reads) // set the y position based on the number of views
	.attr("r", d => d.readingTime) // set the radius based on the article reading time
	.attr("stroke", "darkblue")

russelllim22 / articleData.js

Last active September 4, 2021 11:51

russelllim22 / chained-transitions.js

Last active September 4, 2021 11:32

	function expandShrink(){
	d3.select("#blueCircle")
	.transition()
	.duration(1600)
	.attr("r", 50) // increase radius to 50px
	.transition()
	.duration(800)
	.attr("fill", "yellow") // change to yellow (why not!)
	.transition()
	.duration(800)

russelllim22 / d3-transition.html

Last active September 4, 2021 10:41

	<head>
	<script src="https://d3js.org/d3.v6.min.js"></script>
	</head>

	<body>
	<svg>
	<circle cx=50 cy=50 r=20 stroke=darkblue fill=lightblue></circle>
	</svg>

	<script>