Published
Edited
Feb 16, 2022
Insert cell
Insert cell
data = FileAttachment("Galtons Height Data.csv").csv()
Insert cell
Insert cell
Plot.dot(data, {
x: d => parseFloat(d.Father),
y: d => parseFloat(d.Height),
}).plot()
Insert cell
Plot.plot({
marks:[
Plot.dot(data, {
x: d => parseFloat(d['Father']),
y: d => parseFloat(d['Height'])
}),
Plot.line(
d3.regressionLinear()
.x(d => d['Father'])
.y(d => d['Height'])
(data)
)
]
})


Insert cell
Plot.dot(data, {
x: d => parseFloat(d.Father),
y: d => parseFloat(d.Height),
fill: "Gender"
}).plot()
Insert cell
Insert cell
d3.regressionLinear()
.x(d => d['Father'])
.y(d => d['Height'])
(data)
Insert cell
${tex`r^2`} : https://en.wikipedia.org/wiki/Coefficient_of_determination
Insert cell
Plot.plot({
grid:true,
// facet: {
// data,
// y: "Gender"
// },
color: { legend: true },
marks: [
Plot.dot(data, {
x: d => parseFloat(d.Father),
y: d => parseFloat(d.Height),
fill: "Gender"
}),
...["F", "M"].map(gender => {
return Plot.line(
d3.regressionLinear()
.x(d => d['Father'])
.y(d => d['Height'])
(data.filter(d => d.Gender == gender)),
{ stroke: d=> gender }
)
})
]
})
Insert cell
Plot.plot({
grid:true,
facet: {
data,
y: "Gender"
},
color: { legend: true },
marks: [
Plot.dot(data, {
x: d => parseFloat(d.Father),
y: d => parseFloat(d.Height),
fill: "Gender"
}),
...["F", "M"].map(gender => {
return Plot.line(
d3.regressionLinear()
.x(d => d['Father'])
.y(d => d['Height'])
(data.filter(d => d.Gender == gender)),
{ stroke: d=> gender }
)
})
]
})
Insert cell
Insert cell
d3 = require('d3', 'd3-regression')
Insert cell

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.
Learn more