31:T440,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points 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(140)) .attr("x2",xScale(50)) .attr("y2",yScale(140)) yield svg.node() }32:T44c,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points 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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(intercept)) yield svg.node() }33:T455,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points 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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) yield svg.node() }34:T455,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points 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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) yield svg.node() }35:T5ed,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points 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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //prediction svg.append("circle") .attr("r",7) .attr("cx",xScale(x)) .attr("cy",yScale(slope*x+intercept)) .attr("fill","tomato") .attr("stroke","black") svg.append("text") .text(`Miles Per Gallon: ${x}`) .attr("x",300) .attr("y",50) svg.append("text") .text(`Horsepower: ${d3.format(".2f")(slope*x+intercept)}`) .attr("x",300) .attr("y",70) yield svg.node() }36:T614,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //points for(var i = 0; i < carsFilt.length; i++){ svg.append("circle") .attr("r",Math.sqrt(carsFilt[i].Cylinders/Math.PI)) .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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //prediction svg.append("circle") .attr("r",7) .attr("cx",xScale(x)) .attr("cy",yScale(slope*x+intercept)) .attr("fill","tomato") .attr("stroke","black") svg.append("text") .text(`Miles Per Gallon: ${x}`) .attr("x",300) .attr("y",50) svg.append("text") .text(`Horsepower: ${d3.format(".2f")(slope*x+intercept)}`) .attr("x",300) .attr("y",70) yield svg.node() }37:T614,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,250]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //filtering data set var carsFilt = cars.filter(d => d.Miles_per_Gallon > 0 && d.Horsepower > 0) //points for(var i = 0; i < carsFilt.length; i++){ svg.append("circle") .attr("r",Math.sqrt(c*carsFilt[i].Cylinders/Math.PI)) .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(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(slope*50+intercept)) //prediction svg.append("circle") .attr("r",7) .attr("cx",xScale(x)) .attr("cy",yScale(slope*x+intercept)) .attr("fill","tomato") .attr("stroke","black") svg.append("text") .text(`Miles Per Gallon: ${x}`) .attr("x",300) .attr("y",50) svg.append("text") .text(`Horsepower: ${d3.format(".2f")(slope*x+intercept)}`) .attr("x",300) .attr("y",70) yield svg.node() }38:[] 2f:{"title":"March 24 (Grad Data Viz)","cells":[{"id":0,"value":"html`

March 24 (Grad Data Viz)

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

Scatter Plots

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

Scatter plots should be straight forward now since we are familiar with line plots. With a scatter plot, you just plot one variable (x-axis) versus another variable (y-axis). Let's stay with the cars data set and plot Miles_per_Gallon vs. Horsepower. Here is the data set again:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1848,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"html`

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,250]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //points\n \n for(var i = 0; i < cars.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(cars[i].Miles_per_Gallon))\n .attr(\"cy\",yScale(cars[i].Horsepower))\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n \n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2118,"value":"html`

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

Example 2

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

The first thing I notice is that there are points along the x and y axes. This has to be a problem with the data, since no car has zero horsepower or zero miles_per_gallon. This data was probably unavailable for some cars. If you look through the data, these values were recorded as null, and they're showing up as zero on the plot. Would filtering the data set to eliminate all records with Miles_per_Gallon or Horsepower equal to zero work? Give it a try.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,250]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //filtering data set\n var carsFilt = cars.filter(d => d.Miles_per_Gallon > 0 && d.Horsepower > 0)\n \n //points\n \n for(var i = 0; i < carsFilt.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(carsFilt[i].Miles_per_Gallon))\n .attr(\"cy\",yScale(carsFilt[i].Horsepower))\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n \n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"html`

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

Example 3

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

It doesn't look, to me, like Miles_per_Gallon and Horsepower have a linear relationship. The plot looks like it curves around the 20 Miles_per_Gallon mark. After that, though, the relationship looks linear. Can you filter again so that we just have cars with 20 or more Miles_per_Gallon?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,250]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //filtering data set\n var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0)\n \n //points\n \n for(var i = 0; i < carsFilt.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(carsFilt[i].Miles_per_Gallon))\n .attr(\"cy\",yScale(carsFilt[i].Horsepower))\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n \n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"html`

Pretty easy!

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

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

Example 4

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

Let's see if we can estimate this linear relationship. Start by drawing a horizontal line at y = 160.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2127,"value":"html`

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

Example 5

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

Add a slider now to move the horizontal line between y = 40 and y = 160.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1913,"value":"viewof intercept = slider({min:40,max:160})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2130,"value":"html`

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

Example 6

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

Now we want to adjust the slope. It's clear that the slope of the line should be negative. So, we want to plot a line with the equation y = slope*x + intercept, where slope is negative. Try letting the slope go between -5 and 0. Add a slider to do this.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1933,"value":"viewof slope = slider({min:-5,max:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"html`

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

Example 7

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

Let's use some TeX to dynamically display the equation of the line. Try then to visually fit the line to the points the best you can.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"tex`Horsepower = ${slope}*MilesPerGallon + ${intercept}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1943,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"html`

I get approximately -1.83 for the slope and 138.45 for the intercept.

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

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

Example 8

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

Use the equation you derived above to predict the Horsepower for a car that gets 40 Miles_per_Gallon.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1964,"value":"prediction = slope*40+intercept","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"html`

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

Example 9

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

Can you write an application that allows you to select Miles Per Gallon with a slider and then predict Horsepower. Display both values with text, and visualize both values with a circle sliding along the red line.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1973,"value":"viewof x = slider({min:20,max:50,step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"html`

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

Example 10

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

Finally, can you make the area of each blue circle correspond to the number of cylinders of the car. In other words, the area of the circle should be proportional to the number of cylinders of the car. Let's start out by making the area of the circle EQUAL to the number of cylinders. So, what should the radius be then? We'll do some algebra:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1999,"value":"tex`Area = NumberOfCylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"tex`\\pi r^{2} = NumberOfCylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2014,"value":"tex`r^{2} = \\frac{NumberOfCylinders}{\\pi}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"tex`r = \\sqrt\\frac{NumberOfCylinders}{\\pi}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2021,"value":"html`Now let's use this information.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2024,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"html`

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

Example 11

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

Ok, that is clearly not good. What we want to do is to make the area equal to a MULTIPLE of the number of cylinders. Let's call this c.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"tex`Area = c \\times NumberOfCylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2034,"value":"tex`\\pi r^{2} = c \\times NumberOfCylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"tex`r = \\frac{c \\times NumberOfCylinders}{\\pi}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"tex`r = \\sqrt\\frac{c \\times NumberOfCylinders}{\\pi}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"html`

We could also make a slider to see what value of c looks good. Also, try putting back the rest of the data set.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2060,"value":"viewof c = slider({min:1,max:20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"tex`r = \\sqrt\\frac{${c} \\times NumberOfCylinders}{\\pi}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2066,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"html`

I think a value of c around 15 or so looks best. You can see that the cars with low Miles Per Gallon and high Horsepower have more cylinders.

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

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}