russelllim22

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

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

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

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

<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

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

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

russelllim22

<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';

export let currentAngle, showAngle, showLength;
const lengthTween = tweened(0, {
	duration: 400,
	easing: cubicOut
});

russelllim22

<line id="cosArrow" 
	x1="110" 
	y1="115" 
	x2="{$lengthTween * Math.cos(currentAngle * Math.PI / 180) * 100 + 110}" 
	y2="115" stroke="goldenrod" 
	style="opacity: {(showLength === "cos") ? 1 : 0}"
	stroke-width="3" 
	marker-end="{[-270,-90,90,270,450].includes(parseInt(currentAngle)) ? "url(#gold-point)" : "url(#gold-arrow)"}" 	
/> 
   

russelllim22

<script>
    import { fade, fly } from 'svelte/transition';
    export let currentQuestion;
</script>

{#if currentQuestion.length > 0}
    <p id="question" 
      in:fly="{{ x: -0.3*window.innerWidth, y: 0.3*window.innerHeight, duration: 500,}}"  
      out:fly="{{x:0.3*window.innerWidth, y: 0.3*window.innerHeight, duration: 500, delay: 500 }}">
        {#if currentQuestion[1].includes("pi") && currentQuestion[2]}