30:T43a,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([250,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //filter var carsFilt = cars.filter(d => d.Miles_per_Gallon > 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsFilt.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsFilt[i].Miles_per_Gallon)) .attr("cy",yScale(carsFilt[i].Horsepower)) .attr("fill","cornflowerblue") .attr("stroke","black") } //line svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(slope*0+intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) return svg.node() }31:T43a,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([250,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //filter var carsFilt = cars.filter(d => d.Miles_per_Gallon > 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsFilt.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsFilt[i].Miles_per_Gallon)) .attr("cy",yScale(carsFilt[i].Horsepower)) .attr("fill","cornflowerblue") .attr("stroke","black") } //line svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(slope*0+intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) return svg.node() }32:T4f5,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([250,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //filter var carsFilt = cars.filter(d => d.Miles_per_Gallon > 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsFilt.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsFilt[i].Miles_per_Gallon)) .attr("cy",yScale(carsFilt[i].Horsepower)) .attr("fill","cornflowerblue") .attr("stroke","black") } //line svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(slope*0+intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //red circle svg.append("circle") .attr("r",7) .attr("cx",xScale(mpg)) .attr("cy",yScale(slope*mpg+intercept)) .attr("fill","tomato") .attr("stroke","black") return svg.node() }33:T5b6,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([250,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //filter var carsFilt = cars.filter(d => d.Miles_per_Gallon > 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsFilt.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsFilt[i].Miles_per_Gallon)) .attr("cy",yScale(carsFilt[i].Horsepower)) .attr("fill","cornflowerblue") .attr("stroke","black") } //line svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(slope*0+intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //red circle svg.append("circle") .attr("r",7) .attr("cx",xScale(mpg)) .attr("cy",yScale(slope*mpg+intercept)) .attr("fill","tomato") .attr("stroke","black") //text svg.append("text") .text(`Miles Per Gallon:`) .attr("x",300) .attr("y",50) svg.append("text") .text(`Horsepower:`) .attr("x",300) .attr("y",70) return svg.node() }34:T5d6,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([250,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform","translate(0,270)") d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //filter var carsFilt = cars.filter(d => d.Miles_per_Gallon > 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsFilt.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsFilt[i].Miles_per_Gallon)) .attr("cy",yScale(carsFilt[i].Horsepower)) .attr("fill","cornflowerblue") .attr("stroke","black") } //line svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(slope*0+intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //red circle svg.append("circle") .attr("r",7) .attr("cx",xScale(mpg)) .attr("cy",yScale(slope*mpg+intercept)) .attr("fill","tomato") .attr("stroke","black") //text svg.append("text") .text(`Miles Per Gallon: ${mpg}`) .attr("x",300) .attr("y",50) svg.append("text") .text(`Horsepower: ${slope*mpg + intercept}`) .attr("x",300) .attr("y",70) return svg.node() }35:[] 2e:{"title":"March 27","cells":[{"id":0,"value":"html`

March 27

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`

More With Scatterplots

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html`

I want to first talk about how to put a variable, that can change, inside some html. Let's first type in some easy html:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`My favorite number is 3.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"html`

Let's now create a variable x and put the number 3 into it:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"x = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"html`

Replace the number 3 in the html with the variable x:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html`My favorite number is x.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`

It doesn't work out as expected. It is reading x literally as the letter x. To fix this, you can \"dollar sign\" the variable x:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"html`My favorite number is ${x}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"html`

This makes the html display the actual value of the variable x.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"html`

Use html to write out the equation of a line with slope 2 and intercept 1.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"html`y = 2x + 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`

Set up a slider for slope (go from -5 to 5) and a slider for intercept (go from 1 to 10). Then use html to display the equation of the line with the slope and intercept given by the sliders.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof s = slider({min:-5,max:5,description:\"set the slope\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof i = slider({min:1,max:10,description:\"set the intercept\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"html`y = ${s}x + ${i}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`

Instead of html, you can use tex for equations. It looks nicer.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"tex`y = ${s}x + ${i}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"tex`y = ${slope}x + ${intercept}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof slope = slider({min:-5,max:0,value:-1.89})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"viewof intercept = slider({min:40,max:160,value:139})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"tex`Horsepower = ${slope}*MilesPerGallon + ${intercept}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`

Can you now use the equation of the line that you found to predict the horsepower for a car that gets 40 miles per gallon?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"prediction = -1.89*40 + 139","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"html`

Can you make a slider (call it mpg) that goes from 20 to 50 and then a red circle that rides along the line as you move the slider?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"viewof mpg = slider({min:20,max:50,description:\"choose miles per gallon\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`

Can you add text to the plot, like you see below?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"html`Finally, can you add, as text, the changing values of miles per gallon and horsepower?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}