Public
Edited
Feb 28
Insert cell
Insert cell
howell-1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
vl.markBar()
.data(howell1)
.title("height over weight for males")
.transform(
vl.filter('datum.male === 1')
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().fieldQ("height")
)
.width(800)
.render();
Insert cell
vl.markBar()
.data(howell1)
.title("height over weight for females")
.transform(
vl.filter('datum.male === 0')
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().fieldQ("height")
)
.width(800)
.render();
Insert cell
vl.markCircle()
.data(howell1)
.title("height over weight for males")
.transform(
vl.filter('datum.male === 1')
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().fieldQ("height")
)
.width(600)
.render();
Insert cell
vl.markBar()
.data(howell1)
.title("weight categorized for males")
.transform(
vl.filter('datum.male === 1')
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().count()
)
.width(600)
.render();
Insert cell
vl.markBar()
.data(howell1)
.title("weight categorized for females")
.transform(
vl.filter('datum.male === 0')
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().count()
)
.width(600)
.render();
Insert cell
vl.markCircle({ opacity: 0.3})
.data(howell1)
.title("heatmap of age")
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30} ),
vl.y().fieldQ("height"),
vl.size().fieldQ("age").title("age")
)
.width(600)
.height(500)
.render();
Insert cell
vl.markCircle()
.data(howell1)
.title("height decrease decrease over age")
.transform(
vl.filter('datum.male === 1')
)
.encode(
vl.x().fieldQ("age").bin({maxbins: 30} ),
vl.y().fieldQ("height"),
)
.width(600)
.height(500)
.render();
Insert cell
vl.markBar()
.data(howell1)
.title("Age Distribution by Gender")
.transform(
vl.calculate("datum.male === 0 ? 'Female' : 'Male'").as("Gender")
)
.encode(
vl.x().fieldQ("age").bin({maxbins: 30}),
vl.y().count(),
vl.color().fieldN("Gender")
.scale({
domain: ["Female", "Male"],
range: ["pink", "blue"]
})
.legend({title: "Gender"}),
vl.column().fieldN("Gender")
)
.width(500)
.render();

Insert cell
vl.markBar()
.data(howell1)
.title("Weight Distribution by Gender")
.transform(
vl.calculate("datum.male === 0 ? 'Female' : 'Male'").as("Gender")
)
.encode(
vl.x().fieldQ("weight").bin({maxbins: 30}),
vl.y().count(),
vl.color().fieldN("Gender")
.scale({
domain: ["Female", "Male"],
range: ["pink", "blue"]
})
.legend({title: "Gender"}),
vl.column().fieldN("Gender").title("Gender")
)
.width(500)
.render();

Insert cell
vl.markPoint()
.data(howell1)
.title("Height vs Weight by Gender")
.transform(
vl.calculate("datum.male === 0 ? 'Female' : 'Male'").as("Gender")
)
.encode(
vl.x().fieldQ("weight"),
vl.y().fieldQ("height"),
vl.color().fieldN("Gender")
.scale({
domain: ["Female", "Male"],
range: ["pink", "blue"]
})
.legend({title: "Gender"})
)
.width(800)
.render();

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