30:T5c2,{ 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 carsDataFilter = carsData.filter(d => d.Miles_per_Gallon >= 20 && d.Horsepower > 0) //circles for(var i = 0;i < carsDataFilter.length;i++){ svg.append("circle") .attr("r",5) .attr("cx",xScale(carsDataFilter[i].Miles_per_Gallon)) .attr("cy",yScale(carsDataFilter[i].Horsepower)) .attr("fill","Yellow") .attr("stroke","black") } svg.append("circle") .attr("r",5) .attr("cx",xScale(mpg)) .attr("cy",yScale(gradient * mpg + intercept)) .attr("fill","orange") .attr("stroke","black") //lines svg.append("line") .attr("stroke","tomato") .attr("x1",xScale(0)) .attr("y1",yScale(intercept)) .attr("x2",xScale(50)) .attr("y2",yScale(gradient * 50 + intercept)) //text svg.append("text") .text(`Miles Per Gallon: ${mpg}`) .attr("x",330) .attr("y",50) svg.append("text") .text(`Horsepower: ${Prediction}`) .attr("x",330) .attr("y",75) return svg.node() }31:[] 2e:{"title":"March 27","cells":[{"id":0,"value":"html`

March 27

`","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":32,"value":"carsData = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`

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

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"tex`Horsepower = ${gradient} * MilesPerGallon + ${intercept}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof intercept = slider({min:40,max:160,step:1,title:\"Intercept\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof gradient = slider({min:-5,max:0,step:0.1,title:\"Gradient\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"viewof mpg = slider({min:20,max:50,step:0.5,title:\"Miles Per Gallon\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"Prediction = (gradient * mpg) + intercept","pinned":true,"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":"$W31","stdlib":"1","titling":"auto"}