30:T9be,html`

${tex`\Large\textbf{Relationship}`}	${tex`\Large\textbf{You can say it like this}`}	${tex`\Large\textbf{Write it like this}`}
${tex`\large2^{\color{tomato}-3} = \color{cornflowerblue}\frac{1}{8}`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}\frac{1}{8}`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}-3`}	${tex`\large\log_{2}{\color{cornflowerblue}\frac{1}{8}} = \color{tomato}-3`}
${tex`\large2^{\color{tomato}-2} = \color{cornflowerblue}\frac{1}{4}`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}\frac{1}{4}`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}-2`}	${tex`\large\log_{2}{\color{cornflowerblue}\frac{1}{4}} = \color{tomato}-2`}
${tex`\large2^{\color{tomato}-1} = \color{cornflowerblue}\frac{1}{2}`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}\frac{1}{2}`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}-1`}	${tex`\large\log_{2}{\color{cornflowerblue}\frac{1}{2}} = \color{tomato}-1`}
${tex`\large2^{\color{tomato}0} = \color{cornflowerblue}1`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}1`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}0`}	${tex`\large\log_{2}{\color{cornflowerblue}1} = \color{tomato}0`}
${tex`\large2^{\color{tomato}1} = \color{cornflowerblue}2`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}2`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}1`}	${tex`\large\log_{2}{\color{cornflowerblue}2} = \color{tomato}1`}
${tex`\large2^{\color{tomato}2} = \color{cornflowerblue}4`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}4`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}2`}	${tex`\large\log_{2}{\color{cornflowerblue}4} = \color{tomato}2`}
${tex`\large2^{\color{tomato}3} = \color{cornflowerblue}8`}	${tex`\large\text{The logarithm of }`} ${tex`\large\color{cornflowerblue}8`} ${tex`\large\text{ is }`} ${tex`\large\color{tomato}3`}	${tex`\large\log_{2}{\color{cornflowerblue}8} = \color{tomato}3`}

`31:T977,{ const svgDims = [800,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales and axes const xScale = d3.scaleLinear().domain([-2,8]).range([30,770]) const xAxis = svg.append("g").attr("transform","translate(0,300)").call(d3.axisBottom(xScale).ticks(10)) const yScale = d3.scaleLinear().domain([-3,3]).range([570,30]) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(5)) const pathData = d3.line().x(d => xScale(d)).y(d => yScale(log(d)))(data) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") for(let i = 0; i < points.length; i++){ let line1 = svg.append("line") .attr("stroke","black") .attr("stroke-dasharray",4) .attr("x1",xScale(points[i])) .attr("y1",yScale(0)) .attr("x2",xScale(points[i])) .attr("y2",yScale(log(points[i]))) .attr("opacity",0) let line2 = svg.append("line") .attr("stroke","black") .attr("stroke-dasharray",4) .attr("x1",xScale(0)) .attr("y1",yScale(log(points[i]))) .attr("x2",xScale(points[i])) .attr("y2",yScale(log(points[i]))) .attr("opacity",0) const green = svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","lime") .attr("cx",xScale(points[i])) .attr("cy",yScale(log(points[i]))) .attr("opacity",0) const red = svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(0)) .attr("cy",yScale(log(points[i]))) .attr("opacity",0) svg.append("circle") .attr("r",5) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",xScale(points[i])) .attr("cy",yScale(0)) .on("mouseover",function(){ red.attr("opacity",1) green.attr("opacity",1) line1.attr("opacity",1) line2.attr("opacity",1) d3.selectAll(`#log${i}`).attr("style","background-color:lightcyan") }) .on("mouseout",function(){ red.attr("opacity",0) green.attr("opacity",0) line1.attr("opacity",0) line2.attr("opacity",0) d3.selectAll(`#log${i}`).attr("style","background-color:white") }) } yield svg.node() } 32:[] 2e:{"title":"Logarithms","cells":[{"id":0,"value":"md`# Logarithms\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"html`I will limit the discussion below to base 2. Everything would be similar for other bases. Hover over the blue points on the x - axis to see the connection between the plot and the table.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"data = {\n const data = []\n for(var i =.01; i <= 10; i = i + .01){\n data.push(i)\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"points = [1/8,1/4,1/2,1,2,4,8]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"log = stdlib.base.log2\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}