30:T41d,{ 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(160)) .attr("x2",xScale(50)) .attr("y2",yScale(160)) return svg.node() }31:T428,{ 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(-5*0+160)) .attr("x2",xScale(50)) .attr("y2",yScale(-5*50+160)) return svg.node() }32: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() }33:[] 2e:{"title":"March 25","cells":[{"id":0,"value":"html`

March 25

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

Scatterplots

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

It's natural to tackle scatterplots after line plots, because they are very similar. Essentially, you will be using circles instead of a path to make your plot.

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

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

Example 1

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

Let's bring in the cars data set. Open another tab and bring up the Data Sets notebook. The cars data set is right under the teams data set. Note, however, that it is a json file rather than a csv file. Therefore, you need to use d3.json to bring it in.

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

Take a few minutes to familiarize yourself with this data set.

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

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

Example 2

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

I'd like to plot Miles_per_Gallon vs. Horsepower. So I'll put Miles_per_Gallon along the x-axis and Horsepower along the y-axis. To set up the axes, we should find the min and max of both Mile_per_Gallon and Horsepower.

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"d3.min(cars,d => d.Miles_per_Gallon)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"d3.max(cars,d => d.Miles_per_Gallon)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3.min(cars,d => d.Horsepower)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"d3.max(cars,d => d.Horsepower)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`

So, Miles_per_Gallon goes from 9 to 46.6. We could round a bit. Let's make the x-axis go from 0 to 50. Likewise, Horsepower goes from 46 to 230. Why don't we make the y-axis, then, go from 0 to 250. These seem like natural choices. We'll do this next.

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

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

Example 3

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

Go ahead and set up the axes.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"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 //scales\n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([250,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html`

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

Example 4

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

Now, for every car in the cars data set, plot a circle. The x-coordinate of each circle should be Miles_per_Gallon and the y-coordinate should be Horsepower.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"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 //scales\n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([250,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\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 return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"html`

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

Example 5

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

There is something strange, though, about this plot. Note that there are some cars that have zero Mile_per_Gallon. These are indicated by the points along the y-axis. But no car get zero miles to the gallon. So these must represent a few errors in the data. Can we filter them out? Try filtering so that you are only plotting points that have Miles_per_Gallon greater than zero.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"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 //scales\n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([250,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //filter\n var carsFilt = cars.filter(d => d.Miles_per_Gallon > 0)\n \n //circles\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 return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"html`

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

Example 6

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

There is still something strange with the data. There are also cars that have zero Horsepower, indicated by the points along the x-axis. Can you filter these out as well? A hint is to use a double &&.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"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 //scales\n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([250,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //filter\n var carsFilt = cars.filter(d => d.Miles_per_Gallon > 0 && d.Horsepower > 0)\n \n //circles\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 return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`

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

Example 7

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

The relationship between Miles_per_Gallon and Horsepower does not look linear to me. However, if you restrict attention to car where Miles_per_Gallon is 20 or more, then the points look more like a line, slanted downward. Filter once more so that you have only cars with Miles_per_Gallon equal to 20 or more.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"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 //scales\n var xScale = d3.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([250,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //filter\n var carsFilt = cars.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0)\n \n //circles\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 return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html`

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

Example 8

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

Draw a horizontal line at y = 160.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"html`

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

Example 9

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

Let's give the line a negative slope. Make the equation of the line y = -5x + 160

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

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

Example 10

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

Add a slider to adjust the slope (go from -5 to 0). Add a slider to adjust the intercept (go from 40 to 160). Try, then, to visually fit the line to the points.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof slope = slider({min:-5,max:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof intercept = slider({min:40,max:160})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}