Public
Edited
Mar 31, 2023
viewof slope = Inputs.range([0,10],{step:.1,label:"slope"})
viewof intercept = Inputs.range([0,30],{step:.1,label:"intercept"})
viewof species = Inputs.radio(["Chinstrap","Gentoo"],{value:"Chinstrap"},{label:"species"})
html`<div style = "
display:grid;
grid-template-areas:
'a b';
grid-gap: 10px;
">
<div style = "grid-area:a;border:1px solid black;">${plot1}</div>
<div style = "grid-area:b;border: 1px solid black">${plot2}</div>
</div>`
plot1 = Plot.plot({
y:{domain:[0,30]},
marks:[
Plot.dot(beaklength,{x:beaklength,y:beakdepth,fill:"black"}),
Plot.line(endPoints,{stroke:"red"}),
Plot.ruleX([0]),
Plot.ruleY([0])
]
})
plot2 = Plot.plot({
y:{domain:[0,30]},
marks:[
Plot.dot(beaklength2,{x:beaklength2,y:beakdepth2,fill:"black"}),
Plot.line(endPoints,{stroke:"red"}),
Plot.ruleX([0]),
Plot.ruleY([0])
]
})
penguins = FileAttachment("penguins.json").json()
data1 = penguins.filter(d => d["Beak Length (mm)"]!=null).filter(d => d["Beak Depth (mm)"]!= null).filter(d => d.Species == "Adelie")
data2 = penguins.filter(d => d["Beak Length (mm)"]!=null).filter(d => d["Beak Depth (mm)"]!= null).filter(d => d.Species == species)
beaklength = data1.map(d => d["Beak Length (mm)"])
beaklength2 = data2.map(d => d["Beak Length (mm)"])
beakdepth = data1.map(d => d["Beak Depth (mm)"])
beakdepth2 = data2.map(d => d["Beak Depth (mm)"])
yhat = beaklength.map(d => slope*d+intercept)
differences = beaklength.map((d,i)=>beakdepth[i]-yhat[i])
squares = differences.map(d => d*d)
endPoints = [
[0,slope*0+intercept],
[60,slope*60+intercept]
]
d3.max(data1,d => d["Beak Length (mm)"])
d3.max(data1,d => d["Beak Depth (mm)"])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
